Back to Basics: Skip to Main Content Links

One of the earliest solutions in all of web accessibility was the “skip to main content” link, a same page link at the top of the page that enables users to skip past navigation links and go straight to the main content of the web page. Despite the fact that these links have been in use since the early 1990’s, they actually aren’t implemented well at all by browsers. They can be a huge benefit to sighted non-mousers (navigating by keyboard) but they don’t work for these users in any browser other than Firefox and Internet Explorer, and they don’t even work in IE unless link targets have tabindex=”0″. This blog post discusses all of this, and ultimately proposes a simple JQuery solution that makes same-page links work beautifully in all browsers.

People tend to think of screen reader users as being the primary beneficiary of these links. However, they’re also beneficial – perhaps even more beneficial – for sighted non-mousers, who are navigating through links on the page using the keyboard (mostly commonly, the tab key). Imagine a link smack dab in the middle of the page that a keyboard user wants to select. They can see it, but they can’t get to it without first tabbing laboriously through dozens, maybe hundreds, of links that comprise the site’s various navigation menus.

Users of screen magnification tools such as ZoomText and Magic also benefit from these links. If their screen is zoomed significantly, they typically have to scroll down and right, hunting for the main content. If the first think they see in the upper left corner is a skip link, they can select that and find their target instantly.

Are skip nav links still necessary?

Times are changing. We now have better ways to facilitate navigation on a web page, most notably HTML headings and ARIA landmarks. Take this example:

  <div role="main">
    <h1>Main Content</h1>
    <!-- main content of the page -->
  </div>

With this markup, screen reader users can jump directly to the top-level heading (<h1>) using a hot key (for example, “h” or “1” in JAWS) or they can jump directly to the “main landmark” (role=”main”) with another hotkey, which in JAWS is the semicolon (;). Either way, the user agent (i.e., screen reader) is providing a mechanism for navigating the web page using the page’s existing standard markup. The web developer doesn’t have to add a link for this to happen.

Unfortunately, sighted non-mousers aren’t likely to be using screen readers, so they’re depending on browsers providing this same sort of functionality, and currently most browsers aren’t doing that. Opera is the lone exception. Tapping the S key moves forward through HTML headings, and the W key moves backward. This feature was enabled by default prior to Opera 9.5. Since then, this and other single-key shortcuts must be enabled within Settings > Preferences > Advanced > Shortcuts. Other browsers have extensions that might help users to navigate headings by keyboard, but often these extensions are out of date or for various other reasons not usable for keyboard users. And no browser, not even Opera, currently provides keyboard shortcuts for landmarks or their corresponding HTML5 section elements (e.g., header, footer, article, section, nav, and aside).

Until browsers provide better support for headings, landmarks, and/or HTML5 section elements, it’s still advisable to provide a “Skip to Main Content” link in the upper left corner.

Visible or hidden?

Many web sites that include skip links often position them off-screen using CSS, so they aren’t visible to sighted users:

  a.hidden {
    position: absolute;
    left: -999px;
  }

Screen reader users can still access them if they’re positioned off-screen. For sighted keyboard users, the link can be made visible as soon as the user hits the tab key that first time:

  a.hidden:focus { 
    left: 5px;
  }

This technique helps to avoid the problem of having links on the page that the majority of users don’t understand, a usability problem that’s compounded when the main content is already visible on the page, in which case the web page typically doesn’t change its appearance in any way after a user clicks the skip link.

Unfortunately if the skip link is hidden, magnification users (who are likely to be using a mouse, not keyboard) won’t know it’s there. They can still hunt for the main content, so the page isn’t totally inaccessible to them, but the page could be more usable for them with a visible skip link.

Also, in Opera (tested through 11.6) hidden links don’t receive focus. Using Opera’s keyboard model, one can navigate through links on a page using Shift + arrow keys, but skip links that are positioned off-screen can not be accessed.

The link target: Named anchor or id?

There are a couple of methods for identifying the target of a same-page link.

Historically, the target was typically identified with a named anchor tag:

  <h1><a name="main">Main content</a></h1>

Alternatively, the target could be an element’s id attribute:

  <h1 id="main">Main content</h1>

The first method was once preferred because certain browsers (early versions of Netscape I think) didn’t support linking to an id attribute. However, id attributes are much more useful in general, and by now all major browsers have supported linking to id attributes for many years and versions. In HTML5, the name attribute on an anchor element is considered obsolete, and will generate a validation warning.

Before I lay named anchors to rest though, I thought I’d better do some testing to be sure I fully understood how skip nav links are supported across browsers and screen readers. So I created a Skip Navigation Test Page.

Skip Navigation Test Results

In all browsers, a same-page link causes the page to scroll down to the point where the target content is visible on the screen. However, for most browsers this is purely a visual effect. A user’s keyboard focus does not jump to the section marked by the target. If, after selecting a skip navigation link, we press tab (or shift + down arrow in Opera) to go to the next link, we find that our focus is still at the top of the page, not in the new section that we had hoped to skip to.

Firefox is the only browser that gets this right. If I select a skip nav link in Firefox, the next time I hit the tab key I will jump to the first link in the target section. This is true whether the link target is a named anchor or an id, with or without tabindex=”0″. (I tested with Firefox 8.0.1).

Internet Explorer behaves like all other browsers (i.e., it scrolls down to the target content but doesn’t place keyboard focus there) unless the target includes tabindex=”0″. Then, it works fine using either a named anchor or id attribute. (I tested with IE7 and 9).

JAWS 13 works perfectly in Firefox regardless of method used. In IE9, JAWS works the same for all methods, but I wouldn’t exactly call it perfect. Whenever a same-page link is selected, JAWS announces the content at the target, but before it does so it announces the page summary data (number of headings, number of links, etc.) as if the page is being reloaded.

NVDA results are similar to JAWS. It works perfectly in Firefox for all methods. However, in IE it has one minor limitation: It doesn’t support named anchors unless the target has tabindex=”0″. It does support id attributes as targets, with or without tabindex. This is only a limitation in IE, not in Firefox.

On Mac OS X, VoiceOver works perfectly, regardless of method.

In summary, either a named anchor or an id will work as a target in Firefox and IE, but the target also needs tabindex=”0″ or IE doesn’t give it focus. And nothing you do with HTML alone will work for keyboard users in Chrome, Safari, or Opera.

JQuery Solution

With some simple JQuery, you can force browsers to give focus to the targets of skip nav links, plus highlight the target section temporarily so sighted users know they’ve arrived. This solution also improves the experience for JAWS users in IE – when JAWS users click the skip link, JAWS announces the target content without repeating the page summary (tested with JAWS 13 in IE9). You can see this in action on my Skip Navigation with JQuery page. It’s also implemented here on the page you’re now reading.

Here’s how to implement this solution in four easy steps:

Step 1. Add JQuery Libraries

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
 </script>

That’s all that’s required to make focus work, but if you want to visually highlight the target (recommended), you’ll also need to load the JQuery UI “Highlight Effect”. If you’re using no other JQuery on your site, you can build a custom JQuery download at jqueryui.com/download that includes only the parts you need (Effects Core and Effects “Highlight”).

Step 2. Add Custom JQuery function

Just copy and paste:

<script>
  $(document).ready(function() {
    // add a click handler to all links 
    // that point to same-page targets (href="#...")		
    $("a[href^='#']").click(function() {
      // get the href attribute of the internal link
      // then strip the first character off it (#)
      // leaving the corresponding id attribute
      $("#"+$(this).attr("href").slice(1)+"")
        // give that id focus (for browsers that didn't already do so)
        .focus()
        // add a highlight effect to that id (comment out if not using)			
        .effect("highlight", {}, 3000);
    });
  });
</script>

Step 3. Add skip navigation link

Add a same-page link to the top of your body. Note that users are more likely to understand, and therefore use, links with text that describes the target, rather than what’s being skipped. In other words, say “Skip to Main Content”, not “Skip Navigation”. This is supported by research, though I can’t find the citation at the moment.

 
 <a href="#main">Skip to main content</a>

Step 4. Add link target

The target should be a div with an id attribute and tabindex=”-1″, like so:

  <div role="main" id="main" tabindex="-1">
    <h1>Main Content</h1>
    <!-- main content of the page -->
  </div>

See the comment from Jared Smith below for an explanation of why tabindex=”-1″ is preferable over tabindex=”0″.

Thanks to Greg Kraus for helping with the JQuery solution!