Accessibility Do’s and Don’ts for Website Navigation

If people can’t navigate your website, they can’t use it — and you miss an opportunity to connect with your audience.

Navigation controls can present a significant barrier to people with disabilities, making it difficult for them to find and interact with the content they need. 

The Web Content Accessibility Guidelines (WCAG) includes a list of success criteria to ensure that navigation controls are operable (they don’t require interactions that a user can’t perform). These criteria are put in place to assist users with a wide variety of abilities, including individuals who use assistive technologies (AT). 

If you’re new to web accessibility, WCAG’s requirements may seem overwhelming. Fortunately, they’re based on simple principles — and by understanding a few basic concepts, you can avoid common mistakes.

Provide Unique and Descriptive Page Titles

Page titles are important for search engine optimization (SEO), but they’re not just for search engines: Appropriately titled pages can make navigation easier for people who use screen readers, those with a memory or neurocognitive disability, or who have mobility impairments. 

WCAG 2.1 Success Criterion (SC) 2.4.2, “Page Titled”, explains that when a user lands on a web page, they should easily be able to obtain information about the purpose and content of that page. 

It’s important to remember that page titles don’t necessarily appear within the content of the web page; titles are displayed at the top of the browser window. Performing a page title audit can help you find web pages with duplicate or unhelpful titles.

When auditing your content, keep these tips in mind:

• Do give each page a descriptive title that identifies the page content.
• Do provide a unique name for each page. For example: “Department of Homeland Security | News” vs. “Department of Homeland Security Page 1.”
• Do limit your titles to about 30-60 characters.
• Don’t leave any page titles blank. 
• Don’t forget to apply titles to web-delivered documents. A title like “f4338g.pdf" isn’t helpful for real users. 

Related: Why Page Titles Are Important for Web Accessibility

Provide Accurate and Descriptive Headings

WCAG 2.1 SC 2.4.6, “Headings and Labels” says that descriptive headings should allow the user to quickly identify content on the page and determine whether or not they want to interact with it. 

Technically, this criterion doesn’t require that your website uses HTML headings, but most pages should have headings to break up content (for example, we’re writing this under a heading that reads “provide accurate and descriptive headings.”) 

Without headings, people who use certain types of AT may need to read through all of the content to find what they need; if you’re writing a lot of content, that’s not a great experience.

• Do write concise, simple headings that describe the content.
• Don’t use visual-only headings (headings that are not identified via HTML). 
• Do ensure that input form fields and drop down menus are labeled properly so that users understand the purpose of the control. For more guidance, read: Why Form Labels and Instructions Are Important for Digital Accessibility
• Don’t use vague headers or labels that could confuse the user. 

Related: How Headings Help People with Disabilities Navigate a Website

Provide Helpful Context for Every Link

WCAG 2.1 SC 2.4.4, “Link Purpose (In Context)” states that users should be able to determine the purpose and destination of every link before they click on it. This should be accomplished by providing helpful context to every link. 

• Do clearly identify the information that will be displayed when a visible link is selected.
• Do ensure that clickable image icons have corresponding link text that accurately describes the link’s purpose. 
• Don’t use “read more” as link text unless the context can be easily determined by the surrounding text. 
• Don’t use vague or generic link text unless the link is designed to be ambiguous for all users. 

Allow Users to Bypass Repetitive Information

WCAG 2.1 SC 2.4.1, “Bypass Blocks” is meant to ensure users can skip blocks of repetitive content and easily navigate to the main content of a webpage. This repetitive content includes things like page headers, banners, advertising frames, etc. 

• Do add a link to bypass all repeated block content and go directly to the main page content. 
• Do group blocks of repeated content in a way that can easily be skipped. For example, by using an expandable menu or frame. 
• Do ensure that the method to bypass these content blocks are operable from a keyboard. 
• Don’t include blocks of repeated text with no mechanism for a user to skip.

Related: How “Skip Navigation” Links Benefit Accessibility

Provide at Least Two Ways to Navigate Your Website

WCAG 2.1 SC 2.4.5, “Multiple Ways” states that users should have at least two different navigation options available to search for information on a website. These options can include search fields, tables of content, navigation trees, etc. 

• Do provide a site map or table of contents.
• Do offer multiple options for users to navigate your website.
• Don’t limit users to a single mechanism to locate specific web pages. For instance, if a page is only accessible by clicking through a certain series of pages — and that page is not a part of a process, such as a checkout process on an e-commerce website — it probably needs remediation.

Regularly Test Your Website For Accessibility

Designing an accessible website is crucial for ensuring that all users can access and interact with your content. By following these guidelines for website navigation, you can create more inclusive experiences.

For more detailed guidance, send us a message to speak with an accessibility expert.