The WCAG Explained

Simplified and actionable explanations of every WCAG 2.2 criteria

Navigable

Summary:
WCAG 2.4, "Navigable," focuses on helping users find content and determine where they are within a website or application. This set of guidelines is crucial for enhancing accessibility, especially for users with visual impairments, cognitive disabilities, and those who rely on assistive technologies for navigation.

What:
This guideline covers various aspects of navigation and orientation:

  • 2.4.1 Bypass Blocks: Provide a mechanism to skip repetitive content.
  • 2.4.2 Page Titled: Ensure web pages have titles that describe the topic or purpose.
  • 2.4.3 Focus Order: Create a logical order of navigation for interactive elements.
  • 2.4.4 Link Purpose (In Context): The purpose of each link should be clear from its context.
  • 2.4.5 Multiple Ways: Offer multiple ways to find pages within a set of web pages.
  • 2.4.6 Headings and Labels: Headings and labels should describe the topic or purpose.
  • 2.4.7 Focus Visible: Ensure that keyboard focus is visible and clear.

Why:
Good navigation helps users find information efficiently and understand where they are within a website or app. It's particularly important for those who can't rely on visual cues for orientation or who need to use keyboard navigation.

Examples and Scenarios:

  1. "Skip to Content" Links: Allow users to bypass repetitive menu links.
  2. Descriptive Titles: Use clear, descriptive titles for web pages and sections.
  3. Logical Tab Order: Ensure that the tab order follows the flow of the content.
  4. Contextual Link Text: Instead of "click here," use descriptive text like "read more about accessibility."
  5. Multiple Navigation Methods: Provide a search function, sitemap, or table of contents.
  6. Clear Headings: Use headings that give an accurate description of the content.
  7. Visible Focus Indicator: When tabbing through a page, the focused element should be clearly highlighted.

How to Comply:

  • Websites: Implement skip links, meaningful titles, logical navigation order, and visible focus indicators. Ensure links and headings are contextually understandable.
  • Mobile Apps: Provide clear navigation elements, focus indicators, and multiple ways to access content.
  • Software Applications: Structure interfaces to support clear navigation, including keyboard accessibility and visible focus.

Exceptions:

  • When Not Applicable: Some of these guidelines may not apply in certain contexts where the nature of the content does not require navigation (e.g., single-page documents or a series of images).