Ensure the Banner Landmark Is At the Top Level

Web accessibility standards state that the banner landmark must not be contained in another landmark.

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. This will prevent screen reader users from being able to easily navigate the layout.

Fixing the Issue

Developers should 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.