WCAG Explained: G1 – Skip to Main Content
This is the first in a series of posts where I take a look at WCAG2.0 Guidelines and try to explain them in a way that makes sense to me and hopefully to you as well. I’m a big advocate of learning as much about accessibility as possible and one of the best ways to do so is to ask questions. If you have questions, comments, anything at all, feel free to post them in the comments.
General Technique numero uno: “Adding a link at the top of each page that goes directly to the main content area.” Straight forward enough and extremely helpful.
What Is It
There are many techniques for implementing this type of link and it seems to be one of the most common posts for accessibility around the web. My guess on the popularity is that it’s one of the easiest ways to help make your site more accessible with a minimal amount of work.
Take a look at the Centers for Disease Control and Prevention website. After loading the page, if you press Tab you should see the following on your screen. I’ll most likely be referencing government sites in these posts because they are required (since they are funded by the government) to maintain a certain level of accessibility.
If we’re following the WCAG to the T, then the CDC kind of does this incorrectly. “The first interactive item in the Web page is a link to the beginning of the main content.” Looking at the CDC’s site, we can see the first link links a user to the search box. Is it going to be A compliant? Yes, because it’s in the Bypass blocks of the site (Success Criterion 2.4.1).
If you read through SC2.4.1 you can see that a set of Bypass Blocks will meet A compliance. That means that it’s the most basic level of compliance and as long as the first links on the page can help a user bypass portions of the page, you’re going to be okay. The CDC takes four tabs to get you to the Site Content link, which is all good, but notice something bad happens when you press enter on the Site Content link and then press Tab again.
The next tab takes you back to the top of the page instead of continuing in the tab order of the page. This is a bad experience for anyone using a keyboard, trying to tab through the site so I’d say it fails the 5th test of G1.
This problem is extremely easy to solve in the case of the CDC site. By just adding a ‘tabindex=”0″‘ to the div with ‘id=”contentArea”‘.
<div id="contentArea"> // becomes <div id="contentArea" tabindex="0">
Another way to fix this is to force focus on the div with JavaScript (more on that another time).
So that’s a quick look at a bypass block and how to handle the first links on your page to meet the accessibility guidelines.
How To Do It
The technique here is pretty simple. Just some markup and some CSS.
<!-- Could be as simple as --> <a href="#mainContent">Skip to Main Content</a> <!-- Or maybe ... --> <nav> <a href="#mainContent">Skip to Main Content</a> </nav> <!-- or even ... --> <ul> <li><a href="#mainContent">Skip to Main Content</a></li> <li><a href="#skipToHere">Skip to Other Area</a></li> <li><a href="#moarSkips">Skip to Moar</a></li> </ul> <!-- on cdc.gov --> <div id="skipmenu"> <a href="#searchTarget" class="skippy">Skip directly to search</a> <a href="#azTab" class="skippy">Skip directly to A to Z list</a> <a href="#share-bar" class="skippy">Skip directly to page options</a> <a href="#contentArea" class="skippy">Skip directly to site content</a> </div>
For the CSS we don’t need to do anything fancy. Pretty much anything that isn’t “display: none” will work (display: none removes the content from screen readers).
/* From cdc.gov */
a.skippy {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skippy:active, a.skippy:focus, a.skippy:hover {
top: 0;
left: 0;
font-size: 1em;
font-weight: 700;
color: #fff;
background-color: #075290;
height: auto;
overflow: auto;
width: 99%;
padding: 5px;
z-index: 100;
}
By giving the height and width 1px, this will keep the skip links readable to a screen reader while also hiding all of the content within. When not focused, the links are way off the page. As soon as it gets focus though, the link sticks to the top left, gets some styling and becomes visible for anyone tabbing through the site or listening to a screen reader read the page.
You can find more ways to create skip links in the resources below.
- WebAIM on Skip Navigation and Multiple Skip Links
- Big Nerd Ranch – Some Fancy JavaScript to Adjust Tab Order with Skip Links
- Jim Thatcher – Skip Links (linked to from WCAG page)
Why It’s Helpful / Who It Helps
Visually Disabled – Those with visual disabilities will most likely be using a screen reader of some sort to read a page of content. instead of having to hear each piece of a header (search bar, navigation, logo, etc) a “Skip To Main Content” link will let them jump directly to the main content of the site.
Motor Disabilities – Someone who may not be comfortable with a mouse alone may use a keyboard to navigate through the site. By giving them a chance to skip to the main content of the site you are saving them multiple keypresses. By styling the skip links differently you are also giving them a visual indicator as to where they are on the page (WCAG2.0 Focus Visible – will be discussed later).