Banner landmark should not be contained in another landmark
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
Standard(s)
- Deque Best Practice
How to Fix the Problem
Ensure each banner landmark is not contained in another landmark.
For each element on the page that uses the role="banner" ARIA
landmark, ensure that it is not contained within another ARIA landmark, even
though HTML5 allows multiple instances of the equivalent
<header> landmark. It is appropriate in most web designs to
have only one each of these landmarks, whether they are specified using ARIA
or HTML5, and further, that they are not nested within one or more other
landmarks.
Why it Matters
If the banner landmark is not the top-level landmark (and is contained within another landmark), it does not effectively designate the pre-defined header portion of the layout in the design and therefore prevents screen reader users from being able to easily find their way around the layout.
Note
Landmarks are used to designate sections of the overall page design and layout. Headings are used to designate sections within the content.
Rule Description
Banner landmark must not be contained in another landmark.
The Algorithm (in simple terms)
This rule finds (banner/contentinfo) landmarks and walks up the document structure verifying that no other landmark roles are encountered before reaching the body.
Resources
Refer to the complete list of axe 4.9 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: