Composants accessibles : les motifs d'interface au crible du RGAA
Une fiche par composant : quand préférer l'élément natif, quels critères RGAA s'appliquent, quelles interactions clavier sont attendues, quels rôles ARIA poser et quels défauts vérifier à la main.
29 composants répartis en 6 familles
Fondamentaux3 fiches
Les briques de base dont tout le reste dépend : agir, naviguer, structurer la page.
Bouton (button)
Le contrat du bouton accessible : élément button natif, nom accessible des boutons icône, états aria-pressed et aria-disabled, clavier Entrée et Espace.
Natif :
<button type="button">Lien (link)
La référence du lien accessible : intitulé explicite hors contexte, nom accessible qui contient le texte visible, aria-current, distinction visuelle.
Natif :
<a href>Points de repère
Le contrat RGAA des points de repère : ce que le test 9.2.1 exige vraiment, les conditions sous lesquelles une balise est (ou non) un landmark, et le lien d'évitement du critère 12.7.
Natif :
<header> / <nav> / <main> / <aside> / <footer>
Formulaires et saisie7 fiches
Champs et contrôles de saisie : le natif d’abord, ARIA quand il le faut.
Case à cocher
Rendre une case à cocher accessible : étiquette associée, fieldset et legend, tri-état indeterminate, touches clavier et critères RGAA applicables.
Natif :
<input type="checkbox">Boutons radio
Groupe de boutons radio accessible : name partagé, fieldset et legend, navigation aux flèches, un seul arrêt de tabulation et critères RGAA applicables.
Natif :
<input type="radio">Interrupteur
Interrupteur (switch) accessible : role switch et aria-checked, différence avec la case à cocher, état non porté par la couleur seule, critères RGAA.
Natif :
<button role="switch"> ou <input type="checkbox" role="switch">Champ incrémental
Champ incrémental accessible : input type number pour les quantités, inputmode numeric pour les chaînes de chiffres, role spinbutton et critères RGAA.
Natif :
<input type="number">Curseur (slider)
Construire un curseur (slider) accessible : input type range, role slider, aria-valuenow, clavier complet et alternative au glissement selon le RGAA.
Natif :
<input type="range">Combobox
Rendre un combobox conforme RGAA : quand préférer un select natif, interactions clavier attendues, rôles ARIA (aria-expanded, aria-activedescendant) et défauts fréquents.
Natif :
<select> / <datalist>Listbox
Le motif listbox côté web : quand préférer un select natif, role listbox, aria-selected, roving tabindex et critères RGAA d'une liste d'options accessible.
Natif :
<select> / <select multiple>
Afficher et masquer4 fiches
Révéler du contenu à la demande sans perdre les utilisateurs de clavier ou de lecteur d’écran.
Contenu dépliable (disclosure)
Le contrat du contenu dépliable (afficher/masquer) conforme RGAA : details/summary natif, aria-expanded sur le bouton et panneau masqué par hidden, jamais en CSS visuel.
Natif :
<details> / <summary>Accordéon
La référence RGAA de l'accordéon : titre encapsulant un bouton aria-expanded, niveau choisi selon le plan du document, panneaux masqués par hidden, flèches optionnelles sans capturer Tab.
Natif :
<details name> (accordéon exclusif)Onglets
Le contrat du motif tabs : rôles tablist, tab et tabpanel, aria-selected toujours synchronisé avec tabindex, un seul arrêt de tabulation et les critères RGAA à vérifier.
Natif :
aucunInfobulle
Implémenter une infobulle role=tooltip conforme RGAA : apparition au focus, fermeture par Échap, aria-describedby ou aria-labelledby, et pourquoi title n'est pas une infobulle.
Natif :
aucun
Dialogues et messages3 fiches
Interrompre ou informer : fenêtres modales, confirmations et messages de statut.
Fenêtre modale
Le contrat de référence d'une fenêtre modale conforme RGAA : élément dialog natif ouvert par showModal(), boucle Tab, Échap, arrière-plan inerte et retour du focus sur le déclencheur.
Natif :
<dialog> + .showModal()Dialogue d'alerte
Le contrat du dialogue d'alerte (role alertdialog) conforme RGAA : aria-describedby obligatoire vers le message, focus initial sur l'action sûre, Échap et retour du focus.
Natif :
<dialog> (role alertdialog explicite)Alerte (alert)
Zones live ARIA : choisir entre role alert, status et log selon le type de message, règle de la zone préexistante et tests du critère RGAA 7.5.
Natif :
aucun (role="alert" / role="status")
Données et contenus riches7 fiches
Tableaux, grilles, jauges et contenus qui bougent : restituer sans piéger.
Tableau de données (table)
Baliser un tableau de données accessible : caption associé, en-têtes th avec scope, critères RGAA de la thématique 5 et défilement maîtrisé à 320 px.
Natif :
<table> + <caption> + <th scope>Grille (grid)
Role grid ou simple tableau HTML ? Table de décision, roving tabindex, clavier en deux dimensions et critères RGAA d'une grille interactive accessible.
Natif :
<table> + role="grid"Grille arborescente (treegrid)
Grille arborescente (treegrid) : deux modes clavier, aria-expanded sur la ligne, aria-level obligatoire, et l'alternative du tableau à lignes dépliables.
Natif :
aucun (souvent : <table> + boutons aria-expanded)Jauge (meter)
Meter ou progress, valeur textuelle visible, couleur et contraste : construire une jauge accessible en HTML, conforme aux critères RGAA.
Natif :
<meter> / <progress>Carrousel
Rendre un carrousel conforme RGAA : bouton pause du défilement automatique (critère 13.8), pause au survol et au focus, diapositives masquées avec hidden, aria-roledescription.
Natif :
aucunFlux
Le motif ARIA feed face au RGAA : pourquoi le défilement infini piège le clavier (critère 12.9), quand un bouton Charger plus suffit, aria-busy, aria-posinset et aria-setsize.
Natif :
aucunSéparateur de fenêtres
Séparateur de fenêtres (window splitter) conforme RGAA : role separator focalisable, aria-valuenow, alternative en un point unique au glissement (critère 13.10) et annulation.
Natif :
aucun
Un composant vérifié ne fait pas un site conforme
Ces fiches couvrent les motifs d'interface les plus souvent cassés. Pour situer l'ensemble d'une page par rapport aux 106 critères, lancez un scan puis complétez avec les vérifications manuelles de chaque fiche.
Scanner gratuitement une page