Rule 9.2.1

Summary

Check for HTML5 pages, if the page contains:

  • one and only one <main> tag or role="main" element without hidden attribute.
  • at least one <header> tag or role="banner" element, except those that are direct children of <article> and <section> tags.
  • at least one <footer> tag or role="contentinfo" element, except those that are direct children of <article> and <section> tags.
  • at least one <nav> tag or role="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

9.2

Test

9.2.1

Description

Dans chaque page web, la structure du document vérifie-t-elle ces conditions (hors cas particuliers) ?

Particular cases (criterion 9.2)

Lorsque le doctype déclaré dans la page n’est pas le doctype HTML5, ce critère est non applicable.

Technical notes (criterion 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 attribut hidden ou d’un style permettant de les masquer aux technologies d’assistances. A noter cependant que l’utilisation d’un style seul restera insuffisant 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").

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 element, 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 doctype that is not an HTML5 doctype.

Failed

  • multiple main landmarks (<main> or role="main") without hidden attribute 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

Files