Inkrementieren einer Rolle = Drehknopf mit Voiceover

Ich habe Probleme, eine zugängliche Eingabe mit Inkrementierungs- / Dekrementierungsverhalten mithilfe eines <input type="text" role="spinbutton" />Elements in HTML / JavaScript zu implementieren . Es scheint jedoch, dass es bei VoiceOver benutzerdefinierte (gefälschte?) Eingabeereignisse zum Inkrementieren / Dekrementieren gibt, die den Wert der Eingabe auf unerwartete Weise ändern.

Wie stelle ich sicher, dass ein Benutzer, der mit Hilfstechnologie auf der Seite navigiert, keine schlechte Anleitung von VoiceOver erhält, während er versucht, mit meinem Widget zu interagieren?

Verwenden Sie beispielsweise den folgenden Code:

function logIt(...args) {
  document.getElementById('output').appendChild(
    document.createTextNode(`${args.join(', ')}\n`)
  );
}

document.getElementById("myInput").addEventListener('input', (e) => {
  debugger;
  logIt(e.type, e.data, String(e));
  e.target.setAttribute('aria-valuenow', e.target.value);
}, false);

document.getElementById("myInput").addEventListener('keydown', (e) => {
  logIt(e.type, e.data, String(e));
}, false);

      <input
        id="myInput"
        type="text"
        role="spinbutton"
        autocomplete="off"
        defaultValue="1"
        aria-valuenow="1"
        aria-valuemin="0"
        aria-valuemax="100"
      />
    </div>
    <pre id="output"></pre>

... VoiceOver beschreibt die Eingabe als "Stepper" und gibt Anweisungen zum Inkrementieren / Dekrementieren über die Tastatur. Die Verwendung dieser Tastaturbefehle führt jedoch zu einer seltsamen Mathematik, wie in dieser Bildschirmkappe dargestellt:

Sie können auch (anhand der "Protokollierung" in der Bildschirmkappe) sehen, dass beim Eingeben des Benutzers eine Eingabe InputEventmit " event.typeSein" ausgelöst wird. inputWenn jedoch der VoiceOver-Tastaturbefehl zum Inkrementieren / Dekrementieren verwendet wird, wird ein Basistyp Eventmit event.typeerneutem Setzen ausgelöst zu input.

Und dies scheint nicht nur für meine Implementierungen von zu gelten role="spinbutton". Der jQuery UI-Spinner verhält sich nicht gut, wenn er mit VoiceOver-Tastaturbefehlen inkrementiert / dekrementiert wird:

Ich habe sogar einige Beispiele des w3c ausprobiert für role="spinbutton":

• Das Widget für die Schriftgröße unter https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html
• Die Datumsauswahl unter https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html

... und obwohl VoiceOver jedes dieser UI-Steuerelemente als "Stepper" beschrieb und Anweisungen zum Inkrementieren / Dekrementieren über die Tastatur gab, schienen diese Anweisungen nicht zu funktionieren. Andere Tastaturverhalten haben funktioniert - die von VoiceOver vorgeschlagenen jedoch nicht.

Was kann ich tun, um sicherzustellen, dass das role="spinbutton"Markup mit den VoiceOver-Tastaturbefehlen zum Inkrementieren / Dekrementieren ordnungsgemäß funktioniert?

Ich glaube nicht, dass role="spinbutton"es mit VoiceOver kompatibel ist, da VoiceOver anscheinend die Keydown-Ereignisse entführt, wenn der VoiceOver-Cursor verwendet wird. Wenn Sie sich also mit role="spinbutton"VoiceOver auf ein Element konzentrieren, wird der Benutzer angewiesen, "Control-Option DownArrow" oder "Control-Option UpArrow" zu verwenden, um den Wert zu verringern oder zu erhöhen. Wenn diese Tasten gedrückt werden, gelangt das Ereignis nicht zu einem JavaScript keyDown-Ereignishandler, sodass wir nicht erkennen können, dass diese Tasten gedrückt wurden, und das tatsächliche Inkrementieren oder Dekrementieren des Werts nicht implementieren können. Ich bin mir also nicht sicher, ob es eine Möglichkeit gibt, role="spinbutton"VoiceOver zu verwenden. Der Benutzer erhält Anweisungen, die nicht funktionieren und verwirrend sind.

Als Problemumgehung für eine Anwendung, an der ich arbeite, habe ich das in den WAI ARIA-Authoring-Praktiken für Spinbutton beschriebene Schlüsselbehandlungsverhalten implementiert, aber keine role="spinbutton"oder andere Arienattribute hinzugefügt . Stattdessen habe ich hinzugefügt aria-live="assertive", dass der Benutzer den neuen Wert hört, wenn der Wert entweder über die Tastatur oder durch Klicken auf die Inkrementierungs- / Dekrementierungsschaltflächen geändert wird. Zusätzlich habe ich visuell ausgeblendeten Text hinzugefügt, der den Benutzer anweist, wie der Wert mit der Tastatur erhöht / verringert werden soll, und der mit der Eingabe verknüpft wird aria-describedby.

Ich habe gerade das Spinbutton-Beispiel von w3 besucht und es scheint in VoiceOver Mac (OS Version 10.15.1 mit Safari) über die Tastatur bedienbar zu sein. Sie können den von ihnen verwendeten Code überprüfen und sich dort inspirieren lassen.

Das Beispiel für den w3-Spinbutton gibt jedoch nicht den aktuellen Wert an, wenn der Stepper den Fokus erhält, oder die Änderungen, wenn Sie auf und ab gehen . Ich habe die Einstellungen für mittlere und hohe Ausführlichkeit ohne Glück ausprobiert.

Dieses Versäumnis, den Wert anzukündigen (einer aria-valuetextoder aria-valuenowbeide), scheint ein Fehler auf Apples Seite zu sein, daher habe ich ihn gerade gemeldet. Guter Fang.

Dies könnte möglicherweise in eine Aria-Live-Region gehackt werden, aber Sie könnten doppelte Ansagen in anderen Browser / Bildschirmleser-Kombinationen erhalten.