Problèmes de repères et de régions : donner aux lecteurs d'écran une carte de la page

La plupart des lecteurs d'écran proposent un raccourci pour passer directement d'une grande région structurelle de la page à une autre - en-tête, navigation, contenu principal, contenu latéral, pied de page - de la même façon que l'œil d'une personne voyante se porte directement sur la partie qui l'intéresse. Ce raccourci ne fonctionne que si ces régions sont réellement balisées comme repères, soit par des éléments HTML5 sémantiques (<header>, <nav>, <main>, <footer>, <aside>), soit par leurs équivalents ARIA (role="banner", role="navigation", role="main", role="contentinfo", role="complementary").

Cela relève du critère de succès 1.3.1 des WCAG (Information et relations), niveau A.

Les deux erreurs les plus fréquentes

Du contenu qui ne se trouve dans aucun repère. Une page entièrement construite avec des <div> génériques, sans structure sémantique, ne donne aucun point de saut : chaque portion de contenu est indifférenciée, ce qui impose une lecture linéaire et lente de toute la page pour seulement trouver le contenu principal.

<!-- Avant : aucune structure utilisable pour naviguer -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

<!-- Après : de véritables repères -->
<header>...</header>
<nav>...</nav>
<main>...</main>

Plus d'un <main> (ou role="main") dans une page. Une page doit comporter exactement un repère principal identifiant le contenu primaire : n'en avoir aucun supprime totalement le raccourci « aller directement au contenu », et en avoir deux ou plus laisse la personne dans l'incertitude quant à la zone réellement principale.

Pourquoi <div class="nav"> n'équivaut pas à <nav>

C'est un thème récurrent de presque toutes les corrections d'accessibilité : un nom de classe CSS ne transmet rien aux technologies d'assistance. class="nav" n'est qu'un point d'accroche pour la mise en forme ; <nav> est un élément sémantique dont le sens est inscrit dans l'arbre d'accessibilité et compris automatiquement par tous les lecteurs d'écran. Le résultat visuel d'une <div> nommée par classe et d'un véritable élément <nav> peut être identique au pixel près, tout en étant radicalement différent à l'usage.

Une liste de contrôle pratique

• Un <header> (ou role="banner") pour l'identité et l'en-tête du site
• Un <nav> par menu de navigation distinct (un menu d'en-tête et un menu de pied de page peuvent coexister, chacun étiqueté s'il y en a plusieurs : <nav aria-label="Pied de page">)
• Exactement un <main> englobant le contenu principal et propre à la page
• Un <footer> (ou role="contentinfo") pour le pied de page du site
• Un <aside> pour du contenu réellement annexe (une colonne latérale, un bloc de liens connexes) - pas pour du contenu qui fait partie du flux principal

Corriger cela dans un gabarit partagé règle la non-conformité sur toutes les pages à la fois, exactement comme le font un attribut lang unique ou un lien d'évitement.

Références officielles

• Deque University : landmark-one-main
• Deque University : region