If more than one of the same HTML landmark element exists on the page, are they labelled using ARIA labels?


Ensure that two or more landmark containers of the same type are labeled.

Why this matters

If there are two of the same section on the page (say, the main navigation and a local navigation), users of assistive technology (AT) should be able to tell them apart through the use of ARIA labels. Otherwise they both read out as the same thing (“navigation”), forcing the user to navigate into the section to figure out which one they’re on, and that’s frustrating.

How to implement

See Are all elements on the page contained in semantic HTML or landmark elements? for the list of semantic containers and how to implement them.

If the container has a visible text label, use the aria-labelledby attribute to point to that label.

If the container does not have a visible text label, use the aria-label attribute to add a unique label.

How to test

Right-click various sections of the page that use the same semantic containers and ensure that they have aria-label or aria-labelledby attributes as described in How to Implement.