Accessibilité Web - description du bouton image - solution obsolète?

Question

J'ai obtenu une sorte de test d'accessibilité (pour les utilisateurs aveugles, sourds, etc.) d'un site Web client et il y a aussi des conseils pour améliorer l'accessibilité.

Un des conseils est pour les boutons d'image:

De plus, les boutons doivent obtenir une description courte et significative, par exemple avec un texte invisible. Le texte invisible ne doit pas être marqué avec les attributs display: none et visibility: hidden. En revanche, le texte devrait être déplacé hors de la fenêtre:

<a href=”...”>[Font-Icon] <span class=“invisible“>Delete</span></a> 
.invisible { position:absolute; left:-10000px; overflow:hidden;} 

Je voudrais demander si cela est encore la solution reccomended. Cela me semble dépassé. Dois-je utiliser une balise aria au lieu de l'élément invisible, ou la solution suggérée est-elle correcte?

Answer 1

les boutons doivent obtenir une description courte et significative, par ex. avec un texte invisible.

Cela me semble dépassé.

Vous avez raison, ce n'est pas une solution. Lorsque l'on parle d'accessibilité, il n'est pas nécessaire de se concentrer uniquement sur les personnes aveugles à l'aide d'un lecteur d'écran, mais sur toutes sortes de handicaps. Déplacer un texte hors de viewport est un non-sens total. Ceci était une (mauvaise) solution pour une petite partie de la population utilisant des lecteurs d'écran quand ARIA n'était pas supporté, mais ce n'est plus une vraie solution.

La meilleure solution est encore évidemment d'écrire le texte intégral:

<a href="...">[Font-Icon] Delete</a> 

Oui, évident, mais il mérite d'être dit.

La deuxième solution consiste à utiliser l'attribut title. Pourquoi l'utiliser s'il n'est pas supporté par les lecteurs d'écran? Parce que 99% de la population n'utilise pas un lecteur d'écran. Et le "[Font-Icon]" mérite d'avoir une alternative. (Pour un meilleur soutien à l'accessibilité, cet attribut title devrait avoir un moyen d'être visible sur le focus du clavier.)

<a href="..." title="Delete">[Font-Icon]</a> 

La solution finale est d'ajouter le aria-label pour les utilisateurs lecteurs d'écran laissant les title attributs pour d'autres personnes.

<a href="..." title="Delete" aria-label="Delete">[Font-Icon]</a>