Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.
- People using screen readers are forced to listen to a long lists of navigation links, sub-lists of links, and other elements before arriving at the main content.
- Keyboard users are forced to tab through all of the top links in order to reach the main content.
- Main content is not usually the first thing on the page or in the source order.
- People using Blackberries, Treos, etc. have to scroll through a huge list of links.
Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.
<body>
<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content</a> </div>
“navigation and other stuff goes here”
<a name=”maincontent”></a>
<p>This is the first paragraph</p>
Please notice that the HREF anchor has “MAINcontent” in the link part, by using “MAIN” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content“. The screen readers have issues with the word content.
Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation (thanks, Justin Thorp). The article uses the ID of “skip“, I figure you might want to use it hide other items or you might want to have more than one “skip” type link, so I changed it to be a “CLASS” instead of an “ID“. The reason I changed the “ID” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required” for web FORM LABELs.
Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it.
CSS below was updated on January 29, 2014.
.hide a, .hide a:hover, .hide a:visited {
display: block;
position: absolute;
left: -10000px;
top: auto;
width: 100%;
height: 3em;
font-weight: bold;
text-align: center;
}
.hide a:active, .hide a:focus {
background: #fff; /* change to whatever your color scheme is */
color: #3d3d3d; /* dark gray */
position: static;
width: auto;
height: auto;
padding: 1em;
margin: auto;
}
As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.
I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?” at Refresh DC.
Pingback: John F Croston III » Blog Archive » Further Explanation of My Accessibility Presentation
Don’t forget that you can use the “Skip to” method for a number of features. For example on pages where I’ve had designs that require a lot of information to be presented in the header, I’ve added “Skip to content” links that take the user directly to the content.
There’s also been a bit of debate by practitioners as to whether or not you should hide the “Skip to” navigation at all. Some say that it confuses users if you do show it since the average joe may click it and not know what changed. So for them, hiding it is the best option. On the other hand the for users that are visually impaired and are using larger fonts to compensate, then the showing the “skip to” navigation is useful as it keeps from having to manually scroll to the supported parts of the page.
I’ve found that it really depends on the target audience for the site as to which method I implement. If the site will receive a lot of traffic from users that need accessibility support then I show it, but if not then I’ll hide it.
I was trying to get the point across that you can have more than one skip navigation link. Such as “Skip to Main Content”, “Skip to Sub Navigation”, “Skip to Search”, etc. I guess I need to re-word that part a little bit.
I agree that you can either show or not display the “Skip to Main Content” link depending your type of audience and the design you have to produce.
With my work website I have to be similar visually to the http://WWW.ARMY.MIL website. It does not mean I can’t have a skip navigation link as long as it is not visible. I think the ARMY.MIL people were talking about putting skip navigation into their code after hearing me talk about it more. I’m not positive on that, but I’m hopeful.
Justin thanks, again for helping clarify a few points.
Pingback: John F Croston III » Blog Archive » How to Hide “Required†from Visual Users, but Make it Available for All Others
I am using “skip to content,” etc on all my new websites now. But there is a problem with SEO, “skip navigation” comes up as a keyword and my SEO specialist is not happy about that. Does anyone have a solution?
Regards to all from Punya
My wife and i were now cheerful Michael could complete his homework while using the precious recommendations he was given in your site. It’s not at all simplistic to simply always be handing out techniques that many many others have been trying to sell. And we also figure out we’ve got the writer to thank because of that. The main illustrations you’ve made, the straightforward site navigation, the relationships your site aid to create – it is many awesome, and it is assisting our son in addition to us understand that subject is cool, and that’s unbelievably vital. Thank you for all the pieces!
Pingback: How to Improve Your Search Usability | John F Croston III
Pingback: Simple Accessibility Updates to Improve New York Times New Redesign – Part 2 | John F Croston III