web-dev-qa-db-fra.com

Icône uniquement vs texte et icône

Je travaille sur un projet maintenant mais je ne sais pas si une icône seule est accessible (AA) ou si elle doit être accompagnée de texte?

Qui répondrait aux normes WCAG AA?

iconsaccessibilitytextwcag
2
UIO

Normalement, mon conseil serait de toujours associer une icône avec du texte à l'écran, ce qui rend les deux cliquables. De cette façon, vous pouvez utiliser un attribut aria-hidden pour masquer l'icône pour les lecteurs d'écran, qui laisse simplement le lien texte pour les lecteurs d'écran audio.

Cependant, s'il n'est pas possible de le faire, vous devez considérer que quelqu'un ne peut pas voir l'écran car il utilise un lecteur d'écran audio, vous devez donc vous assurer qu'il existe un équivalent texte pour l'icône, de sorte que l'écran audio l'utilisateur du lecteur peut comprendre sa signification. Ceci est couvert par WCAG 2.0 Guideline 1.1.1 Non-text Content , et est une exigence de niveau A (rappelez-vous, si vous voulez répondre aux AA, cela signifie répondre à tous Niveau A et tous niveau AA requis).

Un équivalent texte dépendra du format de votre icône.

9
SteveD

Le texte est important, car pour certains utilisateurs qui utiliseraient votre projet se confondraient avec uniquement des icônes, cela conduirait à une mauvaise expérience utilisateur. Mais là encore, si votre projet contient déjà trop de données à afficher (sur chaque page), l'ajout de textes supplémentaires uniquement pour les icônes peut regrouper votre écran avec trop de choses, donc à mon avis,

  1. Si le contenu de votre page est lourdement chargé de données, vous ne devez pas ajouter de texte et simplement conserver l'icône (mais lorsque l'utilisateur survole l'icône, vous pouvez y afficher un texte représentant cette icône).
  2. S'il n'y a pas beaucoup de contenu affiché sur une seule page, vous pouvez utiliser le texte et les icônes à la fois, car cela ne regroupera pas votre écran avec trop de choses
0
Siddhesh Dighe