Accessibility Handbook | Web / Guidelines / Level A / Operable / Navigable

Navigable

Last modified on Fri 17 Mar 2023

Guideline 2.4 - Navigable

Provide ways to help users navigate, find content, and determine where they are.

Success criterion 2.4.1 - Bypass Blocks

Provide a way for users to bypass blocks of content repeated on multiple web pages.

This benefits:

users using screen readers, who can avoid hearing your header on every page
people using keyboard interfaces who can reach actual content with fewer keystrokes (a lot of keystrokes can take a long time and cause pain for some users)
users using screen magnifiers, who don't have to search through the same headings or blocks of information to find where the content begins
people with cognitive limitations, who may benefit when links are grouped into lists

To implement this success criterion, you can:

create links to skip blocks of repeated materials (skip links) by:
- adding a link at the top of each page that goes directly to the main content area

<!-- ... -->
<body>
 <a href="#main-content">Skip to main content</a>
 <nav id="primary">
   <ul>
     <!-- ... -->
   </ul>
 </nav>
 <main id="main-content">
   <!-- ... -->
 </main>
</body>

WordPress

A skip-link component is available in Eightshift Frontend Libs. Find the skip-link component in the Eightshift Frontend Libs GitHub repository.

adding a link at the beginning of a block of repeated content to go to the end of the block

<!-- ... -->
<body>
 <nav id="primary">
   <a href="#primary-nav-end">Skip to end of navigation</a>
   <ul>
     <!-- ... -->
   </ul>
   <a id="primary-nav-end"></a>
 </nav>
 <main id="main-content">
   <!-- ... -->
 </main>
</body>

WordPress

A skip-link component is available in Eightshift Frontend Libs. Find the skip-link component in the Eightshift Frontend Libs GitHub repository.

adding links at the top of the page to each area of the content

<!-- ... -->
<body>
 <nav id="regions">
   <ul>
     <li><a href="#regions">Regions on this page</a></li>
     <li><a href="#primary">Primary navigation</a></li>
     <li><a href="#main-content">Main content</a></li>
   </ul>
 </nav>
 <nav id="primary">
   <ul>
     <!-- ... -->
   </ul>
 </nav>
 <main id="main-content">
   <!-- ... -->
 </main>
</body>

group blocks of repeated material in a way that can be skipped using one of the following techniques:
- using ARIA landmarks to identify regions of a page
- for information on using this technique, refer to the Handbook for Info and Relationships
- providing heading elements at the beginning of each section of content (as screen readers and other assistive technologies allow for heading-based navigation)

<!-- ... -->
<body>
 <header>
   <h1>Handbook</h1>
   <nav id="primary">
     <ul>
       <!-- ... -->
     </ul>
   </nav>
 </header>
 <main id="main-content">
   <h2>Using headings at the beginning of each section of content</h2>
   <!-- ... -->
 </main>
</body>

Find out more about this success criterion

Success criterion 2.4.2 - Page Titled

Web pages have titles that describe the topic or purpose.

Simply provide a descriptive title for web pages using the title element. For single-page apps, change the title when the content changes (e.g. on different routes).

Empty titles or titles that cannot be used to distinguish pages and/or don't describe their topic or purpose (such as just the site name on all pages, default titles, etc.) are common ways to fail this success criterion.

WordPress

We suggest registering theme support for title tags using add_theme_support('title-tag'). This theme feature instructs WordPress to inject a generated page title into your theme's output. The page title output is filterable, allowing integration with other plugins such as Yoast SEO. Yoast SEO also enables you to configure the page title syntax from wp-admin.

The Eightshift Libs Media class, which can be added to your Eightshift Boilerplate project using wp boilerplate create_media, adds the title-tag theme support by default.

Find out more techniques and failures for this success criterion

Success criterion 2.4.3 - Focus Order

If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

The focus order should ensure that when users navigate through content sequentially, they encounter information in an order consistent with the meaning of the content and can be operated from the keyboard.

The focus order may not be identical to the programmatically determined reading order (see Success Criterion 1.3.2) as long as the user can still understand and operate the Web page. Since there may be several possible logical reading orders for the content, the focus order may match any of them. However, when the order of a particular presentation differs from the programmatically determined reading order, users of one of these presentations may find it difficult to understand or operate the Web page. Authors should carefully consider all these users as they design their Web pages.

There may be different orders that reflect logical relationships in the content. For example, moving through components in a table one row at a time or one column at a time both reflect the logical relationships in the content. Either order may satisfy this Success Criterion.

For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page. Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.

In short, make sure that the focus order on your page makes sense for users using keyboard interfaces.

For example:

showing a recursively expandable directory listing: users can use up/down arrow keys to move from node to node and use the right arrow key to expand a directory, at which point the down arrow moves into the newly expanded directory
when a modal trigger is activated, the focus order goes immediately from the trigger to the interactive controls in the modal, and once the modal is closed, the focus order goes to the trigger or the following focusable element on the webpage

Techniques and failures

To be in line with this success criterion, you should:

<button class="modal-trigger" aria-controls="modal1">Open a modal</button>
<div class="modal" id="modal1">Modal content</div>

Common failures include:

using tabindex to create a tab order that does not preserve meaning and operability

<form>
 <input type="text" value="firstname" tabindex="2" />
 <input type="text" value="lastname" tabindex="5" />
 <input type="number" value="age" tabindex="3" />
 <input type="text" value="address" tabindex="1" />
 <input type="text" value="zip" tabindex="4" />
 <input type="text" value="city" tabindex="6" />
</form>

using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

When the user opens the dialog or menu embedded on the page by activating a button or link, their next action will be interacting with the dialog or menu. If the focus is not set to the dialog or menu and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.

<main class="content">
 <button class="modal-trigger" aria-controls="modal1">Open a modal</button>
 <p>Terms and conditions apply. <a href="/privacy">Take a look at our privacy policy.</a></p>
</main>


<div class="modal" id="modal1">Modal content</div>

Success Criterion 2.4.4 - Link Purpose (In Context)

Users should be able to determine the purpose of each link from the text alone, or from the link text together with its programmatically determined link context.

In HTML, information that is programmatically determinable from a link in English includes text in the same paragraph, list, or table cell as the link or a table header associated with the table cell containing the link.

Exceptions apply where the purpose of the link would be ambiguous to users in general - that is, the link’s purpose is equally confusing to everyone, regardless of disability.

Examples of this would include:

an implementation of a simulated Monty Hall problem/game might only have links to "door 1", "door 2", and "door 3";
linking particular words to other pages or content, such as "River Thames is a river that flows through southern England", where the purpose of the links "river" and "southern England" may be confusing to all users:
- for instance, "river" could link to a definition of the word river, an article about rivers, or a list of rivers, while "southern England" might link to a map of the south of England, an article about it, or even plane tickets to Heathrow.

We suggest following the more strict Level AAA Success Criterion 2.4.9 - Link Purpose (Link Only), which mandates that users should be able to determine the link purpose from the link itself, disregarding the surrounding context.

To meet this success criterion, you can use one or more of the following techniques:

provide link text that describes the purpose of a link

<!-- good -->
<a href="/privacy">View our privacy policy</a>
<a href="/privacy">"<i class="icon-privacy"></i> Privacy policy</a>
<a href="/route/car"><img src="icons/car.svg" alt="Get driving instructions to this location" /></a>


<!-- frowned upon -->
<a href="/privacy">Click here</a> to read our privacy policy


<!-- bad :( -->
<a href="/privacy"><i class="icon-privacy"></i></a>

provide a control near the beginning of a web page that changes the link text

You can allow users to change links like these:

<h2>Download the user manual</h2>
<ul>
 <li><a href="manual.docx">Word</a></li>
 <li><a href="manual.pdf">PDF</a></li>
</ul>

to these:

<h2>Download the user manual</h2>
<ul>
 <li><a href="manual.docx">User manual (Word)</a></li>
 <li><a href="manual.pdf">User manual (PDF)</a></li>
</ul>

You can do this by providing an alternative conforming version or using Javascript to provide additional context.

identify the purpose of a link using the link text combined with the text of the enclosing sentence, list item, or paragraph

This is frowned upon as it's not Level AAA compliant, but an example of this would be:

<a href="/privacy">Click here</a> to read our privacy policy

identify the purpose of a link in an HTML table using the link text combined with its enclosing table cell and associated table header cells
identify the purpose of a link in a nested list using the link text combined with the parent list item under which the list is nested

Example from Understanding WCAG:

<ul>
 <li>
   Annual Report 2005-2006
   <ul>
     <li><a href="annrep0506.html">(HTML)</a></li>
     <li><a href="annrep0506.pdf">(PDF)</a></li>
     <li><a href="annrep0506.rtf">(RTF)</a></li>
   </ul>
 </li>
 <li>
   Annual Report 2006-2007
   <ul>
     <li><a href="annrep0607.html">(HTML)</a></li>
     <li><a href="annrep0607.pdf">(PDF)</a></li>
     <li><a href="annrep0607.rtf">(RTF)</a></li>
   </ul>
 </li>
</ul>

provide aria-label or aria-lablledby attributes for links

<div class="post">
 <h2>Presenting our new Accessibility Handbook</h2>
 <p>We're working on a new Handbook. And it's regarding accessibility.</p>
 <a
   href="/blog/a11y-handbook"
   aria-label="Read more from the article Presenting our new Accessibility Handbook"
   >Read more &rarr;</a
 >
</div>

combining adjacent image and text links for the same resource

<!-- bad -->
<a href="/search"><img src="search.svg" /></a> <a href="/search">Search</a>


<!-- better -->
<a href="/search"><img src="search.svg" alt="" /> Search</a>

making sure images and icons have alt text

<a href="/search"><img src="search.svg" alt="Search" /></a>

Find out more techniques and failures for this Success Criterion