2.4 Navigable (Level AA and AAA)

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.

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.

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.

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.

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.

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.