Business rules manual
RGAA v4.1.2
Theme 9: Structure of information
Rule 9.1.1

Rule 9.1.1

Summary

This test consists in checking the relevancy of the headings hierarchy within structural containers.

Business description

Criterion

9.1

Test

9.1.1

Description

Dans chaque page web, la hiérarchie entre les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-elle pertinente ?

Notes techniques (9.1)

WAI-ARIA permet de définir des titres via le rôle heading et l’attribut aria-level (indication du niveau de titre). Bien qu’il soit préférable d’utiliser l’élément de titre natif en HTML <hx>, l’utilisation du rôle WAI-ARIA heading est compatible avec l’accessibilité.

La hiérarchie de titres n’implique pas obligatoirement une séquence parfaitement ordonnée (h1, h2, h3, etc.). Un titre <h3> peut ainsi venir directement après un titre <h1>, à condition que cette structure soit cohérente avec l’organisation du contenu.

Level

A

Technical description

Scope

Page

Decision level

Decidable

Algorithm

Selection

Set1

All the <Hx> tags where x is comprised between 1 and 6 and all the tags with a "role" attribute equals to “heading” and an "aria-level" attribute (h1, h2, h3, h4, h5, h6, [role=heading][aria-level]).

Note: Hidden elements (via CSS display:none, visibility:hidden, opacity:0, or HTML hidden attribute) are included in the selection as they may still be accessible to assistive technologies.

Process

Headings are grouped by their nearest structural container:

  • HTML5 landmarks: <main>, <header>, <footer>, <nav>, <aside>, <article>, <section>
  • ARIA landmarks: [role="main"], [role="banner"], [role="contentinfo"], [role="navigation"], [role="complementary"], [role="region"], [role="dialog"], [role="alertdialog"]
  • Direct children of <body> (as fallback container boundary)

Within each container, the first heading sets the reference level for that container.

Test1

For each structural container, we check that no heading has a level number lower (more important) than the reference level of its container.

Example violations:

  • h2 followed by h1 in the same container (h1 is more important than h2)
  • h3 followed by h2 in the same container (h2 is more important than h3)

Note: Level skips are allowed (e.g., h1→h3, h2→h5). Only the logical order matters within a container.

For each occurrence of false-result of Test1, raise a MessageA

MessageA : Header Tag Not Hierarchically Well defined
  • code : HeaderTagNotHierarchicallyWelldefined
  • status: Failed
  • parameter : first heading tag of container, snippet
  • present in source : yes

Analysis

Passed

All headings maintain logical order within their structural containers (no heading with a lower level number appears after a heading with a higher level number in the same container).

Failed

At least one heading violates the hierarchy within its structural container (a heading with a lower level number appears after a heading with a higher level number in the same container).

Not Applicable

  • The page has no <H> tag
  • The page has no tag with heading semantic (role="heading" and aria-level="Integer")

(Set1 is empty)

Examples

Passed example 

<!-- Level skips are allowed -->
<h1>Main Title</h1>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

<!-- Different containers can have independent hierarchies -->
<main>
    <h2>Main content</h2>
</main>
<aside>
    <h2>Sidebar</h2>
</aside>

Failed example 

<!-- h1 after h2 in same container -->
<main>
    <h2>Section</h2>
    <h1>This violates hierarchy</h1>
</main>

<!-- h2 after h3 in same section -->
<section>
    <h3>Subsection</h3>
    <h2>This violates hierarchy</h2>
</section>

Files

Rule 9.1.2