Links
- The first link that should be added is a "Skip to" link, to skip ahead to the main content or main navigation, without having to hear other content first. Clicking one of the skip to links will take a screen reader or keyboard user directly to the relevant location on the screen. Things to keep in mind when using the "skip to" links:
- Always put them at the very top of the page – they should be the first items encountered by users who need them.
- Don't use more than one "skip to main navigation" and "skip to main content" link – doing so will only confuse the user. A site only needs to provide a link to the main content and main navigation to be considered accessible – not to every part of the page.
- View "skip to" code for this site
- In most browsers, the "tab" key allows users to move from link to link and the "enter" key to select the link. When using HTML alone, links are always accessible; however, links created with JavaScript or Flash usually are not.
- Screen readers will inform users that an item is a link; therefore, it is not necessary to include the word "link" in the link text.
- Link text should tell the user where he or she will be going if he or she clicks the link. Link text such as "click here" doesn't tell the user anything; link text such as "About Us" does. Also, ensure the link text is long enough to tell the user where he or she will be going, but short enough not be tiresome to hear via a screen reader.
- If an image is being used as a link, be sure to use meaningful "alt text" (see Accessible Images).
- If linking to non-HTML resources, give some indication. For example:
<a href="#"> Status Report (PDF Document)</a>
- Warn users if the link will open a new window or an external site
- Groups of links should have non-link characters between them. For example:
<a href="#">Link 1</a> | <a href="#">Link 2</a>
- Group large numbers of links into logical sections
"Skip to" Code
<!-- XHTML code -->
...
<body>
<ul class="offset">
<li><a href="#content">Jump to Content</a></li>
<li><a href="#nav">Jump to Navigation</a></li>
<li><a href="#footer">Jump to Footer</a></li>
</ul>
...
<!-- CSS code -->
ul.offset, .offset {
position : absolute;
top : -9000px;
left : -9000px;
z-index : 9;
}
ul.offset a:focus, ul.offset a:active {
position : absolute;
top : 9010px;
left : 9010px;
background : #1E6083;
color : #fff;
padding : 5px;
font-weight : bold;
border : 2px solid #000;
width : 6em;
z-index : 9;
}