Des libellés clairs, un véritable accès : pourquoi les éléments non libellés constituent une barrière numérique majeure 

Éléments non libellés ou mal libellés

Je m’appelle Randy Brown. Je suis malvoyant et j’exerce comme auditeur-testeur en accessibilité numérique. Grâce à mon expérience quotidienne d’utilisateur de lecteur d’écran, j’ai constaté que les éléments non libellés représentent l’une des barrières d’accès les plus importantes pour les utilisateurs de lecteurs d’écran et de technologies de saisie vocale.

Dans cet article, j’explique l’impact concret et souvent sous-estimé des éléments non libellés ou mal libellés sur les utilisateurs de technologies d’assistance, et pourquoi leur correction est indispensable pour créer des contenus numériques réellement accessibles.

Au cours des dix-sept années durant lesquelles j’ai utilisé des lecteurs d’écran, il m’est arrivé à de nombreuses reprises d’être empêché d’accomplir des tâches personnelles importantes à cause d’éléments non libellés ou mal libellés.

Par exemple, lors de l’utilisation d’une application bancaire, le bouton « Retour » était mal libellé. Au lieu d’annoncer « Bouton retour », mon lecteur d’écran indiquait « Bouton icône croix ». Cette information était ambiguë et ne me permettait pas de comprendre comment revenir à l’écran précédent. Finalement, j’ai dû demander de l’aide à une personne voyante, ce qui lui a donné accès à mes informations financières privées, simplement parce qu’un libellé était incorrect.

Un libellé précis n’est pas un détail mineur : il est essentiel.

Des libellés clairs et exacts :

• protègent la vie privée des utilisateurs
• sécurisent les données confidentielles
• réduisent les risques d’exploitation

C’est particulièrement important pour les personnes en situation de handicap, qui peuvent être plus vulnérables dans les environnements numériques.

Des libellés clairs : pourquoi est-ce important ?

Vous est-il déjà arrivé de demander votre chemin à quelqu’un, pour découvrir que la personne ne savait pas où aller ou vous donnait des indications vagues ?

Cela nous est probablement arrivé à tous. Lorsque les informations sont imprécises ou insuffisantes, nous nous retrouvons dans l’incertitude, à deviner, voire à ressentir de la frustration.

C’est exactement ce que vivent les utilisateurs de lecteurs d’écran lorsque les éléments interactifs ne sont pas correctement libellés.

En tant qu’auditeur-testeur en accessibilité numérique et utilisateur de lecteur d’écran, l’un des problèmes les plus fréquents que je rencontre sur le web est le suivant :

Les développeurs s’appuient sur le texte environnant pour fournir du contexte aux libellés.

Or, les lecteurs d’écran n’interprètent pas le texte environnant comme faisant partie du libellé d’un élément. Ils lisent uniquement le libellé explicitement associé à cet élément.

Pourquoi les libellés doivent être associés aux éléments ?

Les libellés d’éléments sont essentiels pour l’accessibilité numérique avec lecteur d’écran, car ils transforment le code HTML sous-jacent en une expérience numérique navigable et compréhensible.

Voici cinq raisons principales pour lesquelles ils sont indispensables.

1. Ils annoncent clairement les champs de formulaire

Lorsqu’un utilisateur navigue avec la touche Tab vers un champ de formulaire, le lecteur d’écran annonce automatiquement son libellé.

Sans libellé, l’utilisateur entend :

« Zone d’édition vide »

Avec un libellé :

« Adresse e-mail, zone d’édition »

2. Ils fournissent une information persistante

Contrairement au placeholder (texte indicatif dans un champ), qui disparaît dès que l’utilisateur commence à saisir du texte, un libellé HTML correct reste toujours accessible et lisible par le lecteur d’écran.

C’est crucial lorsqu’un utilisateur souhaite relire ou modifier un formulaire.

3. Ils fournissent du contexte pour la navigation non visuelle

Les libellés permettent aux lecteurs d’écran de comprendre les relations entre les éléments.

Par exemple, l’utilisation des éléments HTML <fieldset> et <legend> permet de libeller un groupe de boutons radio.

Cela indique à l’utilisateur qu’une case appartient à une question précise, plutôt que d’annoncer simplement et sans contexte :

« Case à cocher non cochée »

4. Ils facilitent une navigation efficace

Les utilisateurs de lecteurs d’écran naviguent souvent au clavier d’un champ à l’autre. Un libellé correctement associé au composant garantit que le nom du champ est annoncé, permettant aux utilisateurs de parcourir rapidement un formulaire et d’en comprendre le contenu.

5. Ils donnent du sens aux liens et aux boutons

Un bouton intitulé :

« Cliquez ici »

n’apporte aucun contexte lorsqu’il est entendu isolément.

En revanche, un bouton intitulé :

« Télécharger le rapport annuel »

communique immédiatement sa fonction.

Comment fonctionne un lecteur d’écran ?

Les lecteurs d’écran sont des technologies d’assistance qui interprètent le code et la structure d’un contenu numérique afin de le restituer dans un format accessible.

Ils ne « voient » pas une page web visuellement. Ils lisent plutôt la structure HTML sous-jacente :

• titres
• liens
• boutons
• listes
• tableaux
• images
• champs de formulaire

Ces informations sont ensuite converties en synthèse vocale ou en braille.

Les utilisateurs naviguent généralement au clavier plutôt qu’à la souris.

Quelques exemples de raccourcis courants :

• Tab : passer d’un élément interactif à un autre
• H : aller au titre suivant
• B : aller au bouton suivant
• U / V : aller aux liens visités ou non visités
• F : aller au champ de formulaire suivant

Ces raccourcis permettent de parcourir rapidement une page sans devoir écouter chaque mot.

Pourquoi je teste les libellés avec un lecteur d’écran

Voici un point essentiel : c’est la seule manière de vérifier que le libellé accessible est correct. Ce que vous voyez à l’écran n’est pas toujours ce que le lecteur d’écran annonce.

Par exemple, un bouton peut afficher visuellement une icône loupe 🔍. Mais s’il ne possède pas de libellé accessible, le lecteur d’écran annoncera :

« Bouton »

au lieu de :

« Bouton recherche »

Pour notre audit d’accessibilité, lorsque je teste avec un lecteur d’écran, je vérifie :

• que le libellé correct est exposé
• qu’il est compréhensible
• qu’il n’est pas manquant
• qu’il n’est pas redondant

Je teste les éléments pour détecter les associations manquantes

Cela permet d’identifier des problèmes comme :

• un <label> non associé correctement à un <input>
• un placeholder utilisé à la place d’un libellé
• un aria-label incorrect
• des identifiants dupliqués
• des libellés cachés mais inaccessibles

Ces problèmes ne peuvent être détectés de manière fiable qu’avec un lecteur d’écran.

Je vérifie également les libellés trompeurs

Exemple — le texte visuel indique :

« Envoyer »

Mais le lecteur d’écran annonce :

« Button Button »

ou pire :

« Clickable 12 »

Ces erreurs ne peuvent être détectées qu’en écoutant le lecteur d’écran.

Je teste aussi le contexte

Les lecteurs d’écran naviguent souvent par :

• ordre de tabulation
• liste des champs de formulaire
• liste des boutons
• liste des liens
• liste des titres

Un libellé peut exister techniquement, mais :

• ne pas être compréhensible hors contexte
• être ambigu lorsqu’il est lu seul
• être dupliqué sur plusieurs éléments

Je teste donc pour vérifier que les libellés sont compréhensibles de manière autonome.

APIs d’accessibilité ≠ interface visuelle

Conformément au RGAA 4.1 , les navigateurs exposent les informations d’accessibilité via :

• l’arbre d’accessibilité (Accessibility Tree)
• les attributs ARIA
• les sémantiques natives HTML

Parfois, le DOM paraît correct, mais l’arbre d’accessibilité est incorrect. Les lecteurs d’écran lisent uniquement l’arbre d’accessibilité, pas la mise en page visuelle. Si un libellé ne peut pas être compris indépendamment, il échoue à la fois en termes d’utilisabilité et d’accessibilité.

Points clés à retenir

• Les éléments non libellés constituent l’une des plus grandes barrières numériques.
• Ils peuvent empêcher l’accès à des tâches essentielles comme :
  • les opérations bancaires
  • les candidatures à l’emploi
  • l’accès aux services de santé.
• Des libellés incorrects compromettent l’autonomie et la confidentialité.
• Un élément mal libellé peut obliger un utilisateur à demander de l’aide, exposant ainsi des informations personnelles.
• Les lecteurs d’écran reposent sur le code, pas sur l’apparence visuelle.
• Ils lisent uniquement les libellés associés de manière programmatique.
• Les placeholders ne sont pas des libellés.
• Sans association HTML correcte, les utilisateurs sont contraints de deviner.
• Des libellés clairs améliorent l’efficacité et la confiance dans l’utilisation.
• Ce que vous voyez n’est pas ce que l’utilisateur entend.
• Seuls les tests avec lecteur d’écran révèlent les libellés manquants, trompeurs ou dupliqués.
• Les libellés accessibles sont fondamentaux, pas optionnels.
• Ils protègent la confidentialité, améliorent l’utilisabilité et favorisent l’égalité numérique.

Conclusion

Des libellés clairs et correctement associés dans le code transforment une expérience numérique confuse et excluante en une expérience sûre, efficace et autonomisante.

Les libellés accessibles ne sont pas un simple détail technique. Ils constituent le fondement de l’autonomie numérique. Et pour les millions de personnes qui utilisent chaque jour des technologies d’assistance, ils sont essentiels.