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 InputEvent
mit " event.type
Sein" ausgelöst wird. input
Wenn jedoch der VoiceOver-Tastaturbefehl zum Inkrementieren / Dekrementieren verwendet wird, wird ein Basistyp Event
mit event.type
erneutem 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?
quelle