web-dev-qa-db-fra.com

Accessibilité: sr-only ou aria-label

De MDN :

Dans l'exemple ci-dessous, un bouton est conçu pour ressembler à un bouton de "fermeture" typique, avec un X au milieu. Étant donné que rien n'indique que le but du bouton est de fermer la boîte de dialogue, l'attribut aria-label est utilisé pour fournir l'étiquette à toutes les technologies d'assistance.

<button aria-label="Close" onclick="myDialog.close()">X</button>

Selon la documentation Bootstrap:

Masquer un élément sur tous les appareils à l'exception des lecteurs d'écran avec .sr uniquement

Je suppose donc que je pourrais aussi écrire:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

Dans un projet Bootstrap, comment puis-je choisir celui que je préfère?

htmltwitter-bootstrapaccessibilitywai-aria
20
CharlesM

Dans l'exemple MDN, un lecteur d'écran prononcera simplement le mot "close" puisque aria-label remplace le texte du bouton. Cela fonctionnera même si vous réutilisez le code sans Bootstrap.

Dans votre exemple, un lecteur d'écran dira "fermer x" car vous ne faites rien pour cacher le "x" aux lecteurs d'écran. Vous ajoutez également un nœud de texte pour le masquer ensuite avec une classe.

J'utiliserais l'exemple de MDN.

12
aardrian

La classe sr-only classe est pour des blocs entiers de contenu texte qui ne sont utiles qu'à ceux qui utilisent un lecteur d'écran et doivent être cachés aux autres.

Un exemple et une application sur lesquels je travaille fournissent des instructions pour l'utilisation d'un contrôleur accessible avec l'application Web:

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

Dans votre exemple, vous souhaitez simplement fournir un contenu texte différent pour un lecteur d'écran. Pour répondre à votre question spécifique, utilisez l'exemple MDN.

J'ai utilisé des aria-labels pour indiquer à un lecteur d'écran quand ajouter des pauses en suffixant les titres avec des points ou des virgules si nécessaire (En savoir plus Pause dans un lecteur d'écran pour l'accessibilité ):

<h1 aria-label="Hello World.">
  Hello World
</h1>
0
Beau Smith