2.8 Skip-Link Navigation

Skip-links improve the usability of a website most of all for those users who are dependent upon a screen reader. Screen readers linearize the content of a website and read it aloud from beginning to end. Skip-links should be as close to the beginning of the source code as possible and provide links to the most important areas within the web page (navigation, content, etc.).

This of course invites the discussion of wheter it is not better to simply place the content of the website as close to the beginning of the source code as possible -- and place the navigation further down. This would let the user arrive at the content more quickly, without having to listen to the navigation links be read aloud on every single page.

But - what if the user does not want to read the content? The user might well merely want to visit a further subarea of the navigation. It would then be quite frustrating to have to go through the entire content before getting to the navigation. Clearly, there is no perfect placement of the content in the source code. More practically, we need to help the users get quickly to the kind of content they need. Skip-links are a very simple and effective tool.

Skip-Link Navigation in the YAML Framework

The skip links in YAML's source code   are located just after the opening BODY tag. In general, they should be placed before all other content. Two skip targets are defined: The first skiplink passes further content in #topnav and #header and leads directly to the main navigation in #nav. The second skip link leads directly to the main content of the website, in this case to #col3.

Here is the associated markup. Skip-links are created as an unordered list with the ID #skiplinks. This class is defined in the base.css (see Section 3.3) and controls the visual properties of the list. Furthermore, each link in the list get's the CSS class .skip.

(Kopie 1)

Alternatively, you can integrate the skip links directly into their layout. The unordered list is optional. To ensure the functionality,  only the CSS class .skip     is required for skip anchors. The following example shows the placement of the skip links before the meta navigation in #topnav. 

Existing IDs within the layout serve as skip targets in both of these examples. You can use any ID as an anchor in the href attribute of your skip links. Alternatively - although not often done today - you can use named anchors as skip targets. In this case, the skip target must have identical values for both the id and name attributes to ensure backwards compatibility (i.e. <a id="content" name="content">).

Invisible and Accessible

Users without disabilities who use the internet with standard browsers generally do not need this navigational help. For this reason, the skip links are invisible in the print and normal screen views.

However, the links cannot be hidden with the css property display:none; that is interpreted by screen readers and such content is not read aloud. The skip links would then be unusable. Furthermore, skip links have to become visible on focus to provide visual feedback for those users navigating with a keyboard.

The CSS definitions required are located in the CSS file base.css (see section 3.3: Base Stylesheet)  and are always available via the ID #skiplinks (invisible list) and .skip (skip anchor).

 /**
  * @section hidden elements | Versteckte Elemente
  * @see     www.yaml.de/en/documentation/basics/skip-links.html
  *
  * (en) skip links and hidden content
  */

  /* (en) classes for invisible elements in the base layout */
  .skip, .hideme, .print {
    position: absolute;
    top: -32768px;
    left: -32768px; /* LTR */
  }

  /* (en) make skip links visible when using tab navigation */
  .skip:focus,
  .skip:active {
    position: static;
    top: 0;
    left: 0;
  }

  /* skiplinks: technical setup */
  #skiplinks {
    position: absolute;
    top: 0px;
    left: -32768px;
    z-index: 1000;
    width:100%;
    margin: 0;
    padding: 0;
    list-style-type: none;   
  }
 
  #skiplinks a.skip:focus,
  #skiplinks a.skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width:100%;
  } 

After the general definition, the visual presentation of the links must be determined by the webdesigner. The layout examples included are shaped by the rules in the basemod.css.

 /**
  * Skiplinks
  *
  * (en) Visual styling for skiplink navigation
  * (de) Visuelle Gestaltung der Skiplink-Navigation
  *
  * @section content-skiplinks
  */
 
  #skiplinks a.skip:focus,
  #skiplinks a.skip:active {
    color:#fff;
    background:#333;
    border-bottom:1px #000 solid;
    padding:10px 0;
    text-decoration:none;
  }

Further reading: Jim Thatcher's "Skip Navigation" article gives a very good overview of various methods of skip link presentation.

This helpful navigational method can be expanded through the use of further skip targets. Such expansion is entirely up to the individual webdesigner and should be undertaken only after thorough consideration.

Correcting Focus Problems

Although there are no problems with the visual presentation of skip links, Internet Explorer 8 on Windows 7 as well as Webkit-based browsers such as Safari and Google Chrome require a focus bugfix. In these browsers, the skip target is reached (the target is displayed in the visual area of the viewport), but the tab focus remains on the skip link and not on the target.  If the user tabs again, the focus jumps back to the beginning of the document, to the anchor or element which immediately follows the activated skip link.

YAML provides a script which finds all the skip links in a document, analyzes the targets, and automatically sets the focus to the target anytime one of the links is clicked.

The JavaScript file yaml-focusfix.js is in the folder /yaml/core/js/.

To prevent possible performance problems in high-traffic sites, the script is included just before the closing BODY tag in the layout samples and in the file markup_draft.html.  

Chapter 3: CSS Components