Le problème
Des div stylées imitent une liste ou un bouton sans en exposer la fonction. Il faut alors reconstruire des relations et comportements disponibles dans le HTML natif.
Exemple : mauvais et correct
Mauvais
<div class="liste">
<div>Définir l’échantillon</div>
<div>Tester les pages</div>
<div>Rédiger le rapport</div>
</div>Correct
<ol>
<li>Définir l’échantillon</li>
<li>Tester les pages</li>
<li>Rédiger le rapport</li>
</ol>ol décrit une succession d’étapes restituable par le lecteur d’écran, sans rôle ARIA ajouté.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 9.3 — Structurer les listes.
- Critère 9.1 — Baliser les titres selon la hiérarchie.
- Critère 9.2 — Baliser les grandes zones.
- Critère 8.9 — Préserver le sens des balises.
Impact utilisateur
La structure explicite les relations pour une personne aveugle. Au clavier, les contrôles natifs fournissent des comportements usuels sans interaction particulière à apprendre.
Correction
- Choisissez selon la tâche : a avec href pour une destination, button pour une action, ol pour des étapes, ul pour une énumération, label pour un champ.
- Réglez l’apparence avec le CSS : un petit titre reste un titre et un lien stylé comme un bouton conserve sa fonction de navigation.
- Vérifiez le HTML des composants : « Button » peut rendre une div. Une série de cartes peut constituer une liste si le contenu le justifie.
Méthode de test
- Comparez le DOM généré aux fonctions visibles : les noms des composants ne prouvent rien.
- Au lecteur d’écran, parcourez titres, listes et repères : les relations attendues doivent être restituées.
- Testez les commandes au clavier puis la page sans styles pour repérer une organisation dépendant seulement de la présentation.
Points de vigilance
- Le HTML natif ne garantit pas contrastes, alternatives ou gestion du focus.
- div convient aux regroupements sans signification particulière ; il n’est pas intrinsèquement inaccessible.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.