Bypassing blocks of content: accessibility for designers

  • Author: Access iQ ®
  • Date: 4 Mar 2015
  • Access: Premium

Quick facts

An easy feature to add to a website to make it accessible is helping users to bypass or skip over repeated blocks of content.

  • Allow the user to bypass repeated blocks of content using skip links, WAI-ARIA landmark roles and headings.
  • Include skip links within your visual design and decide whether skip links will be visible all the time or only visible when the skip link receives focus.
  • Mark regions within your website design using WAI-ARIA landmark roles
  • Group related content together into sections and give meaningful headings to sections of content.

Best practice for bypassing blocks:

  • Allow users to skip blocks of content by adding a link or links to either:
    • Skip to content areas within a webpage; or
    • Skip over repeated blocks of content.
  • Use only an appropriate amount of 'skip to' and 'skip over' links to avoid complexity
  • Mark key regions of content with WAI-ARIA landmark roles.
  • Group sections of related content together using headings that describe the content.

Skip links

For links that skip to content areas within a webpage:

  • Include skip links within your visual design, ensuring they meet colour contrast requirements and link style and focus requirements.
  • Ensure that skip links are visible when they receive keyboard focus, or visible at all times.
  • Ensure that the description of the link describes where the link will take the user on the webpage.
  • Mark on the designs where skip links should take the user.

For links that skip to content:

  • Ensure that skip-to links are the first element that receives focus on the webpage.
  • For links that skip over repeated blocks of content:
  • The link is the last focusable control before the block of repeated content or the first link in the block.
  • The description of the link tells the user that it skips the block.
  • The link is either always visible or visible when it has keyboard focus.
  • The link takes the user to the content that is immediately after the block.

WAI-ARIA landmark roles

  • Mark sections of content within your visual designs using WAI-ARIA landmark roles.
  • Links that skip to main content should take the user to the start of the section marked with the main landmark role.
  • Links that skip navigation should skip over the section of content that is marked with the navigation landmark role.

An easy feature to add to a website to make it accessible enables users to bypass or skip over repeated blocks of content.

Success Criterion 2.4.1: Bypassing blocks requires you to provide a way for users to jump past content that repeats across multiple webpages within a website. Examples of repeated blocks of content include the banner at the top of a webpage, navigation links and advertisements.

Think about how a sighted user moves their visual focus to the area. They are able to skip past any repeated content, moving their visual focus directly to the area of interest, which is generally the main content area. However, not all users are able to shift focus to the main content areas so easily.

A screen reader user hears a webpage read out to them from top to bottom. For a webpage that follows a standard three column layout as shown in Example 1, a screen reader user will hear content in the following order:

  • Content in the header including logo and search box and primary navigation underneath the header
  • Secondary navigation in the left panel
  • Main content in the middle panel
  • Supplementary content (complementary) in the right column
  • Content in the footer along the bottom of the page.

Example 1

Reading order for a standard three column webpage.

Without a way to skip repeated blocks of content, such as the content within the banner and navigation, a user will be forced to listen to the same repeated content on each webpage within a website. Success Criterion 2.4.1 is one of the great equalisers, ensuring that there is a way for users with a disability to shift their focus to the main content area in the same way that a sighted person does.

There are three methods for bypassing repeated materials:

  • Create links to skip blocks of repeated material, commonly referred to as ‘skip links.’
  • Group blocks of repeated material together and use headings to label each section of content.
  • Use WAI-ARIA landmark roles to describe the purpose of content areas.

Used together, these methods provide the best experience for the user.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let's put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you'll know you're covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: