Série Bases RGAA · Épisode 4 · 4 min

Lecteur d’écran et nom accessible

Nom accessible, boutons icônes, liens, usage raisonné d’ARIA.

Publié le 27 juillet 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Un lecteur d’écran ne décrit pas la page comme une capture d’écran. Il restitue une structure et des noms : titres, liens, boutons, champs, images. Si un bouton n’est qu’une icône sans nom, l’utilisateur entend souvent « bouton », point. Si un lien dit seulement « cliquez ici », le contexte disparaît hors de la phrase. Comprendre le nom accessible, c’est comprendre ce qui est vraiment annoncé.

Les lecteurs d’écran

Posons d’abord l’outil. Un lecteur d’écran, c’est un logiciel qui restitue l’interface en synthèse vocale ou en braille. Les plus répandus : NVDA, gratuit et open source, sur Windows. JAWS, la référence historique payante, sur Windows aussi. VoiceOver, intégré à macOS et iOS. Et TalkBack sur Android. L’utilisateur ne balaie pas la page à la souris : il navigue au clavier ou par gestes, d’élément en élément, et écoute ce que l’interface annonce.

Ce qui est annoncé

Le nom accessible, c’est ce qui identifie un élément pour les technologies d’assistance. Un champ, un bouton, un lien, une image informative : chacun a besoin d’un nom pertinent. Et quand un libellé est visible à l’écran, ce que le lecteur d’écran annonce doit coller à ce que l’utilisateur voit. Sinon, la navigation devient un casse-tête.

Nom accessible

Le navigateur calcule le nom accessible selon un ordre de priorité. En simplifiant : aria-labelledby, puis aria-label, puis le contenu natif comme le texte du bouton, le label d’un champ ou l’alt d’une image, et le title en dernier recours. Si tu empiles des techniques qui se contredisent, tu obtiens souvent des surprises. Une source claire vaut mieux que trois couches floues.

Bouton icône

Voici le piège du bouton icône. À gauche, une loupe sans nom : le lecteur d’écran annonce souvent juste « bouton ». À droite, le même contrôle avec un nom accessible : « Rechercher, bouton ». L’icône reste visible, mais l’action devient claire. C’est ce que le code va rendre explicite ensuite. En code, le motif est simple. Sans nom, le lecteur d’écran reste vague. Avec un aria-label pertinent, ou un texte visible, l’action devient claire. Et l’icône purement décorative peut être masquée aux technologies d’assistance pour ne pas polluer l’annonce. Les liens suivent la même logique. « Cliquez ici » peut sembler clair dans une phrase. Mais un lecteur d’écran propose souvent une liste de liens : là, « cliquez ici » ne dit plus rien. Un intitulé autonome comme « Voir les tarifs 2026 » fonctionne seul. C’est plus clair pour tout le monde, pas seulement pour les technologies d’assistance.

ARIA

ARIA n’est pas une baguette magique. Si tu peux utiliser un élément HTML natif, commence par là. ARIA sert quand le natif ne suffit pas, ou pour des composants riches. Un rôle ARIA sans clavier, ou un aria-hidden sur un élément focusable, crée de nouveaux problèmes. Moins d’ARIA bien placé vaut mieux que beaucoup d’ARIA approximatif.

Checklist

Avant de livrer un composant, vérifie : chaque contrôle a un nom pertinent, les images informatives ont une alternative utile, les liens se comprennent seuls, et tu as testé un parcours réel avec un lecteur d’écran. Même un test court change la qualité du rendu.

À retenir

À retenir. Le lecteur d’écran annonce des noms et une structure, pas ton design. Donne un nom clair à chaque contrôle, préfère le HTML natif, utilise ARIA avec méthode, et teste un vrai parcours. Prochain épisode : les images et leurs alternatives.

CTA

Écoute une page clé avec un lecteur d’écran. Note ce qui est absurde ou muet. Puis corrige. Pour explorer le référentiel et analyser un site, rendez-vous sur rgaa-checker.com.

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA