container-missing-semantics

A group of links or buttons that lets people move around the site or the page, like a main menu, a list of section links, or a set of footer links, is a navigation area. Sighted users recognize it from its layout. Screen reader users rely on the navigation landmark instead: screen readers can list a page's landmarks and jump straight to each one, and they announce where a navigation area starts and ends.

When the group is built from generic elements, such as a <div> full of links, it has no navigation semantics. Screen reader users can't reach it with landmark navigation, and they may not understand that its items belong together.

Evinced reports this issue when a container holds two or more interactive elements and appears to be a navigation group, but it isn't inside a navigation landmark, doesn't have a navigation role, and doesn't match another pattern that Evinced can test, such as an accordion or a tablist.

To fix the issue:

• If the group is site or page navigation, wrap it in a <nav> element, or an element with role="navigation". If the page has more than one navigation area, give each one a unique accessible name with aria-label or aria-labelledby.
• If the group is a different component, such as a tablist, a menu, or an accordion, apply that pattern's roles and attributes instead.

Pass Patterns

Navigation links inside a <nav> element

The <nav> element exposes the group as a navigation landmark.

<nav aria-label="Main">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

Two navigation areas, each with a unique name

Each <nav> element has its own accessible name, so screen reader users can tell the navigation areas apart in the landmarks list.

<nav aria-label="Main">
    <!-- Main menu links -->
</nav>


<nav aria-label="Footer">
    <!-- Footer links -->
</nav>

Fail Patterns

Navigation links inside a generic <div>

The group looks and works like a main menu, but the <div> gives it no navigation semantics, so it doesn't appear as a landmark.

<div class="main-menu">
    <a href="/">Home</a>
    <a href="/products">Products</a>
    <a href="/about">About</a>
</div>

WCAG techniques

Sufficient techniques

• ARIA11: Using ARIA landmarks to identify regions of a page
• H101: Using semantic HTML elements to identify regions of a page

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader.
2. Open the screen reader's list of landmarks, for example the VoiceOver rotor or the NVDA Elements List.
3. Look for the navigation group in the list.

Expected results: The group is listed as a navigation landmark. When the page has more than one, each has a unique name, for example "Main navigation" and "Footer navigation".

Actual results: The group isn't listed as a landmark, so it can't be reached from the landmarks list.

Inspecting the browser dev-tools

1. In your browser's dev tools, select the element that contains the group and open the Accessibility panel.
2. Check the role of the container and its ancestors.

Expected results: The container, or one of its ancestors, has the navigation role.

Actual results: The container and its ancestors have generic roles only.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Learn More

• HTML Landmarks
• WAI-ARIA Authoring Practices: Landmark Regions
• WAI-ARIA 1.3: navigation role
• Site Navigation UI pattern

Related Issues

• non-semantic-landmarking
• region
• landmark-unique
• suspicious-semantics