2. Operable

2.4 Navigable (Level AA and AAA)

Success Criterion 2.4.5 Multiple Ways

Level AA

More than one way is available to locate a web page within a set of web pages, except where the web page is the result of, or a step in, a process.

Multiple Ways Explained

Different people use different ways to focus in on particular content on a website: some prefer site maps; others like navigation links or breadcrumbs; still, others rely on site searches.

Make it possible for visitors to your site to find content in at least two ways. Choose from among these techniques:

  • A site map
  • A site search
  • A table of contents
  • Links on the homepage to all pages on the site
  • Links to all other pages on the site
  • Links to navigate to related web pages

An exception applies when content is not “findable.” A banking website, for example, lets customers transfer funds between accounts. The page that confirms the transfer is exempt because the page does not exist until the customer completes the transfer. WCAG 2.1 acknowledges that pages that are “the result of, or a step in, a process” do not need to conform to SC 2.4.5.

Suggested Reading:

Success Criterion 2.4.6 Headings and Labels

Level AA

Headings and labels describe topic or purpose.

Headings and Labels Explained

When headings and labels are clear and descriptive, they help users understand what information is contained in web pages and how that information is organized. Much like meaningful link text describes the destination of a link, meaningful headings describe a section or paragraph that follows, and meaningful labels describe the purpose or function of a form field.

Examples of clear and descriptive headings: A website for a newspaper lists today’s headlines. Each headline is a heading. After each headline is the article. Each headline gives a clear idea of the article’s subject:

  • Housing Prices Plunge 5% Since August
  • Rebel Planes Attack Capital
  • UFO Sightings Soar

Examples of clear and descriptive labels: A form consists of three input fields. The label for the first field is First name. The label for the second field is Last name. The label for the third field is Email address.

Key Point: SC 2.4.6 only requires that headings and labels be meaningful when they are used. It does not require that actual HTML-defined headings (i.e., <h1>) or labels (i.e., ) be used. The use of proper HTML headings and labels is covered by SC 1.3.1 Info and Relationships.

Suggested Reading:

Success Criterion 2.4.7 Focus Visible

Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Focus Visible Explained

Keyboard focus is the one point within a window that receives information from the keyboard. Only one component can have focus at a time. When keyboard-only users press keystrokes, typically the Tab key, to navigate around a web page, they are moving focus from one component to another.

Whether it’s people with low vision who rely on a keyboard to interact with web pages or power users who use a keyboard to navigate more efficiently, each must know which component has focus. By complying with SC 2.4.7, keyboard users can tell at a glance exactly what they are interacting with on a web page.

By default, browsers display focus indicators when navigating by keyboard. If they are not present, they have been purposely removed. For the most part, these indicators appear as faint rectangles that surround the focused component. In text fields, the focus indicator is usually a flashing cursor. Web authors who use CSS and JavaScript can enhance the appearance of focused components or make them invisible or hard to see. Authors often remove the focus visibility for aesthetic reasons, though that practice violates this success criteria. WCAG 2.1 requires web authors to ensure that all focused components are easy to spot when navigating by keyboard.

While the default focus indicator is sufficient to pass the requirements of this success criteria, they can still be difficult to see, even for those with relatively good sight. It is generally recommended that website developers enhance the default focus indicator to make it easier for everyone to see.

Try This: Focus Indicators

To see what focus looks like, open the Accessibility Auditing Showcase website linked here, then press the Tab key repeatedly to navigate through the page (put your mouse away). You do not need to use ChromeVox for this activity. Answer the following questions.

  1. Are you able to follow the focus easily as it moves through the page?
  2. Turn away, press the Tab key a few times, then look back. Can you tell where the focus ended up?
  3. Do all elements that receive focus have a focus indicator?

Next, try the activity on a site that does not provide focus highlighting:

Praxar

Now, go to a few of the sites you are familiar with, and find a couple with good focus indicators (default focus is okay), and find a couple where the focus indicator is missing or partially missing (e.g., missing from links but present for form elements).

Suggested Reading:

Success Criterion 2.4.8 Location

Level AAA

Information about the user’s location within a set of web pages is available.

Location Explained

When a website or a web application consists of dozens, hundreds, or thousands of pages, it can be easy to become disoriented and tricky to find related information. To help visitors orient themselves, include information about the current location in relation to the whole. This can be done, for example, by:

  1. highlighting the current page within a set of navigation links,
  2. providing a breadcrumb trail, or
  3. describing the relationship of a page to a larger collection of pages.

This requirement may also be met by including a sitemap. Although this involves navigating away from the current page, a site map is a good way to show how information on one page (or in one part of the site) relates to the whole.

Suggested Reading:

Success Criterion 2.4.9 Link Purpose (Link Only)

Level AAA

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Link Purpose (Link Only) Explained

Help visitors understand the purpose of each link. This is a more stringent version of SC 2.4.4, which requires that links make sense on their own, without the benefit of surrounding context to add meaning. This benefits screen reader users who use a feature to extract all links from a page and sort them as an alphabetical list. When each link is unambiguous, individuals who rely on this technique can confidently decide whether they want to follow a link. They may otherwise hear a list of meaningless “Click Here” links.

Some visitors may find pages that consist entirely of unambiguous links easier to access, while others may find them harder to access. The word “mechanism” gives web authors the option to make all links understandable out of context or to provide a way to make them this way. Providing this option gives all visitors the ability to customize the “wordiness” of links to match their needs.

There is an exception to SC 2.4.9 when the purpose of a link cannot be determined from information that appears anywhere on the web page. In this case, a person with the disability is not disadvantaged, as the context is not available to anyone.

Suggested Reading:

Success Criterion 2.4.10 Section Headings

Level AAA

Section headings are used to organize the content.

Section Headings Explained

Whenever possible, divide pages into sections and begin each section with the heading that reflects the place of the section within the whole.

For example, a long document may be divided into chapters, chapters into topics, topics into subtopics, and subtopics into paragraphs. Headings are designed to organize content hierarchically; they are the scaffolding that give shape to documents.

For HTML documents, use these elements to organize content hierarchically:

  • <h1> for the highest level of page organization,
  • <h2> for the second level,
  • <h3> for the third level,
  • and so on.

For Word documents, use these styles to organize content hierarchically:

  • Heading 1 for the highest level of page organization,
  • Heading 2 for the second level,
  • Heading 3 for the third level,
  • and so on.

Section headings clarify the organization of the content, facilitate navigation, and aid comprehension. Other page elements, such as horizontal rules and boxes, enhance the visual presentation but are not sufficient in themselves to identify document sections.

This provision is included at Level AAA because headings may be impractical or unsuitable. For example:

  • Headings are inappropriate for historical documents that do not have headings. However, if the original document has a title, mark it up as <h1>.
  • Headings are not normally used in letters, even when letters cover a range of topics.
  • Some electronic file formats, such as plain text, have no built-in support for hierarchically structured documents.

Also, see SC 1.3.1 Info and Relationships (Level A). While SC 2.4.10 (Level AAA) suggests using headings to section content by topic and subtopic within written content (as opposed to interface elements), SC 1.3.1 provides guidance on organizing that content semantically so the relationships between topics and subtopics can be understood. Content that complies with SC 1.3.1, also complies with SC 2.4.10, though not necessarily vice versa.

Suggested Reading:

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Introduction to Web Accessibility by Ryerson University, The Chang School is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book