Bypassing blocks of content: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

Bypassing blocks of content is necessary to bring the experience for people with disabilities in line with those without disabilities.


  • Create links to skip blocks of repeating content
  • Use skip-to and skip-over links to navigate content
  • Use WAI-ARIA landmark roles to describe the purpose of content areas
  • Group blocks of repeated content in ways that can be easily skipped

Websites often have pieces of content that repeat on every page, such as heading banners, menus, navigation or advertising material. These are often at the top of the page and at the beginning of the webpage, yet the user usually requires the information located in the main content area, which is rarely the first thing encountered on a page.

People without a disability can visually scan a webpage, very easily ignoring content such as images, banners and navigation items, to focus on the content areas that are of interest to them. People using a screen reader or those using only a keyboard or keyboard alternative navigate a website linearly, in the order the webpage is written, and therefore expend much more effort to navigate beyond these repeated blocks.

Imagine if you had to read out every item on the page from the top — the logo of the webpage, the search box and all the menu items — before you could read the information in the main content area. This is what some people face if there is no way for them to skip over repeating content. For this reason, bypassing blocks of content is necessary in order to bring the experience people with disabilities have in line with people without disabilities.

Success Criterion 2.4.1: Bypassing blocks states:

A mechanism is available to bypass blocks of content that are repeated on multiple webpages. (Level A)

The purpose of this is to allow people who navigate content sequentially to skip over repeated content so they have rapid and direct access to primary content.

There are a number of best practices for bypassing repeated material that together produce the best result for the user:

  • Create links to skip blocks of repeating material.
  • Use WAI-ARIA landmark roles to describe the purpose of content areas.
  • Group blocks of repeating material in ways that can be easily skipped.

Create links to skip blocks of repeated content

The most common technique for bypassing blocks is to include a link or multiple links that enable the user to skip blocks of repeated content such as navigation. These links are commonly referred to as 'skip links' or 'skip navigation links'.

There are two different ways in which skip links can be used:

  1. Skip-to link: Supply a link at the top of each page that takes the user directly to a key area of content such as the main content area or search box.
  2. Skip-over link: Add a link at the beginning of a block of repeated content, such as the main navigation, that takes the user to the end of that block.

Both methods will satisfy Success Criterion 2.4.1: Bypassing blocks and may be used in combination with one another.

Skip links are very easy to implement. They require a named anchor at the destination, and a clearly labelled link at the top of the page, linking to that anchor. Once you have decided on the type of skip links you will use, you can add them to the website template applied across your site.

Skip to areas of content

Skip-to links take the user directly to main content areas. These areas could include, but are not restricted to, the main content area, main navigation area, and the search function.

If your document has a simple structure with a single main content area and single navigation section, then it may be sufficient to include a single link at the top of the page that allows the user to bypass the navigation and skip to the main content area. It is overkill to supply too many of these links.

If your website structure is more complex with multiple navigation areas, multiple significant content areas that are of equal importance or a search function, then include multiple skip links to different areas of content on your website. These skip links will act like a mini table of contents for the user.

Skip-to links should be the first interactive element that the user reaches when tabbing through the page. If users have to tab through a number of elements before reaching the 'skip to main content' link, then the purpose of the skip link is defeated. People who use skip links expect them to be the first element, and therefore may assume if one is not present there, none are present.

Skip-to links must be either visible at all times or visible when they have focus. Designers often prefer that skip links are hidden for aesthetic reasons. As a result, skip links on many websites are hidden until they receive focus at which point the link is made visible. If JavaScript is used to activate visibility, there should be a fall back for users with JavaScript inactive.

Note: The Web Accessibility Initiative (WAI) recommends that skip-to links are visible at all times although this is not a mandatory requirement to meet Success Criterion 2.4.1.

The best position for skip-to links is at the top left of the website template. This makes it easier for people using a screen magnifier to predict where the skip link will be located, particularly if that skip-to link is only visible when it has focus.

Code sample from "Skip Navigation" Links by WebAIM.

<style type=”text/css”>

#skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

#skip a:focus { position:static; width:auto; height:auto; }

</style>

<div id="skip">

   <a href="#navigation">Skip to navigation</a>

   <a href="#search">Skip to search</a>

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

</div>

<div id =”navigation”>[set of navigation elements here]</div>

<div id =”search”>[search form here]</div>

<div id =”content”>[main content here]</div>

Skip over repeated blocks of content

The second technique uses skip links to allow the user to skip to the end of a repeated block of content. For example, a user tabs to the beginning of the navigation area and the first link is titled 'skip navigation'. When the user follows this link, they are taken to the end of the navigation area.

A document may have several skip-over links on a webpage if there are multiple blocks of repeating content such as main navigation and secondary navigation. In this case, the description of the skip-over links may be 'skip navigation links' and 'skip section links'.

Like skip-to links, skip-over links must be either visible at all times or visible when they have focus. The link must also be the last focusable control before the block of repeated content or the first link in the block.

Links that skip over repeating blocks of content are generally used less than those that skip to areas of content.

Wording of skip links

There is no standard wording when it comes to skip links. You may see skip navigation, skip main navigation or skip navigation links used on different websites, all of which are acceptable. A rule of thumb is to keep the description of the link short, consistent and to the point, ensuring that it tells the user what the link will do, or where it will take them within the webpage.

Be particularly aware that "skip navigation" will generally be taken to mean that the link skips the user past the navigation section, while "skip to navigation" will generally be taken to mean that the links skips the user past the item next to the link, to the navigation section.

Use WAI-ARIA landmark roles

Landmark roles are part of the WAI-ARIA specification. WAI-ARIA defines a way to make web content and web applications, in particular those that use scripting, more accessible to people with disabilities.

The WAI-ARIA landmark roles give assistive technology users a new way to navigate webpage content. There are eight document landmark roles that describe the purpose or type of a piece of content. These roles are:

  • banner
  • search
  • menu
  • main
  • complementary
  • content info
  • application
  • form

Each of these roles attributes can be added to a container element such as a div element or a heading. Screen reader users can then use shortcut keys to jump directly to that area within a webpage.

Why we still need skip links

Although ARIA landmarks are a vast improvement over the more rudimentary 'skip to main content' technique, as confirmed by the Web Accessibility Initiative (WAI-ARIA 1.0 Authoring Practices, W3C Working Draft 16 September 2010), we still need to include skip links within webpages.

Support for ARIA landmark roles is rapidly increasing in newer versions of screen readers. However, there are still people using older versions of screen readers or older versions of web browsers who may not be able to reliably access ARIA landmarks.

Furthermore, the need to bypass blocks of repeated content is not restricted to screen reader users. People with a physical disability who use only a keyboard or keyboard interface to access content, people using a screen magnifier and people with cognitive limitations all benefit from the ability to bypass blocks.

In short, there currently isn't enough consistent and widespread support for ARIA landmark roles in all assistive technologies and web browsers to stop using skip links just yet. A combination of skip links and ARIA landmarks will give your users more ways to easily navigate your website, and for very little implementation cost.

ARIA landmark roles

There are eight document landmark roles in the WAI-ARIA specification. Using ARIA landmarks enhances a site's usability for people with disabilities and adds functionality with a minimum of effort.

Application

The application role is applied to the entire area that contains a web application. A web application is the opposite of a web document, performing functional and transactional interactions versus delivering document content.

To use the example from the W3C’s working draft:

For example, an email application has a document and an application in it. The author would want to use typical application navigation mode to cycle through the list of emails, and much of this navigation would be defined by the application author. However, when reading an email message the content will appear in a region with a document role in order to use browsing navigation.

Along with identifying to a user that they are entering into a web application, applying the application role also tells a screen reader to switch to application browsing mode.

Banner and contentinfo

The banner property is applied to the area at the top of the page and contains site-specific, rather than page-specific, information. The banner usually spans the full width of the page and includes content such as the main heading, logo and site-specific search tool. Only one element within a webpage may be marked with the banner or contentinfo roles.

The contentinfo property is applied to the area that contains page-specific information. This information could include copyright or privacy statements, which are often found within the footer of a webpage.

This is a simple example that uses the banner and contentinfo properties to specify the purpose of the content within two div elements respectively.

<div role="banner">banner content</div>

. . . .

<div role="contentinfo">

   <div>copyright content</div>

   <div>privacy statement</div>

</div>

Navigation

The navigation role is used to identify a collection of navigation links. This role can be used multiple times in a webpage. So if there are primary and secondary navigation elements, both should be marked with the navigation role.

<h2 role="navigation">
   <ul>
      <li>Home</li>
      <li>Why</li>
      <li>Learn</li>
      <li>Create</li>
      <li>Participate</li>
      <li>Events</li>
      <li>Marketplace</li>
      <li>About</li>
   </ul>
</h2>

Form

The form role is used to identify areas on a webpage that contain form elements. It can be used multiple times on a webpage.

Main

The main role is used to identify the main content area of a webpage. If you have included a 'skip to main content' link within your website, it should take users to the start of the content area marked with this role.

Complementary

The complementary role is used to identify a section of content that is designed to complement or support the main content. This could include related links or associated content.

Search

The search role is used to identify the area that contains a tool for searching the website. The search tool will often be a form with a single text box and search button.

<div role="search">
   <label for="search">Search:</label>
   <input type="text" id="search" name="search">
</div>

Group blocks of repeated material

Using section headings to group blocks of content and convey the structure of the content is also useful for users to bypass blocks of content. Section headings can be used to indicate the start of the main content as well as the sections within the main content area. They can also be used to group together repeating blocks of content like primary or secondary navigation.

Defining the structure of web content is usually not the primary responsibility of a developer. A developer may be supplied with the website design documents, which should include the appropriate heading structure. A developer does have responsibility for ensuring that the appropriate heading markup is used when implementing the website design template.

This means using HTML elements <h1> to <h6> to correctly identify headings and not to style or format the content; headings convey semantic meaning, not appearance. Heading levels should numerically progress and not "skip" a level in the document. For example, an <h3> element must be preceded by an <h2> element in the document structure. This is explained in more detail in the topic on semantic markup for developers.