Composants accessibles · HTML, clavier, lecteur d'écran
Composants
Un composant par fiche : la démo qui marche, le code qui l'explique pas à pas, le comportement clavier attendu, et les critères RGAA que chacun met en jeu. Écrit pour être copié.
Structure de la page
Ce qui donne sa forme à chaque page : gabarit, régions, titres, langue.
- L'en-tête et le pied de page
Deux régions uniques, un lien d'évitement devant, un logo qui dit où il mène, un menu et une recherche nommés — et la même place sur chaque page.
- Le fil d'Ariane
Un fil d'Ariane, c'est une liste de liens dans une région nommée — et des séparateurs que personne ne doit entendre.
- Le gabarit d'une page
Le titre de page est la première chose annoncée à l'arrivée, et le seul libellé de l'onglet quand on en a quinze d'ouverts.
- La langue de la page
L'attribut lang choisit la voix qui lit la page.
- Les liens d'évitement
Le lien d'évitement est le premier élément focalisable de la page, invisible jusqu'à ce qu'on le tabule.
- Les listes
Une liste annonce combien d'éléments elle contient — à condition d'en être une.
- La page sans ses styles
Désactiver la feuille de styles prend dix secondes et montre deux choses d'un coup : ce qui n'existait que par le CSS, et l'ordre réel du contenu.
- Le plan du site
Des trois systèmes de navigation que le RGAA reconnaît, le plan est celui qui donne une vue d'ensemble — et son défaut ne se lit jamais dans son balisage, seulement en comparant le plan au site.
- Les régions et points de repère
Cinq balises donnent à une page ses régions : header, nav, main, aside, footer.
- Les titres et la structure
Le niveau d'un titre dit sa place dans le plan du document, jamais la taille voulue à l'écran.
Formulaires
Chaque champ, son étiquette, ses erreurs — et les cas qui trompent, du CAPTCHA à l’autocomplétion.
- L'autocomplétion
Un champ, une liste de suggestions, et un lien entre les deux qui n'existe que dans les attributs.
- Les CAPTCHA
Un CAPTCHA visuel exclut par construction.
- Les cases à cocher et les boutons radio
Une case à cocher est un choix indépendant, un bouton radio un choix exclusif dans un groupe — et le clavier ne les traverse pas de la même façon.
- Le champ de mot de passe
Un champ dont on ne peut ni relire ce qu'on a tapé, ni coller ce qu'un gestionnaire a généré.
- Le champ de recherche
Un placeholder n'est pas une étiquette, une loupe n'est pas un nom.
- Les champs de formulaire
Un champ sans étiquette liée est invisible pour qui ne voit pas le formulaire.
- L'interrupteur
Avant de coder un interrupteur, il faut savoir si c'en est un : la case à cocher exprime un choix qui sera soumis, l'interrupteur applique un effet immédiat.
- La liste déroulante
Le select natif donne le clavier, le tactile et le sélecteur du système sans qu'on écrive une ligne.
- Le récapitulatif d'erreurs
Un formulaire long qui n'affiche que des messages inline laisse chercher : ni combien d'erreurs, ni où.
- Le sélecteur de date
La bonne question n'est pas comment coder un calendrier, mais s'il en faut un.
- Le téléversement de fichier
L'input file natif donne déjà le clavier, le focus et l'état du champ.
Fenêtres et messages
Ce qui apparaît par-dessus la page ou pendant qu’on l’utilise.
- Le chargement et la progression
Un spinner qui tourne ne dit rien à qui ne le voit pas, et la fin d'un chargement est souvent passée sous silence.
- Le contenu au survol et au focus
Une infobulle, un aperçu, un sous-menu : tout ce qui apparaît au survol doit apparaître aussi au focus, se laisser survoler sans fuir, et se refermer par Échap.
- Les fenêtres surgissantes et les flashs
Deux exigences qui protègent de ce qu'on n'a pas demandé : la fenêtre qui s'ouvre seule, et le flash qui peut déclencher une crise.
- L'infobulle
Une infobulle décrit un élément qui porte déjà son nom — elle ne le nomme pas.
- Les limites de temps
Une limite de temps doit pouvoir être supprimée ou augmentée.
- Les messages de statut
« Enregistré », « 3 résultats », « Champ obligatoire » : ces messages apparaissent sans changer de page ni prendre le focus.
- La modale
Une fenêtre qui interrompt tout doit rendre ce qu'elle prend : le focus, le clavier, l'annonce au lecteur d'écran.
Tableaux et données
Des données lisibles ligne par ligne, tri et pagination compris.
- Les graphiques et visualisations
Un graphique dit quelque chose qu'aucune alternative courte ne contient.
- Le tableau complexe
Un tableau à deux niveaux d'en-têtes se lit à l'aveugle dans une seule direction : celle que le code lui donne.
- Le tableau interactif
Trier, filtrer, paginer : trois ajouts sur un tableau de données, et trois façons de perdre l'information en route.
- Le tableau paginé
Un tableau qui change de page se réagence, remonte en tête et ne dit rien de ce qui vient d'arriver.
- Les tableaux de données
Un tableau se lit de haut en bas et de gauche à droite — sauf quand on ne le voit pas.
Images et médias
Alternatives, sous-titres, transcriptions : ce que voit ou entend qui ne voit ni n’entend pas.
- L'audio
Un fichier son seul n'a qu'une alternative : la transcription textuelle.
- L'audiodescription
L'audiodescription dit ce que l'image montre et que la bande son tait, dans les silences du dialogue.
- Les cadres
Un cadre sans titre est annoncé « cadre », et rien de plus : personne ne sait s'il faut y entrer.
- Les documents en téléchargement
Un lien « Télécharger » ne dit ni ce qu'on emporte, ni qu'un fichier va s'ouvrir.
- Les images
Une seule question décide de tout : l'image porte-t-elle de l'information ?
- Le lecteur média
Le lecteur natif du navigateur donne le clavier, les noms et les états sans une ligne de script ; un lecteur maison les reprend tous à zéro.
- Les médias non temporels
Le média non temporel est le contenu embarqué qu'on manipule : visionneuse, application, plan interactif.
- Les sous-titres et la transcription
Des sous-titres ne sont pas une traduction, et une transcription n'est pas une pièce jointe.
- Les SVG et les icônes
Un SVG en ligne n'a pas d'attribut alt : son nom et son rôle se déclarent, ou n'existent pas.
- La vidéo
Une vidéo pré-enregistrée doit porter trois choses différentes, et on les confond sans arrêt : des sous-titres synchronisés, une audiodescription, une transcription textuelle.
Texte et présentation
Contraste, zoom, espacement, thème : la page reste lisible quelle que soit la façon de la lire.
- Les abréviations et les contenus cryptiques
Le RGAA n'a pas de critère sur les abréviations : leur développement est une exigence de niveau AAA, hors de sa portée.
- Les citations et le texte enrichi
Le gras et l'italique ne disent rien à personne ; em, strong, q et blockquote disent quelque chose à tout le monde.
- Le contraste et la couleur
Deux exigences qu'on confond : l'information ne doit pas tenir à la seule couleur, et le texte doit être assez contrasté.
- L'espacement du texte
Le critère le moins connu du référentiel : l'utilisateur doit pouvoir augmenter l'interligne et l'espacement des lettres sans que la page perde du texte.
- Le thème sombre
Un thème sombre n'est pas un thème clair inversé : chaque palette se mesure pour elle-même.
- Le zoom et l'agrandissement
Le texte doit rester lisible agrandi à 200 %, et le contenu utilisable dans une fenêtre de 320 px.
Gestes et mouvement
Glisser, balayer, défiler seul : un geste complexe a toujours un équivalent simple.
- Le carrousel
Le carrousel est le composant qu'on installe le plus souvent sans besoin, et qui coûte le plus cher à rendre accessible.
- Les gestes et le mouvement
Un geste n'est jamais la fonctionnalité : c'est un raccourci posé par-dessus des commandes que tout le monde peut atteindre.
- Le glisser-déposer
Aucune touche du clavier n'émet un dragstart : un glisser-déposer sans commande équivalente rend la fonctionnalité inatteignable.