Multiple Navigation Landmarks Without Labels

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>