CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title> Understanding Success Criterion 2.4.1 | Understanding WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" /><link media="print" type="text/css" rel="stylesheet" href="print.css"/><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE" /><link rel="stylesheet" type="text/css" href="slicenav.css"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body class="slices toc-inline"><div id="masthead"><p class="logo"><a href="https://www.w3.org/"><img width="72" height="48" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"/></a></p><p class="collectiontitle"><a href="Overview.html">Understanding WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><div class="mainbody"><a name="top"> </a><ul id="navigation"><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding Guideline 2.4 [Navigable]" href="navigation-mechanisms.html"><strong>Previous: </strong>Guideline 2.4 [Navigable]</a></li><li><a title="Understanding SC 2.4.2 [Page Titled]" href="navigation-mechanisms-title.html"><strong>Next: </strong>SC 2.4.2 [Page Titled]</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#navigation-mechanisms-skip-intent-head">Intent</a></li><li><a href="#navigation-mechanisms-skip-examples-head">Examples</a></li><li><a href="#navigation-mechanisms-skip-resources-head">Related Resources</a></li><li><a href="#navigation-mechanisms-skip-techniques-head">Techniques & Failures</a></li><li><a href="#key-terms">Key terms</a></li></ul></div> <div class="skiptarget"><a id="maincontent">-</a></div><h1><a name="navigation-mechanisms-skip" id="navigation-mechanisms-skip"> </a><strong>Bypass Blocks</strong><span class="screenreader">:</span><br/>Understanding <abbr title="Success Criterion">SC</abbr> 2.4.1</h1><blockquote class="scquote"><div> <p class="sctxt"><strong class="sc-handle"><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-skip">2.4.1</a> Bypass Blocks:</strong> A <a href="#mechanismdef" class="termref">mechanism</a> is available to bypass blocks of content that are repeated on multiple <a href="#webpagedef" class="termref">Web pages</a>. (Level A) </p></div></blockquote><div class="intent"><h2 id="navigation-mechanisms-skip-intent-head" class="section"> Intent of this Success Criterion </h2><p>The intent of this Success Criterion is to allow people who navigate sequentially through content more direct access to the primary content of the Web page. Web pages and applications often have content that appears on other pages or screens. Examples of repeated blocks of content include but are not limited to navigation links, heading graphics, and advertising frames. Small repeated sections such as individual words, phrases or single links are not considered blocks for the purposes of this provision. </p><p>This is in contrast to a sighted user's ability to ignore the repeated material either by focusing on the center of the screen (where main content usually appears) or a mouse user's ability to select a link with a single mouse click rather than encountering every link or form control that comes before the item they want.</p><p>It is not the intent of this Success Criterion to require authors to provide methods that are redundant to functionality provided by the user agent. Most web browsers provide keyboard shortcuts to move the user focus to the top of the page, so if a set of navigation links is provided at the bottom of a web page providing a "skip" link may be unnecessary.</p><div class="note"><p class="prefix"><em>Note: </em>Although this Success Criterion deals with blocks of content that are repeated on multiple pages, we also strongly promote structural markup on individual pages as per Success Criteria 1.3.1. </p></div><p>Although the success criterion does not specifically use the term “within a set of web pages”, the concept of the pages belonging to a set is implied. An author would not be expected to avoid any possible duplication of content in any two pages that are not in some way related to each other; that are not "Web pages that share a common purpose and that are created by the same author, group or organization” (the definition of set of web pages).</p><div class="note"><p class="prefix"><em>Note: </em>Even for web pages that are not in a set, if a web page has blocks of text that are repeated within the page it may be helpful (but not required) to provide a means to skip over them.</p></div><div class="benefits"><h3 id="navigation-mechanisms-skip-142-head" class="div3head"> Specific Benefits of Success Criterion 2.4.1: </h3><ul><li><p>When this Success Criterion is not satisfied, it may be difficult for people with some disabilities to reach the main content of a Web page quickly and easily.</p></li><li><p>Screen reader users who visit several pages on the same site can avoid having to hear all heading graphics and dozens of navigation links on every page before the main content is spoken.</p></li><li><p>People who use only the keyboard or a keyboard interface can reach content with fewer keystrokes. Otherwise, they might have to make dozens of keystrokes before reaching a link in the main content area. This can take a long time and may cause severe physical pain for some users. </p></li><li><p>People who use screen magnifiers do not have to search through the same headings or other blocks of information to find where the content begins each time they enter a new page.</p></li><li><p>People with cognitive limitations as well as people who use screen readers may benefit when links are grouped into lists</p></li></ul></div></div><div class="div3"><h2 id="navigation-mechanisms-skip-examples-head" class="section"> Examples of Success Criterion 2.4.1</h2><ul><li><p>A news organization's home page contains a main story in the middle of the page, surrounded by many blocks and sidebars for advertising, searching, and other services. There is a link at the top of the page that jumps to the main story. Without using this link, a keyboard user needs to tab through approximately 40 links to reach the main story; the screen reader user has to listen to 200 words; and the screen magnifier user must search around for the location of the main body.</p></li></ul></div><div class="resources"><h2 id="navigation-mechanisms-skip-resources-head" class="section"> Related Resources </h2><p>Resources are for information purposes only, no endorsement implied.</p><ul><li><p> <a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</a> </p></li><li><p> <a href="http://accessibility.psu.edu/headingshtml/">Heading Tags</a> </p></li></ul></div><div class="div3"><h2 id="navigation-mechanisms-skip-techniques-head" class="section"> Techniques and Failures for Success Criterion 2.4.1 - Bypass Blocks</h2><p>Each numbered item in this section represents a technique or combination of techniques that the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p><div class="boxed"><h3 id="navigation-mechanisms-skip-143-head" class="div3head"> Sufficient Techniques </h3><ol class="enumar"><li><p>Creating links to skip blocks of repeated material using one of the following techniques:</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G1" class="tech-ref">G1: Adding a link at the top of each page that goes directly to the main content area</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G123" class="tech-ref">G123: Adding a link at the beginning of a block of repeated content to go to the end of the block</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G124" class="tech-ref">G124: Adding links at the top of the page to each area of the content</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SL25" class="tech-ref">SL25: Using Controls and Programmatic Focus to Bypass Blocks of Content in Silverlight</a> (Silverlight) </p></li></ul></li><li><p>Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA11" class="tech-ref">ARIA11: Using ARIA landmarks to identify regions of a page</a> (ARIA) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H69" class="tech-ref">H69: Providing heading elements at the beginning of each section of content</a> (HTML) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/PDF9" class="tech-ref">PDF9: Providing headings by marking content with heading tags in PDF documents</a> (PDF) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H70" class="tech-ref">H70: Using frame elements to group blocks of repeated material</a> (HTML) <strong>AND</strong> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H64" class="tech-ref">H64: Using the title attribute of the frame and iframe elements</a> (HTML) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SCR28" class="tech-ref">SCR28: Using an expandable and collapsible menu to bypass block of content</a> (Scripting) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SL29" class="tech-ref">SL29: Using Silverlight "List" Controls to Define Blocks that can be Bypassed</a> (Silverlight) </p></li></ul></li></ol></div><div class="boxed"><h3 id="navigation-mechanisms-skip-144-head" class="div3head"> Additional Techniques (Advisory) for 2.4.1</h3><p>Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p><ul><li><p> Providing keyboard access to important links and form controls (future link) </p></li><li><p> Providing skip links to enhance page navigation (future link) </p></li><li><p> Providing access keys (future link) </p></li><li><p>Using accessibility supported technologies which allow structured navigation by user agents and assistive technologies (future link) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C6" class="tech-ref">C6: Positioning content based on structural markup</a> (CSS) </p></li></ul></div><div class="boxed"><h3 id="navigation-mechanisms-skip-145-head" class="div3head"> Common Failures for <abbr title="Success Criterion">SC</abbr> 2.4.1</h3><p>The following are common mistakes that are considered failures of Success Criterion 2.4.1 by the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group.</p><p>(No failures currently documented)</p></div></div><div class="div3"><h2 id="key-terms" class="terms">Key Terms</h2><dl class="keyterms"><dt class="label"><a name="webpagedef" id="webpagedef"> </a>Web page</dt><dd><p> a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#useragentdef" class="termref">user agent</a> </p><div class="note"><p class="prefix"><em>Note 1: </em>Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.</p><p class="prefix"><em>Note 2: </em>For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a Web page.</p></div><div class="example"><p class="prefix"><em>Example 1: </em>A Web resource including all embedded images and media.</p><p class="prefix"><em>Example 2: </em>A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program lives entirely at http://example.com/mail, but includes an inbox, a contacts area and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar to display, but do not change the URI of the page as a whole.</p><p class="prefix"><em>Example 3: </em>A customizable portal site, where users can choose content to display from a set of different content modules.</p><p class="prefix"><em>Example 4: </em>When you enter "http://shopping.example.com/" in your browser, you enter a movie-like interactive shopping environment where you visually move around in a store dragging products off of the shelves around you and into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside. This might be a single-page Web site or just one page within a Web site.</p></div></dd><dt class="label"><a name="mechanismdef" id="mechanismdef"> </a>mechanism</dt><dd><p> <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#processdef" class="termref">process</a> or technique for achieving a result</p><div class="note"><p class="prefix"><em>Note 1: </em>The mechanism may be explicitly provided in the content, or may be <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#reliedupondef" class="termref">relied upon</a> to be provided by either the platform or by <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#useragentdef" class="termref">user agents</a>, including <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#atdef" class="termref">assistive technologies</a>.</p><p class="prefix"><em>Note 2: </em>The mechanism needs to meet all success criteria for the conformance level claimed. </p></div></dd></dl></div><ul id="navigationbottom"><li><strong><a href="#top">Top</a></strong></li><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding Guideline 2.4 [Navigable]" href="navigation-mechanisms.html"><strong>Previous: </strong>Guideline 2.4 [Navigable]</a></li><li><a title="Understanding SC 2.4.2 [Page Titled]" href="navigation-mechanisms-title.html"><strong>Next: </strong>SC 2.4.2 [Page Titled]</a></li></ul></div><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Understanding WCAG 2.0: A guide to understanding and implementing WCAG 2.0</a> (see the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">latest version of this document</a>). The entire document is also available as a <a href="complete.html">single HTML file</a>. See the <a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the <a href="https://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</a>. </p><p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p></div></body></html>