Allow users to skip repetitive elements on the page, which users can access by using the tab key on their keyboard. You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is particularly useful for users with screen readers, as it allows them to jump straight to the important content on a page without having to first navigate through the navigation bar and other repetitive links that commonly occur at the top of each web page.
This is usually accomplished by providing a "Skip to Main Content" or "Skip Navigation" link at the top of the page which jumps to the main content of the page.
For example:
The "Skip to" navigation allows those with screen readers to get to content easily instead of having to tab through many non-relevant pieces of information.
To enable, you could use some of the following html:
<body>
<a href="#main-content">Skip to main content</a>
<div id="main-content">
</div>
</body>Note: When making skip links, also make sure you don't hide them with CSS! For example, do not set skip links as display:none; if you do this, they won't show up on your page. Also try to label your skips links and the divs they target with generic enough names that you can recycle them across pages: for example, <div id="#main-content">. This helps make sure your skip links don't break if you update specific divs within your page content over time.
If you have data that can be displayed in a table that is provided with your map, you can create a "Skip to Table" option for your users.
For example:
To enable, you could use some of the following html:
<body>
<a href="#data-table">Skip to table</a>
<div id="data-table">
</div>
</body>In addition, ensure all content can be accessed without the use of a mouse, use tab and directional keys (+, -, ↑, ↓, ←, and →) to test your application and/or map. An application should have as much of the same content available to the largest audience as possible.
Return to the Best Practices homepage.