| outline | deep |
|---|
Ensure that your web application can be fully operated with the keyboard only:
On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.
Of course, sighted people who use their mouse do not have any trouble with web pages like this. They can almost immediately scan over the page and identify where the main content is. Skip navigation links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content.
The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area.
<body>
<a href="#main">Skip to main content</a>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<main id="main">
<!-- page specific content -->
</main>
</body>
<tapsi-button href="#" variant="brand">nevigate somewhere</tapsi-button> -->