Welcome to our first exercise
Fix these bugs:
- After you click a navigation item, tabbing through the website pops you back up to the top of the page.
- The form at the bottom can't be submitted with just your keyboard.
- 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>