JAWS liest den Wert für die Auswahlbox nicht, wenn Optionen mit der Tastatur geändert werden Pfeil nach unten

Question

Ich teste meine Webseite auf Barrierefreiheit mithilfe des JAWS-Lesegeräts. Im Folgenden finden Sie ein Beispiel für ein HTML-Markup auf meiner Seite.

<label for="MySelectBox">Select a color</label> 
<select id="MySelectBox"> 
    <option>Red</option> 
    <option>Blue</option> 
    <option>Green</option> 
</select> 

Wenn Sie die Seite über die Tastatur navigieren und die Select-Box-Wert mit Pfeiltaste nach unten zu ändern, wird JAWS Lesen der sich ändernden Werte nicht, wie Sie den Pfeil nach unten drücken.

Alles, was ich hier fehlt? Sollte ich zusätzliche ARIA-Etiketten hinzufügen, damit JAWS das Änderungsereignis erkennt?

Answer 1

Dieser scheint seltsam. Sie können dies debuggen, indem Sie zunächst eine Test-HTML-Seite erstellen, die nur den Code enthält, den Sie hier eingefügt haben, und ihn unter derselben Konfiguration testen. Wenn das funktioniert, können Sie Ihre Seite zurückgehen und über diesem Auswahlfeld nach einem falsch formatierten Markup suchen. Manchmal verursachen nicht geschlossene Tags (typische Täter: <LI> und <BR>) und fehlerhafte JavaScript/Jquery-Elementmanipulationen Probleme mit Bildschirmleseprogrammen. Wenn möglich, können Sie den HTML-Inhalt Ihrer gerenderten Seite hier veröffentlichen, damit andere sie überprüfen können.

Answer 2

Für alle anderen, die das sehen könnte, ich Mühe hatte JAWS mit lesen die ListItems auch im DropDownList gespeichert.

ich diese Prüfung nur in Chrome worden war und nachdem er die Kommentare hier getestet in Firefox und JAWS lesen die ListItems lesen würde, wenn Sie durch die DropDownList mit den Pfeiltasten durchgeblättert. Das muss ein Kompatibilitätsproblem mit Chrome sein.

Answer 3

Sie müssen dem ausgewählten Tag aria-live = "assertive" hinzufügen. Referenz: http://www.freedomscientific.com/Training/Surfs-Up/AriaLiveRegions.htm

Answer 4

JAWS nicht liest den Text von <option>Red</option>. <option>Arie Attribut haben sollte, das heißt aria-label = "Wert".
<option> Element sollte <option sein aria-label = "red" >Red</option>.