2.4.1 Bypass Blocks

Web Content Accessibility Guidelines (WCAG) 2.0 SC 2.4.1 says

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Why should some blocks of content bypassed

Repeated Content

In order to provide a consistent experience for the users some portions of the web pages are made similar within a set of pages. For example, The logo of the organization is repeated across the website in a same place. The navigational links are available in a constant place across the website.

WCAG 2.0 3.2.3 Consistent Navigation also says

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Quick navigation

In lengthy web pages users like to skim the content instead of reading the entire content. While finding the required content in the page user should be able to bypass blocks of content quickly. For example in Web Content Accessibility Guidelines (WCAG) 2.0 (External website) users should spend a lot of time to find success criteria 2.4.1 if the page is not well structured.

For the above reasons a screen reader user should read all the elements such as “logo of the website”, all the navigation links, search functionalities if available and come to the required content. A keyboard only user should tab through all the navigational links, search functionality and come up to the required content area. Users of screen magnifier face difficulty in finding the main content while spending more time in navigating the repeated portions of the web page.

How to bypass the blocks

Skip Links

An old but a very useful technique to bypass blocks of repeated content in any web page is Skip link. Some developers call it as “Skip to main content”, “Skip navigation”, “Jump to main Content” “Jump to content” etc but the task of this link is to take the user directly to the main content skipping the entire navigational portion of the web page. In some lengthy pages this links are also provided as secondary navigation to take the user to a particular portion. Some developers provide a link “Back to top” to navigate to the top of the web page. A “back to top” link is useful for a keyboard only user in a lengthy page. A screen reader user can hit “Control + home”(on windows operating system with JAWS and NVDA) to jump directly to the top of the page.

How to implement skip links

HTML Code

<p><a href=”#contentstart” id=”skiplink”>Skip to Content</a></p>

Copy the above code at the top of the page, probably after the body tag or as first link of the page.

<p><a id=”contentstart” tabindex=”-1″></a></p>

Copy the above line of code at the start of the main content i.e. at the target of the skip link.

Javascript code

<script type=”text/javascript”>
//<![CDATA[
var is_webkit = navigator.userAgent.toLowerCase().indexOf(‘webkit’) > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf(‘opera’) > -1;
if(is_webkit || is_opera)
{
var target = document.getElementById(‘contentstart’);
target.href=”#contentstart”;
target.innerText=”Start of Content”;
target.setAttribute(“tabindex” , “0”);
document.getElementById(‘skiplink’).setAttribute(“onclick” , “document.getElementById(‘contentstart’).focus();”);
}
//]]>
</script>

The above code may result in displaying a link “Start of main content” on the page. Use CSS screen off methods to hide them from the screen. Also the content “Start of main content” is announced by the screen readers on Chrome and Safari browsers.

Hierarchical Heading structure

A well structured web page will help the users of screen readers, screen magnifiers find the required content quickly. Users will jump from one block to another using the screen reader specific short-cut. Use of level one heading helps the screen reader users to jump directly to the main content area of the page. From there users will skim the content with screen reader specific short-cut keys. People with low vision can identify the headings because of the difference in font size and font style.

Land Marks

Another new but promising technique to navigate from one block to another block of the page is land marks. Accessible Rich Internet Applications (ARIA) by W3C has come up with land marks such as “main”, navigation”, contentinfo” etc. Desktop screen readers such as JAWS and NVDA, mobile screen readers such as VoiceOver on IOS, Talkback on Android has good support. For more information on these screen readers on various browsers have a look at ARIA Landmarks by Maxability.

Best Technique for Bypass blocks

All the above three techniques are good and often used by users of assistive technologies. The recent screen reader survey #4 by Web AIM also confirmed that various users follow various techniques while navigating the web page. Using all the three techniques on a web page might help in providing the ultimate experience for every web user.