Composants accessibles
Le code des composants d'interface les plus courants, généré selon vos réglages et vérifié sous vos yeux : il tourne dans un aperçu réel, puis passe les contrôles du composant, un test de comportement au clavier et axe-core, le moteur des audits d'Accessia. Chaque résultat cite son critère RGAA.
Modale
Une modale interrompt la page pour une décision ou une saisie. Accessible, elle a un nom annoncé, reçoit le focus à l'ouverture, rend le reste de la page inerte, se ferme au clavier et rend le focus au bouton qui l'a ouverte. L'élément HTML <dialog> ouvert avec showModal() fait l'essentiel de ce travail.
RGAA 7.1, 7.3, 12.8, 12.9
Générer et vérifier : ModaleChamp de formulaire
Un champ accessible a une étiquette visible reliée par <label for>, une aide et un message d'erreur reliés par aria-describedby (donc lus en arrivant sur le champ), une mention « obligatoire » en toutes lettres et, pour une donnée sur la personne, l'attribut autocomplete qui permet le remplissage automatique.
RGAA 11.1, 11.2, 11.10, 11.11, 11.13, 3.1
Générer et vérifier : Champ de formulaireGroupe de champs
Des champs qui vont ensemble (boutons radio d'une même question, cases à cocher, champs d'une adresse) se regroupent dans un <fieldset> dont la <legend> dit ce qu'on demande. Le lecteur d'écran annonce alors la question avec chaque choix. Les boutons radio d'un groupe partagent le même attribut name.
RGAA 11.5, 11.6, 11.7, 11.1, 11.10, 11.13, 7.3
Générer et vérifier : Groupe de champsMessage de statut
Un message de statut (« Article ajouté au panier », « 3 résultats », « Enregistrement impossible ») apparaît sans que le focus bouge. Pour qu'un lecteur d'écran l'annonce, il s'écrit dans une zone qui existe dès le chargement de la page et porte role="status" (résultat, information), role="alert" (erreur) ou role="log" (historique).
RGAA 7.5
Générer et vérifier : Message de statutMenu de navigation
Un menu de site accessible est un <nav> qui contient une liste de liens. Chaque sous-menu s'ouvre avec un vrai bouton (aria-expanded indique s'il est ouvert), pas au seul survol de la souris : il fonctionne alors au clavier, au toucher et au lecteur d'écran. Échap le referme et rend le focus au bouton.
RGAA 9.2, 9.3, 7.1, 7.3, 10.14, 12.11
Générer et vérifier : Menu de navigationOnglets
Des onglets accessibles suivent le motif ARIA « tabs » : une liste role="tablist" nommée, des onglets role="tab" dont un seul est sélectionné (aria-selected) et dans l'ordre de tabulation, des panneaux role="tabpanel" nommés par leur onglet. Les flèches passent d'un onglet à l'autre, Tab va directement au panneau.
RGAA 7.1, 7.3
Générer et vérifier : OngletsAccordéon
Un accordéon accessible est une suite de boutons qui ouvrent et ferment chacun un panneau. Chaque bouton est un vrai <button> (ou un <summary> natif), placé dans un titre, et aria-expanded annonce s'il est ouvert. Un panneau fermé est réellement masqué (attribut hidden) : il n'est ni lu ni atteignable au clavier.
RGAA 7.1, 7.3, 10.8
Générer et vérifier : AccordéonLien d'évitement
Le lien d'évitement est le premier lien de la page : « Aller au contenu ». Il permet de sauter l'en-tête et le menu, répétés sur chaque page, pour arriver directement au contenu principal. Il peut rester hors de l'écran tant qu'il n'a pas le focus, mais doit devenir visible dès qu'on y arrive au clavier.
RGAA 12.7
Générer et vérifier : Lien d'évitementFil d'Ariane
Un fil d'Ariane accessible est une navigation secondaire : un <nav> nommé (« Fil d'Ariane »), qui contient une liste ordonnée de liens, la page courante marquée aria-current="page", et des séparateurs purement décoratifs qui ne sont pas lus. Le RGAA n'exige pas de fil d'Ariane, mais s'il existe, il suit ces règles.
RGAA 9.2, 9.3, 6.2
Générer et vérifier : Fil d'ArianeCarrousel
Un carrousel accessible a des boutons « Diapositive précédente » et « Diapositive suivante » nommés, masque réellement les diapositives inactives et, s'il défile tout seul plus de cinq secondes, propose un bouton pour arrêter le défilement. Le plus accessible reste souvent un carrousel qui ne défile pas seul.
RGAA 7.1, 7.3, 10.8, 13.8
Générer et vérifier : CarrouselTableau de données
Un tableau de données accessible a un titre relié (<caption>), des en-têtes déclarés avec <th> et, quand il a des en-têtes de colonnes et de lignes, l'attribut scope (col ou row) sur chacun. Le lecteur d'écran annonce alors les en-têtes avec chaque valeur : « Mardi, Après-midi : Fermé ».
RGAA 5.4, 5.6, 5.7, 5.8
Générer et vérifier : Tableau de données
Ce qui change par rapport à du code « prêt à coller »
- Vérifié, pas seulement généré : chaque version du composant est contrôlée dans le navigateur, y compris son comportement (focus, touche Échap, annonce des messages).
- Les erreurs fréquentes, en vrai : introduisez une erreur courante et voyez le contrôle qui la détecte.
- Votre propre code : collez votre composant, il passe les mêmes contrôles, sans quitter votre navigateur.
- Honnête sur les limites : la clarté des textes et l'écoute avec un vrai lecteur d'écran restent à faire par une personne ; un composant conforme ne rend pas une page entière conforme.
Prochainement : les sous-titres d'une vidéo, et le code de chaque composant en React.