WebAIR

Can users jump to the main content from the top of the webpage? (NAV02)

Why Is This Important?

Some assistive technologies, such as screen readers, process web pages linearly, that is, from left to right, top to bottom. When a webpage includes a heading, title, navigation menu and other common elements, this can be a lot of information to read through before getting to the main content of the webpage. Therefore, it is important to allow users to immediately skip any repeated content and jump straight to the main content.

How To Fix The Problem

Provide a link at the very top of the webpage that allows users to "Skip to the main content". This should be an internal link, which link to somewhere else on the same webpage rather than another webpage. As screen reader users move through the page, the skip link should be the very first focusable element. The "href" attribute of the skip link should point to the "id" of an element on the page, such as another link or even a heading. You can use CSS to to hide the link and only show it when the user tabs to it.

 

Also. some screen reader users may navigate webpages by moving through the headings. Because of this it is important to create a hierachy of appropriately-labelled headings.

Example

//Hiding a "Skip to main content" link - CSS #skip_link {
position:relative;
left:-2000px;
} #skip_link:focus {
left:5px;
}

 

//Hiding a "Skip to main content" link - HTML
<html>
<body>
<a href="#main" id="skip_link">Skip to main content</a>
<ul id="navigation">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
<h1 id="main">Some main content </h1>
<p>Here is the main content of the page [...]</p>
</body>
</html>



Further Information

  1. http://webaim.org/techniques/skipnav/
  2. http://accessibility.psu.edu/skipnav
  3. http://www.jimthatcher.com/skipnav.htm