On this page
Certain ARIA landmarks – role=”banner”
, role=”main”
, and role=”contentinfo”
– are only permitted to appear on the page once for ARIA validation to meet the standard. This also includes the HTML equivalents – <header>
, <main>
, and <footer>
.
Why this matters
See Why does it matter if our HTML is semantic?
How to implement
Having a <main>
and a <div role=”main”>
on the same page at the same time is a failure of this requirement.
- Ensure that there is only one “header” container on the page, and that it is either
<header>
orrole=”banner”
. - Ensure that there is only one “main” container on the page, and that it is either
<main>
orrole=”main”
. - Ensure that there is only one “footer” container on the page, and that it is either
<footer>
orrole=”contentinfo”
.
How to test
Right-click and inspect the page, confirming that:
- There is only one “header” container on the page, and that it is either
<header>
orrole=”banner”
. - There is only one “main” container on the page, and that it is either
<main>
orrole=”main”
. - There is only one “footer” container on the page, and that it is either
<footer>
orrole=”contentinfo”
.