Skip To My Content - Accessibility, Tools and Tutorials, Usability

One simple feature can help users get into your site. Without this feature there is a barrier on every page. Some users will pass this barrier without noticing. For others, this barrier is a significant usability problem.

I’m talking about skiplinks.

Imagining Skiplinks

Look at the three links at the top right of this page: Skip to Content, Skip to Navigation and Skip to Footer.

Refresh the page, and without clicking anywhere put your mouse aside until the end of this section. I want you to pretend to be legally blind. You’ll be navigating via keystrokes. Using a mouse makes no sense if you cannot see.

To help un-visualize the process of “seeing” a web page visually, pretend to hear with your eyes. Imagine that your information comes in through hearing.

Push on the tab key, notice which link is now highlighted and imagine you’ve just heard a screen reader say the highlighted link text: Skip to Content. Push Enter and you’re at the start of the first article on the page. That is what a skiplink should do.

Let’s try this again, imagining that there are no skiplinks. Refresh the page, and without clicking anywhere put your mouse aside. Push on the tab key, again and again, noticing which link is highlighted each and every time. Imagine that each link’s link text is read out loud as you tab to it. You learn about the existence of that link as it is read aloud.

Your goal is to find and read the main article and any comments at the end of the article, by clicking on the permalink. In my blog, the permalink is the title of the post. You may or may not know that. In my current layout, if you are attempting to do this by waiting for a screen reader to read off all of the links on a page, you will need to listen to about 50 links before getting to the article. Imagine doing something like this on page after page, working your way through 50 or so links before getting to the article.

What a nuisance, eh? Through this very rough example, you’ve just scratched the surface of imagining something like the process of accessing a blog post with the help of adaptive or assistive technology.

Disclaimer – observing an expert screen reader moving smoothly through an accessible site is a completely different experience.

Three Points About Skiplinks

Skiplinks are also useful for people attempting to access a site on a mobile device such as a smart phone. Got skiplinks? Skip a whole lotta scrolling.
Power users who can make their screen readers dance on a dime still swear by the humble skiplink. Imagine what skiplinks could do for beginners
Skiplinks are easy to add. Easy.

Skiplink How-to Example

Make an unordered list of three or four items, starting with the most commonly sought item on the page. I like to start with “skip to content,” followed by “skip to navigation.” Other possibilities are the footer, a contact page, an accessibility statement, and a site map. Just like in any other navigation usability niceness, the fewer links a user needs to get through before arriving at their destination, the better.

The HTML – A framework

This goes in your header, right after the body tag opens.

 
<div id="skiplinks"">
<ul>
<li><a href="#content">Skip to Content</a></li>

<li><a href="#navigation">Skip to Navigation</a></li>
<li><a href="#footer">Skip to Footer</a></li>
</ul>
</div>

Next, you’ll need destinations for your anchors. If you’re using WordPress, you may need to add a “content” destination to index.php and single.php, and even archives.php. “Navigation” usually goes at the top of sidebar.php, and footer.php (of course) is a good place for a “footer” destination.

However, before adding destinations for those links, check to see if your theme already has them. My current theme for this site already had IDs named “content” and “footer.”

If you already have one of these:

 
<div id="footer"></div>

You don’t need one of these:

 
<a name="footer"></a>

You can make a quick check of your site by trying out the links in your address bar. Navigate to your site and add #content after whatever is in your address bar, leave the cursor in the address bar, and then press “Enter.” No movement, no #content destination on the page.

Some themes use #content for a wrapper that goes around both a sidebar and an article area. Make sure that your “content” skiplink’s destination is really the start of the article area in your theme.

If you anticipate needing a “return to top” link, consider use “top” as the name for the skiplinks ID, to give a built-in destination for those links.

CSS – A place for everything; everything in its place

The styling I’m using on this site right now is one way to go.

 
#skiplinks {
          width: 100%;
          background: #fff;
          clear: both;
          text-align:right;}

 
#skiplinks ul {
          text-align:right;
          width: 750px;
          margin: 0px auto;}

 
#skiplinks li {
          background:#fff;
          text-align:right;
          display:inline;
          list-style-type: none;}

 
#skiplinks li a {
          color:#000;
          font-size:.8em;
          margin: 0 .25em;
          text-decoration: none;
          font-weight: bold;}

 
#skiplinks li a:hover {
          background-color: yellow;
          color: blue;}

As always, your mileage may vary. Fine tune styles and html placement to suit your site.

Hat tip to Jeffrey Zeldman – The no access road