WCAG Master Guide: WCAG Navigable Requirements

The user experience is an integral part of the web development process. However, it’s still possible that some disabled users may have difficulties finding the content they need and keeping track of where they are on your site. 

For this reason, Navigable requirements are a key part of the Website Content Accessibility Guidelines (WCAG) and should be considered when developing or remediating your website. 

Understanding WCAG Navigable Requirements

The Navigable guidelines intend to ensure disabled users know where they are on your site and have the option to go somewhere else, which allows them to find the content they need. 

The fact that many users rely on screen readers and keyboards to navigate a website is an important consideration. To make navigation easier, details on possible link destinations need to be readily available. 

Navigation bars and page headers should also be clear and easy to find, and unusual interface features should be avoided to prevent confusion. 

WCAG Navigable Success Criteria

Here are the Navigable success criteria you would need to meet in order to achieve Level A or higher.

Bypass Blocks

If multiple pages on a website contain duplicate blocks of content, users should have the option to bypass them. This offers more direct access to the primary content on a page and allows users to skip repeated content. Examples of repeated content blocks include navigation links, heading graphics, and advertising blocks. 

Page Titled

All pages on a website should have a title that describes its topic or purpose. When pages have a title, a user can identify whether it’s the content they’re looking for more easily. In the case of web applications and documents, the name of the application or document is sufficient. 

Focus Order

When a user navigates through content sequentially, the information should be presented in an order that’s consistent with the content’s meaning. Users should also be able to navigate the content using a keyboard alone. 

Focusable components on a page need to receive focus in a logical and meaningful order and should appear on screen as it is meant to be read. Focus order should also make sense to both disabled and non-disabled users. 

For example, a user who relies on a screen reader will interact with a page’s reading order programmatically, while a sighted user will interact with it visually. 

Link Purpose

A user should be able to determine the purpose of a link from the link text alone or through programmatically-determined link content. This means that the purpose of a link can be determined based on the text or elements surrounding it.

Multiple Ways

Website visitors should have more than one way to navigate a site and find the information they need. For example, while one user may find a hierarchical menu easy to use, another visitor may prefer to search for the page they want or have access to a sitemap to get an overview of a website.

Headings and Labels

Headings and labels should be used to describe the topic or purpose of a page. When headings are clear and descriptive, a user will immediately know whether this is the content they need. It will also help them understand the relationships between different sections more easily.

Focus Visible

Users who rely on keyboard navigation should always know which element on a site has the keyboard focus. Any interface that is keyboard-operable should offer a mode of operation that makes the keyboard focus visible. 

Location

Website owners need to provide users with a way to orient themselves at any time during the browsing process. Information about a user’s location within a set of web pages should always be available. 

Navigable Best Practices

To achieve WCAG Level AA, which is what most businesses should be aiming for, here are some best practices you can apply in terms of Navigable requirements: 

Keep navigation simple and clear. Your site’s navigation should never be complicated. Simplify it wherever possible to ensure users can find what they need more quickly. You should also consider adding a search bar to your site as well as a link to your sitemap in your footer.

Pay attention to anchor text. When adding links within content, think twice about the words you are linking. The more context you can give users about where a link will take them, the better.

Give your headers some thought. It’s fine to get creative with your content headers but they should still provide users with a clear idea of your content’s purpose and how different sections are linked.

Make use of breadcrumbs. For users with short attention spans, it helps to implement breadcrumbs on your site. This will highlight their location on your site without them having to backtrack. 

Frequently Asked Questions