Banner Landmark Check

Description

The “Banner Landmark Check” evaluates whether the banner landmark (typically used for site-wide headers or branding) is placed only at the top level of the page and is not nested within other landmark regions (e.g., main).

Example outcome

I noticed that the banner landmarks are not contained within other landmarks.

Impact

• Visual Impairments: Users relying on screen readers may not be able to navigate properly or even detect the banner.
• Motor Impairments: Inconsistent landmark structure can hinder keyboard-only navigation.
• Cognitive Disabilities: Confusing structure can cause disorientation and navigation fatigue.

Fixes

To address banner landmarks inappropriately contained within other landmarks:

1. Locate the inappropriately placed banner landmark.
2. Remove it from within the landmark in which it is nested, tipically placing it on top of the page.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2: Understanding Success Criteria 2.4.1
• WCAG 2.2 Techniques: Technique ARIA11: Using ARIA landmarks to identify regions of a page
• WebAIM: Semantic Structure: Regions, Headings, and Lists