Comment utiliser aria pour étiqueter un bouton avec du texte non-intuitif Tabel

Question

J'ai un bouton qui ressemble à ceci:

<button type="button"> 
    Remove 
</button> 

Contextuellement, les utilisateurs qui voient seront en mesure de dire que le bouton se réfère à un produit spécifique qu'ils peuvent retirer. Cependant, pour les utilisateurs ayant une déficience visuelle, le texte «Supprimer» n'est pas suffisant pour être utile en ce qui concerne ce qu'ils suppriment.

Je sais que aria-label est, selon le MDN web docs, censé être utilisé comme suit:

utiliser dans les cas où une étiquette de texte n'est pas visible à l'écran

J'ai aussi sachez que aria-labelledby est supposé être utilisé pour associer un autre balisage à l'élément étiqueté. Cependant, dans le cas de mon bouton, le bouton lui-même contient l'étiquette. Il se trouve que l'étiquette elle-même n'est pas assez descriptive. À ce stade, vous demandez peut-être pourquoi je ne change pas seulement le texte du bouton! Il se trouve juste que l'équipe UX ne veut pas changer le texte du bouton visible, donc je suis en train d'essayer de comprendre l'accessibilité pour le bouton sans changer la partie visible du bouton.

De toute façon, y a-t-il une spécification définie sur ce qu'il faut faire dans ce type de situation? Mon penchant est d'utiliser aria-label, mais je ne suis pas certain que ce soit conforme ARIA en soi.

Merci d'avance!

Answer 1

Quoi qu'il en soit, existe-t-il une spécification définie sur ce qu'il faut faire dans ce type de situation? Mon penchant est d'utiliser l'étiquette d'aria, mais je ne suis pas sûr que ce soit conforme à l'ARIA en tant que tel.

Oui, vous pouvez.

L'attribut aria-label sera utilisé et remplacera le texte intérieur.

Spécifications pour le texte Alternative Computation ne définissent que aria-label seront utilisés en priorité (à l'étape 2C) tandis que le contenu ne sera utilisée que si ce ne présente (étape 2F)

Answer 2

Oui, vous pouvez utiliser label aria. Habituellement, il a la priorité sur le texte ou le texte visible à l'intérieur de l'élément (vrai avec JFW, NVDA, VO dans la plupart des cas, sauf lorsque les paramètres personnalisés ont été définis).

<button aria-label="Remove article XYZ">Remove</button> 

Comme attribut alt pour les images, assurez-vous que le label aria suffit per ce, à savoir le texte visible ou texte à l'intérieur de l'élément sera très probablement pas être parlé, il est complètement remplacé par le aria -étiquette. Pour notre exemple ici, le mot "Supprimer" doit être présent dans l'étiquette.

Comme alternative au lieu de label aria, vous pouvez également utiliser une classe CSS pour rendre le texte soit parlée que par les lecteurs d'écran:

<button>Remove <span class="sr-only">XYZ</span></button> 

Vous trouverez le code CSS correspondant dans des cadres comme bootstrap. Dans ce cas, le texte visible et le texte spécifique au lecteur d'écran sont prononcés l'un après l'autre. Assurez-vous que les mots ne sont pas collés ensemble, sinon il pourrait y avoir des problèmes de prononciation.