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é.
Les médias non temporels
Le média non temporel est le contenu embarqué qu'on manipule : visionneuse, application, plan interactif. Le référentiel n'attend pas qu'on le décrive, mais qu'un lien ou un bouton adjacent mène à une alternative qui en fait autant.
4 critères RGAA en jeu
Lire la ficheLes 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. Démo chronométrée, code, critères RGAA.
2 critères RGAA en jeu
Lire la ficheLe 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. Deux exigences : refléter l'architecture réelle, et s'atteindre depuis toutes les pages.
5 critères RGAA en jeu
Lire la ficheLe 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. Avec le type de document et la validité du code, c'est ce qui porte la page entière sans être un composant. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLa 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. C'est celui que suit un lecteur d'écran.
5 critères RGAA en jeu
Lire la ficheLes 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. Ce qu'il exige, c'est une alternative aux contenus cryptiques — et un attribut title y suffit pour être conforme, sans pour autant être compris. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLe zoom et l'agrandissement
Le texte doit rester lisible agrandi à 200 %, et le contenu utilisable dans une fenêtre de 320 px. Ce qui casse presque toujours : une hauteur fixe en pixels. Démo mesurée, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLa 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. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes titres et la structure
Le niveau d'un titre dit sa place dans le plan du document, jamais la taille voulue à l'écran. Choisir h3 parce que h2 fait trop gros produit un plan qui ne décrit plus la page. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLe thème sombre
Un thème sombre n'est pas un thème clair inversé : chaque palette se mesure pour elle-même. L'erreur courante est de ne contrôler que la claire. Démo qui mesure les deux, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLe téléversement de fichier
L'input file natif donne déjà le clavier, le focus et l'état du champ. Ce qui manque presque toujours, ce sont les contraintes dites avant la sélection, et une confirmation quand le fichier est retenu. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes tableaux de données
Un tableau se lit de haut en bas et de gauche à droite — sauf quand on ne le voit pas. Lier chaque cellule à ses en-têtes, c'est rendre la grille lisible ligne à ligne. Démo, code, critères RGAA.
8 critères RGAA en jeu
Lire la ficheLe tableau interactif
Trier, filtrer, paginer : trois ajouts sur un tableau de données, et trois façons de perdre l'information en route. Le tri vit dans un bouton et dans aria-sort ; le filtre, dans un message de statut. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes 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. Trois situations à distinguer — l'icône décorative, l'icône seule dans un bouton, le SVG informatif autonome.
4 critères RGAA en jeu
Lire la ficheLes sous-titres et la transcription
Des sous-titres ne sont pas une traduction, et une transcription n'est pas une pièce jointe. Ce que le RGAA attend de chacun des deux formats, et comment les écrire. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLe sélecteur de date
La bonne question n'est pas comment coder un calendrier, mais s'il en faut un. Trois champs jour/mois/année suffisent presque toujours — et coûtent cent fois moins cher. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLes régions et points de repère
Cinq balises donnent à une page ses régions : header, nav, main, aside, footer. Un lecteur d'écran en dresse alors la liste et saute de l'une à l'autre — ce qu'aucune classe CSS ne fera jamais. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLe récapitulatif d'erreurs
Un formulaire long qui n'affiche que des messages inline laisse chercher : ni combien d'erreurs, ni où. Le résumé en tête, chaque entrée liée à son champ, et le focus qui s'y déplace. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLa pagination
Une pagination est une liste de liens dans une zone de navigation nommée. Tout se joue sur ce que « 3 » annonce quand on le sort de la page. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes onglets
Rien en HTML ne fait un système d'onglets : tout est à déclarer. Et le piège n'est pas les rôles, c'est le clavier — la tabulation ne circule pas entre les onglets. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLa modale
Une fenêtre qui interrompt tout doit rendre ce qu'elle prend : le focus, le clavier, l'annonce au lecteur d'écran. L'élément natif <dialog> donne les quatre. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes messages de statut
« Enregistré », « 3 résultats », « Champ obligatoire » : ces messages apparaissent sans changer de page ni prendre le focus. Ils ne s'entendent que si la région qui les accueille existait déjà, vide. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLe menu de navigation
Un menu de navigation, ce sont trois pièces : un nav qui porte un nom, une vraie liste de liens, une marque sur la page affichée. Et le bouton qui l'ouvre est un bouton, pas une case à cocher détournée. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLes listes
Une liste annonce combien d'éléments elle contient — à condition d'en être une. Et retirer les puces peut lui faire perdre ce rôle. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLa liste déroulante
Le select natif donne le clavier, le tactile et le sélecteur du système sans qu'on écrive une ligne. Quand il suffit, ce que coûte de le refaire, et comment grouper ses options. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes limites de temps
Une limite de temps doit pouvoir être supprimée ou augmentée. Pour une session, prévenir ne suffit pas : le référentiel demande un moyen d'agir. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLes liens
« En savoir plus » se comprend dans sa phrase, et nulle part ailleurs. Un lecteur d'écran liste les liens hors de leur texte : c'est cette liste qui juge l'intitulé. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLes liens d'évitement
Le lien d'évitement est le premier élément focalisable de la page, invisible jusqu'à ce qu'on le tabule. Il ne vaut que si sa cible peut recevoir le focus. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLe 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. Ce qu'il faut alors rendre : lecture, son, sous-titres et position — atteignables au clavier, nommés, l'état annoncé.
4 critères RGAA en jeu
Lire la ficheLa langue de la page
L'attribut lang choisit la voix qui lit la page. Sans lui, un texte français est prononcé avec les règles de l'anglais — et devient inintelligible. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheL'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. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheL'infobulle
Une infobulle décrit un élément qui porte déjà son nom — elle ne le nomme pas. Et l'attribut title n'en est pas une : il n'apparaît jamais au clavier. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLes images
Une seule question décide de tout : l'image porte-t-elle de l'information ? Selon la réponse, l'alternative transmet cette information ou reste vide — et un alt absent n'est ni l'un ni l'autre. Démo, code, critères RGAA.
7 critères RGAA en jeu
Lire la ficheLes graphiques et visualisations
Un graphique dit quelque chose qu'aucune alternative courte ne contient. La réponse tient en trois couches : le constat en alternative, la description détaillée en clair, et les données dans un tableau.
5 critères RGAA en jeu
Lire la ficheLe glisser-déposer
Aucune touche du clavier n'émet un dragstart : un glisser-déposer sans commande équivalente rend la fonctionnalité inatteignable. Deux boutons par ligne suffisent presque toujours. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLes 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. Pincement, balayage, secousse, orientation — ce que le RGAA exige, et une démo qui le montre.
5 critères RGAA en jeu
Lire la ficheLe 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 RGAA en demande moins qu'on ne croit, et pas là où on l'attend. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheL'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. Les quatre valeurs exigées, la façon de les appliquer, et la cause de presque tous les échecs.
3 critères RGAA en jeu
Lire la ficheL'en-tête et le pied de page
L'en-tête et le pied de page sont les deux régions dont la conformité ne se juge pas dans une page, mais entre plusieurs : le RGAA y exige la constance autant que le balisage. Démo comparative, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes documents en téléchargement
Un lien « Télécharger » ne dit ni ce qu'on emporte, ni qu'un fichier va s'ouvrir. Et le référentiel demande davantage : que le document lui-même soit accessible, ou qu'une version accessible l'accompagne. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLe 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é. Les seuils du RGAA se comptent en pixels rendus, et le gras bascule à 18,5 px.
3 critères RGAA en jeu
Lire la ficheLe 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. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLes 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. Ce que ce balisage sert vraiment, et pourquoi ce n'est pas d'abord le lecteur d'écran.
4 critères RGAA en jeu
Lire la ficheLe 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. Trois situations, trois balisages. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheLes champs de formulaire
Un champ sans étiquette liée est invisible pour qui ne voit pas le formulaire. Comment lier l'étiquette, l'aide et l'erreur, et annoncer ce qui a échoué. Démo, code, critères RGAA.
10 critères RGAA en jeu
Lire la ficheLe champ de recherche
Un placeholder n'est pas une étiquette, une loupe n'est pas un nom. Le champ de recherche est le cas où le référentiel a prévu qu'aucune étiquette ne soit visible — à des conditions précises, qu'il faut lire. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLe 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é. Trois attributs et un bouton suffisent à lever les deux obstacles. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLes 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. Démo, code, critères RGAA.
6 critères RGAA en jeu
Lire la ficheLe carrousel
Le carrousel est le composant qu'on installe le plus souvent sans besoin, et qui coûte le plus cher à rendre accessible. Si vous en faites un : le défilement doit pouvoir s'arrêter, et les diapositives masquées doivent l'être vraiment.
4 critères RGAA en jeu
Lire la ficheLes CAPTCHA
Un CAPTCHA visuel exclut par construction. Le RGAA impose une alternative et l'indication de la nature du test : c'est un minimum, pas une garantie d'usage. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheLes cadres
Un cadre sans titre est annoncé « cadre », et rien de plus : personne ne sait s'il faut y entrer. Le titre doit dire ce que le cadre contient — et « iframe » n'est pas un titre. Démo, code, critères RGAA.
3 critères RGAA en jeu
Lire la ficheLe bouton-menu
Un menu ARIA est fait pour des actions d'application, pas pour de la navigation. Poser role=menu sur un menu de navigation retire les liens de la liste des liens du lecteur d'écran. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la ficheL'autocomplétion
Un champ, une liste de suggestions, et un lien entre les deux qui n'existe que dans les attributs. Le point dur n'est pas d'afficher la liste : c'est de la parcourir sans jamais sortir du champ. Démo, code, critères RGAA.
5 critères RGAA en jeu
Lire la ficheL'audiodescription
L'audiodescription dit ce que l'image montre et que la bande son tait, dans les silences du dialogue. Quand elle est nécessaire, quand elle ne l'est pas, et pourquoi une transcription ne la remplace pas.
5 critères RGAA en jeu
Lire la ficheL'audio
Un fichier son seul n'a qu'une alternative : la transcription textuelle. Elle doit restituer tout ce qui est dit — et qui le dit, ce que la moitié des transcriptions d'entretien oublie.
5 critères RGAA en jeu
Lire la ficheL'arbre
C'est le composant le plus lourd en ARIA, et celui dont on a le moins souvent besoin. Une liste imbriquée avec des sections dépliables fait le même travail sans un seul rôle — voici quand l'arbre se justifie vraiment, et comment le coder alors.
5 critères RGAA en jeu
Lire la ficheL'accordéon
Un accordéon accessible tient en trois choses : un bouton natif, un état annoncé, un panneau vraiment masqué. Aucun rôle ARIA à inventer. Démo, code, critères RGAA.
4 critères RGAA en jeu
Lire la fiche