Page tree
Skip to end of metadata
Go to start of metadata

Description

The page does not contain a link element that lets screen reader users or keyboard-only users skip to the main content of the page.  

Note: The navigation should be placed before the main content in the DOM and the skip set up to bypass all the navigational elements.  

 

Checkpoint:

A method shall be provided that permits users to skip repetitive navigation links. (WCAG 2.0)

Message:

No skip navigation link is present.


Fix

To remediate this issue, add a Jump to Content link element and an matching ID on the H1 element of the page.

If there is a Skip to Navigation link,  change the link text to "Jump to Content".  For consistency, change the href attribute to #content.

Example:

<div id="skiptocontent"><a href="#content">Skip Jump to Content</a></div>

 

Add the id="main_content" to the H1 element in the main content.

Example:

<h1 id="content" tabindex="-1">Main Content Heading element</h1> 
    

For the university template, you can use id="contain_column2" as long as the H1 is the next element.

Example:

<div id="skiptocontent"><a href="#contain_column2">Jump to Content</a></div>
<div id="contain_column2">

 

The Jump to Content should be visible to keyboard–only users also.  Add the CSS makeup below to make the Jump to Content visible when it receives focus.

CSS Example:

#skiptocontent a {
padding:6px;
position: absolute;
top:-50px;
left:0px;
color:#a74300;
}
#skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
background:#fff;
outline:0;
}
  • No labels