Bildschirmleseprogramm: Hinzufügen zusätzlicher Text für Screenreader in selectbox

Question

Wie man einen Text für Screen-Reader hinzufügen nur, so dass es

Volvo selected, Saab selected, Mercedes selected, Audi selected 

statt

Volvo, Saab, Mercedes, Audi 

jeweils ausgeprägt ist. Hinzufügen

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

in

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

hilft nicht.

Irgendwelche Ideen? Vielen Dank.

Answer 1

ARIA Text und Beschriftungen können dies lösen und Informationen für einen Bildschirmleser bereitstellen. Zum Beispiel würde der folgende Buchstabe den Buchstaben 'x' als Schließen-Schaltfläche bezeichnen.

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

Das obige Beispiel stammt von hier: Aria Label Attribute

Lesen Sie mehr über andere ARIA roles, attributes, and techniques.

Answer 2

ARIA-Etiketten sind Ihre Lösung, ja. Sie sollten dies jedoch nicht tun.
Die Informationen darüber, was ausgewählt ist und was nicht, wird vom Bildschirmleser selbst bereitgestellt. Mehr als das, wenn Sie ein Mehrfachauswahl-Listenfeld Design (dh mit einem multiple Attribute), und die Benutzer geben die Box und drücken Shift+F8, wird er/sie so etwas wie dies hört:

Volvo ausgewählt Saab ausgewählt

Das ist wirklich, wirklich nervig, glaube mir. Machen Sie sich also keine Gedanken darüber und stellen Sie ein Standard-Listenfeld zur Verfügung (Mehrfachauswahl, falls erforderlich).