How to make Skip Navigation links
Posted in Knowledge Base and Production 3 years, 2 months ago at 12:25 pm
Some visitors to your site might be listening rather than reading your site. So that they do not have to listen to all the menu items every time they click to a new page, provide a Skip Navigation Link so they can skip over all menu items and get right to the content area.
Visitors who use the keyboard to navigate rather than click the mouse for every link, will also appreciate being able to skip over menu links.
Older methods would hide the skip navigation link, but it is more common now, for sites to provide an accessibility toolbar that displays icons to click for skip, turn off images, increase the font size, and print.
Instructions
- In your web site’s header or navigation file, define the content area with an ID:
<section id="content"><p>Main content goes here.</p> </section>
- In a toolbar menu, add an anchor to a line item that links to the new content ID:
<li><a href="#content" title="Skip navigation">Skip</a></li>- OR use a down arrow:
<li><a href="#content" title="Skip navigation">↓</li> - OR use a graphic:
<li><a href="#content" title="Skip navigation"><img src="skip-icon.gif" alt="Skip navigation" /></li> - NOTES:
- The link goes before any other menus, so the visitor can skip over all of them.
- The link should not be the most important link on the page even though it goes first.
- Style the link and/or toolbar with a class as needed.