Rule 9.2.1
Summary
Check for HTML5 pages, if the page contains:
- one and only one
<main>tag orrole="main"element withouthiddenattribute. - at least one
<header>tag orrole="banner"element, except those that are direct children of<article>and<section>tags. - at least one
<footer>tag orrole="contentinfo"element, except those that are direct children of<article>and<section>tags. - at least one
<nav>tag orrole="navigation"element.
A manual check is necessary to control the use of the different landmarks (HTML5 tags or ARIA roles) according to this rule.
Business description
Criterion
Test
Description
Dans chaque page web, la structure du document vérifie-t-elle ces conditions (hors cas particuliers)?
- La zone d’en-tête de la page est structurée via une balise
<header>- Les zones de navigation principales et secondaires sont structurées via une balise
<nav>- La balise
<nav>est réservée à la structuration des zones de navigation principales et secondaires- La zone de contenu principal est structurée via une balise
<main>- La structure du document utilise une balise
<main>visible unique- La zone de pied de page est structurée via une balise
<footer>.
Notes techniques (9.2)
La balise
<main>peut être utilisée plusieurs fois dans le même document HTML. Néanmoins, il ne peut y avoir en permanence qu’une seule balise visible et lisible par les technologies d’assistances, les autres devant disposer d’un attributhiddenou d’un style permettant de les masquer aux technologies d’assistances. À noter cependant que l’utilisation d’un style seul restera insuffisante pour assurer l’unicité d’une balise<main>visible en cas de désactivation des feuilles de styles.
Implementation note: ARIA landmarks support
This implementation also accepts ARIA landmark roles as valid alternatives to HTML5 structural elements:
| HTML5 element | ARIA role equivalent |
|---|---|
<header> (page level) |
role="banner" |
<nav> |
role="navigation" |
<main> |
role="main" |
<footer> (page level) |
role="contentinfo" |
This allows older non-HTML5 sites to pass the test by using ARIA roles,
and also supports mixed usage (e.g., <header> + role="navigation").
Cas particuliers (9.2)
Lorsque le doctype déclaré dans la page n’est pas le doctype HTML5, ce critère est non applicable.
Level
A
Technical description
Scope
Page
Decision level
Semi-Decidable
Algorithm
Selection
Set1
All the <nav> tags or elements with role="navigation".
CSS selector :
nav, [role=navigation]Set2
All the <main> tags or elements with role="main", without hidden attribute.
CSS selector :
main:not([hidden]), [role=main]:not([hidden])Set3
All the <header> tags or elements with role="banner",
except those that are direct children of <article> and <section> tags.
CSS selector :
*:not(article):not(section) > header, *:not(article):not(section) > [role=banner]Set4
All the <footer> tags or elements with role="contentinfo",
except those that are direct children of <article> and <section> tags.
CSS selector :
*:not(article):not(section) > footer, *:not(article):not(section) > [role=contentinfo]Process
Tests
Test0
Test whether the page has a doctype that is not an HTML5 doctype:
- If yes, raise a MessageA.
- If no, launch Test1, Test2, Test3 and Test4.
Test1
Test emptiness of Set1.
- If empty, raise a MessageB.
- If not empty, raise a MessageC.
Test2
Test whether Set2 is not empty and contains only one element.
- If empty, raise a MessageD.
- If not empty but contains multiple elements, raise a MessageE.
- Else raise a MessageC.
Test3
Test emptiness of Set3.
- If empty, raise a MessageF.
- If not empty, raise a MessageC.
Test4
Test emptiness of Set4.
- If empty, raise a MessageG.
- If not empty, raise a MessageC.
Messages
MessageA : Not Applicable
- status: Not Applicable
MessageB : navigation landmark is missing
- code : NavElementMissing
- status: Failed
- present in source: no
MessageC : Check manually the elements of the scope
- code: ManualCheckOnElements
- status: Pre-qualified
- parameter: snippet
- present in source: yes
MessageD : main landmark is missing
- code : MainElementMissing
- status: Failed
- present in source: no
MessageE : multiple main landmarks
- code : MainElementNotUnique
- status: Failed
- parameter: snippet
- present in source: yes
MessageF : header/banner landmark is missing
- code : HeaderElementMissing
- status: Failed
- present in source: no
MessageG : footer/contentinfo landmark is missing
- code : FooterElementMissing
- status: Failed
- present in source: no
Analysis
Not Applicable
- The page has a
doctypethat is not an HTML5doctype.
Failed
- multiple main landmarks (
<main>orrole="main") withouthiddenattribute are found - OR missing main landmark
- OR missing header/banner landmark
- OR missing footer/contentinfo landmark
- OR missing navigation landmark
Pre-qualified
In all other cases