A fairly complicated header area sometimes involving one or more graphics can be annoying to someone using screen reading software. You don’t want to hear, “link image spacer graphic link graphic logo link home link about us link contact us link mission link image spacer graphic” very often before heading off to visit another site. As well as all the above, the user then often has to hear a list — the same list on every page — of links to other areas of the site. Of course, on a first visit to a site, the user probably does want to hear what the main navigation has to offer, but not every time, not on every page.
The thoughtful designer these days is offering a “skip to:” alternative to jump over all those repetitive links. Some offer a “Skip to content” link so the navigation is ignored and the user is taken straight to the heart of the page. But, because users sometimes need to know what other links are available, a better solution is to provide both “Skip to Navigation” and “Skip to Content” options and let the user decide.
Put something like the following code right after the <body> tag (and before all those graphics and links, etc.) in your (X)HTML page:
<div id=”access”><p>Skip to: <a href=”#navigation”>Navigation</a> | <a href=”#maincontent”>Main Content</a></p></div>
The “access” is going to be used in our CSS file in a moment.
Put the following just above the beginning of your navigation
<a name=”navigation”></a>
<a name=”maincontent”></a>
#access {
position: absolute;
top: -9999px;
font-size: 1px;
}
The absolute positioning of 9999 pixels above the page ensures the links are not visible on anybody’s monitor. Of course, it doesn’t have to be this way, lots of designers have the navigation and content links visible. But if positioning the links on the page would upset your design, this is an alternative that screen reading software can still find.
When the screen reader finds the links, the user hears, “Link, Navigation” and, “Link, Main Content.” Actually, JAWS pronounces “content” as though it means, “satisfied.” Adding the word “main” makes JAWS pronounce it in a more appropriate fashion.
Tags: accessibility, skip, skip to
October 19, 2008 at 8:52 pm
Hi,
Screen reader users are not the only ones that find skip links helpful. By hiding them, you will disadvantage many people with physical disabilities who also can’t use the mouse. This is why all skip links must appear first on each the page and must be visible.
Gez Lemon has a very good article about the different methods for adding skip links http://juicystudio.com/article/skip-links.php