Skip Navigation Links
Skip navigation links are one of the easiest things you can do to immediately make your website more accessible to those with disabilities. Unfortunately, they aren’t used quite as often as they should be.
The Problem
Many screen reader users navigate a site by tabbing through links. Potentially, this means that on every single page of your site, the user would have to tab through your navigation.
As you could imagine, this would be quite cumbersome, especially on a site like the New York Times or CNN which have dozens of links before their main content. A skip navigation link takes the user directly to the main content of your page with significantly less work. Neat-o!
Implementing Skip Navigation Links
Fortunately for you, if your client thinks skip navigation links are unsightly and you still want to help your audience, the solution is simple: make it invisible.
It’s important to realize that sighted users can benefit from this link as well, especially users on mobile devices, so if possible I absolutely encourage you to use visible link text or a visible image like this site does.
The Solution
Before we write any code, create a 1 pixel by 1pixel transparent gif and name it skipnav.gif or something else to your liking.
Next, at the top of your html inside your first div, insert this code:
<a href=”#content” id=“skipnav”><img src=“your_path/skipnav.gif” alt=“Skip to Main Content” /></a>
Note: This assumes that your main content is surrounded by a div called content. If you main content div is called something else, replace #content with your div’s name.
And in your CSS, paste this:
#skipnav {position: absolute; top: 0; left: 0;}
#skipnav img {border: none;}How it Works
By absolutely positioning the transparent gif, you’ll ensure that it won’t affect the layout of other items on your page. When the user tabs to the link, the screen reader will read back the alt text of the image.
By Kyle Petersen | 9 months, 3 weeks, 2 days, 4 hours, 5 minutes ago
