Making Navigation Accessible: Menus, Headings, and ARIA Landmarks

[wcgadmfrm]

Making Navigation Accessible: Menus, Headings, and ARIA Landmarks

Hi everyone!

Today we're focusing on how users move and orient themselves on our website: navigation. A well-designed and accessible navigation system is fundamental for everyone, especially for people using screen readers or keyboard navigation. This topic explores key WCAG criteria related to menus, headings, and the use of ARIA landmarks.

Why is Navigation Accessibility Crucial?

Inaccessible navigation can lead to:

• Disorientation: Users don't know where they are or how to reach their desired destination.
• Frustration and Abandonment: Difficulty finding information leads to a negative user experience.
• Excessive Effort: Requires too much time and too many steps to reach content.

Key WCAG Criteria and Best Practices:

1. 2.4.1 Bypass Blocks (Level A) - Skip Links:

• Concept: Provide a mechanism to bypass blocks of repeated content (like navigation headers) and go directly to the main content.
• Implementation: Typically a visually hidden but keyboard-accessible "skip link" that becomes visible on focus.

  Code: Select all

  <a href="#maincontent" class="skip-link">Skip to main content</a>

2. 2.4.6 Headings and Labels (Level AA) - Headings:

• Concept: Use headings (<h1> to <h6>) to organize content structure logically and hierarchically. Do not use them solely for font size.
• Why: Screen reader users rely on headings to quickly scan the page and jump to specific sections. A disordered structure is confusing.

  Code: Select all

  <h1>Main Page Title</h1>
  <h2>Section 1</h2>
  <h3>Sub-section A</h3>
  <h2>Section 2</h2>

3. 1.3.1 Info and Relationships (Level A) & 2.4.1 Bypass Blocks - ARIA Landmarks:

• Concept: Use ARIA landmarks (e.g., role="navigation", role="main", role="contentinfo", role="banner", role="search") to define the main structural regions of the page.
• Why: Screen readers allow users to jump between these significant regions (e.g., "go to main content," "go to navigation"). HTML5 also offers native semantic elements like <nav>, <main>, <footer>, <header>, <aside>, <form> which have implicit landmark roles. Prefer HTML5 elements when possible.

  Code: Select all

  <nav role="navigation">...menu...</nav>
  <main role="main">...main content...</main>
  <footer>...footer...</footer>

4. 2.1.1 Keyboard (Level A) - Keyboard Accessibility of Menus:

• Concept: Ensure that all menus, especially dropdown or fly-out menus, are fully navigable and operable using only the keyboard (Tab, Enter, Space, Arrow keys).
• Visible Focus: Guarantee there is always a clear focus indicator.
• No Traps: Never trap the user within the menu.

Additional Tips:

• Consistency: Navigation should be consistent throughout the entire site.
• Link Text Clarity: Link texts must be clear and descriptive even out of context.
• Site Maps and Search: Offering a clear site map and an effective search function can complement and support primary navigation.

Let's Discuss:

What challenges do you most often encounter when designing or implementing accessible navigation? Do you prefer using ARIA landmarks or HTML5 semantic elements? Do you have examples of sites with particularly well-executed navigation?

Warm regards,

Michele (wcgadmfrm)
WCAG Plus Forum Team