...
Provide Skip to Main Content Link
This allows Provide screen reader and keyboard only users with the ability to skip repetitive navigation menu links and go straight to the main content area.
...
| Code Block |
|---|
<a href="#maincontent" class="skip-link visually-hidden visually-hidden-focusable">Skip to main content</a> <main id="maincontent" role="main"> <h1> Page title</h1> <p>This is the beginning of the main content area</p> </main> |
Provide Sequential Navigation
Ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard.
This reduces confusion by letting users form a consistent mental model of the content.
For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page.
Make sure that the focus order makes sense to both of these users and does not appear to either of them to jump around randomly.
Create a logical tab order, for screen reader and sighted keyboard only users, through navigation menus, forms and data tables.