lecteur d'écran: l'ajout de texte supplémentaire pour lecteur d'écran dans selectbox

Question

Comment ajouter un texte pour lecteur d'écran ne pour qu'il se prononce

Volvo selected, Saab selected, Mercedes selected, Audi selected 

au lieu de

Volvo, Saab, Mercedes, Audi 

respectivement. Ajout

<span class="sr-only">selected</span> 

dans

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

ne permet pas.

Des idées? Je vous remercie.

Answer 1

Le texte ARIA et les étiquettes peuvent résoudre ce problème et fournir des informations pour un lecteur d'écran. Par exemple, les éléments suivants marqueraient la lettre «x» comme étant un bouton de fermeture.

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

L'exemple ci-dessus vient d'ici: Aria Label Attribute

En savoir plus sur les autres ARIA roles, attributes, and techniques.

Answer 2

Les étiquettes ARIA sont votre solution, oui. Cependant, vous ne devriez pas le faire de quelque façon que ce soit.
l'information sur ce qui est sélectionné et ce qui ne l'est pas est fournie par le lecteur d'écran lui-même. Plus que cela, si vous créez une zone de liste multi-sélection (par exemple, avec un attribut multiple), et votre utilisateur saisit la boîte et presse Shift+F8, il/elle entendra quelque chose comme ceci:

Volvo choisi Saab sélectionné sélectionné

C'est vraiment, vraiment énervant, croyez-moi. Donc ne vous embêtez pas avec cela et fournissez une boîte de liste standard accessible (multi-sélection, si nécessaire).