Multi-Navigation Landmark Site

Failure F25: Multiple <nav> Elements Without aria-label

This page has two navigation bars (primary and secondary, see above) with no distinguishing labels.

Issue: Screen readers announce both as "navigation" (generic). Users can't tell which nav is for main site structure vs. content categories. Tab through both confusing.

Better: Add aria-label to each nav:

<nav aria-label="Main">...</nav>
<nav aria-label="Content Categories">...</nav>
Failure F25: Multiple Footer Navigation Without Identification

Many sites have footer sections with multiple navigation lists:

Issue: Three <nav> sections but only headings differentiate them. Screen readers see three "navigation" regions with no clear purpose. Users must explore to understand which is which.

Failure F25: Same Links in Multiple Places (Confusing Repetition)

This page structure has:

  • Primary top navigation (Home, Products, Services, About, Contact)
  • Secondary navigation (What's New, Popular, Trending, Search)
  • Sidebar search (aside at right)
  • Footer with Support, Company, Legal navs

Issue: Screen reader users must tab through 4+ navigation regions to find content. No skip link. No way to distinguish main nav from secondary nav from footer. Exhausting to navigate.

Better Approach (For Reference)

Label each navigation uniquely:

<nav aria-label="Primary">...</nav>
<nav aria-label="Content filters">...</nav>
<aside aria-label="Sidebar search">...</aside>

Include a skip link (ALWAYS):

<a href="#main-content" class="skip-link">Skip to main content</a>
HAL Fixes: HAL detects multiple <nav> and <aside> elements and adds unique aria-label if missing. HAL recommends adding a skip link to bypass all navigation blocks. HAL groups related navigation items together and provides context for each navigation region.