non-semantic-landmarking
Web validation
Landmarks identify the main areas of a page, such as the site header, the main content, and the footer. Screen readers list them and let users jump directly to each area. This validation covers two cases: an element that acts as the page header but is not exposed as a banner landmark, and an element that acts as the page footer but is not exposed as a contentinfo landmark.
When the header or footer is built from generic elements, such as a <div>, assistive technologies do not announce it as a header or footer. Screen reader users may not understand the page layout fully and could miss important content.
To fix the issue:
- Header: Change the element's tag to
<header>. If you can't change the tag, addrole="banner"to the element. - Footer: Change the element's tag to
<footer>. If you can't change the tag, addrole="contentinfo"to the element.
Prefer the native elements, and use the ARIA roles only as a fallback.
Note: A <header> or <footer> is exposed as a banner or contentinfo landmark only when it is not inside a <main>, <article>, <aside>, <nav>, or <section> element. An element with role="banner" or role="contentinfo" is exposed wherever it appears, but it should still be at the top level of the document, not inside another landmark. See the related landmark-banner-is-top-level and landmark-contentinfo-is-top-level validations.
Pass Patterns
Native <header> and <footer> at the top level
Both elements are direct children of <body>, so they are exposed as banner and contentinfo landmarks.
<body>
<header>
<a href="/">Example Store</a>
<nav aria-label="Main">...</nav>
</header>
<main>...</main>
<footer>
<p>© 2025 Example Store</p>
</footer>
</body>Generic elements with landmark roles
When the tags can't be changed, role="banner" and role="contentinfo" expose the elements as landmarks.
<body>
<div class="site-header" role="banner">
<a href="/">Example Store</a>
</div>
<main>...</main>
<div class="site-footer" role="contentinfo">
<p>© 2025 Example Store</p>
</div>
</body>Fail Patterns
Header built from a generic element
The element looks and acts like the site header, but it is a plain <div>, so it is not exposed as a banner landmark.
<div class="site-header">
<a href="/">Example Store</a>
<nav aria-label="Main">...</nav>
</div>Footer built from a generic element
The element looks and acts like the site footer, but it is a plain <div>, so it is not exposed as a contentinfo landmark.
<div class="site-footer">
<p>© 2025 Example Store</p>
</div>Page header nested inside <main>
The <header> is the site header, but it is inside <main>, so browsers do not expose it as a banner landmark.
<main>
<header>
<a href="/">Example Store</a>
</header>
...
</main>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
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Open the screen reader's landmarks list, or use its landmark navigation key (for example, D in NVDA or R in JAWS).
- Look for the page header and footer in the list.
Expected results: The page header is listed as a banner landmark, and the page footer is listed as a contentinfo landmark (announced as “banner” and “content information” or similar).
Actual results: The header or footer is missing from the landmarks list.
Inspecting the browser dev-tools
- Inspect the page header and footer in your browser's dev tools.
- Open the Accessibility panel and check each element's role.
Expected results: The header has the role banner, and the footer has the role contentinfo.
Actual results: The role is generic, or the element is not exposed as a landmark.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires information and structure conveyed through presentation to also be programmatically determinable. When the page header or footer is clear on screen but is built from generic elements, that structure is missing in code, so assistive technology users cannot identify or navigate to these areas.
Why is this issue marked as Minor?
The content inside the header and footer is still available, and users can reach it by reading the page or navigating by headings. However, they lose a quick way to jump to these areas and a clear picture of the page layout, so it is rated minor.
Why does this page cover both headers and footers?
Two validations, non-semantic-header and non-semantic-footer, check the same problem for different page areas, so they share this page. The cause, effect, and fix are the same: expose the element as the correct landmark, using <header> or role="banner" for the header, and <footer> or role="contentinfo" for the footer.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |