Welcome to our first exercise

Fix these bugs:

  1. After you click a navigation item, tabbing through the website pops you back up to the top of the page.
  2. The form at the bottom can't be submitted with just your keyboard.
  3. There is no "skip link" for getting right to the main content.

Focus

HTMLElement.focus can be used to set focus on an element.

Tabindex

Remember tabindex:

  • -1 not in tab order, but it can be focused with JS
  • 0 in the natural tab order, and it can be focused
  • 1+ anti-pattern but can be used to jump to the fron tof the tab order, higher number, higher position

Tabbable Items

There is a list of all focusable selectors on my focusable repo. They are:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
object,
embed,
[tabindex="0"],
[contenteditable]

Skip Links

Learn more about Skip Links here.

Your HTML

<a href="#maincontent" class="skip-link">
  Skip to main content
</a>

<div class="navigation">
  <!-- Your navigation -->
</div>

<div id="maincontent" tabindex="-1">
  <!-- Your Content -->
</div>
Sign Up Favorite Color Remember me
Cancel
Submit