Having a consistent set of links at the top or left side of a document is beneficial for both usability and for people with some mobility impairments as they may not need to move the mouse as far to reach the navagation.
But for users with screen readers, hearing the same list of links at the beginning of each page is time consuming and potentially irritating. Therefore a Skip Navigation strategy should be included to allow users of screen readers to skip over a block of navigational links.
SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links or very long lists of links.
ablative - ...
acessive - ...
Screen Reader would say: A bar B bar C bar D bar E...bar Z. Linguistics Glossary ablative...
In the first method, an invisible pixel graphic is placed before the navigation with the ALT tag reading "Skip Navigation." This is turned into a link which goes to a page-internal link further down the page. Note that the image BORDER should be set to "0" in order to keep the image hidden from visual browsers.
<a href="#skip">
<img src="transparent-pixel.gif" alt="Skip
Navigation" border="0" >
</a >
<a href="A.html"> A </a> | <a href="B.html"> B </a> | ...
<a href="Z.html"> Z </a>
<a name="skip" > </a >
<h1> Linguistics Glosary - A </h1>
...
In visual browsers, the hidden graphic is marked by a blue dot before the "A" because the border was not set to 0.
In this method the text link "Skip Navigation" is placed before the navagational block, but the style is set to the same color as the page background. This makes it invisible to visual browsers, but audible in screen readers.
Note: Avoid using the {visibility: hidden} attribute since that causes the text to be skipped over in screen readers also.
.hidden {background-color: white}
<a href="#post-skip" >
<span class="hidden" >Skip Navigation </span >
</a>
<a href="A.html">A</a> | <a href="B.html">B</a> |
...
<a href="Z.html">Z</a>
<a name="skip"> </a>
<h1>Linguistics Glosary - A</h1>
...
For this example, the "Skip Navigation" text is greyed out to show placement.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.
