Estoy luchando por implementar una entrada accesible con comportamientos de incremento / decremento, usando un <input type="text" role="spinbutton" />
elemento en HTML / JavaScript. Pero parece que con VoiceOver hay eventos de entrada personalizados (¿falsos?) Para aumentar / disminuir que cambian el valor de la entrada de maneras inesperadas.
¿Cómo me aseguro de que un usuario que navega por la página con tecnología de asistencia no recibe una mala orientación de VoiceOver al intentar interactuar con mi widget?
Por ejemplo, usando un código súper recortado como este:
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 describirá la entrada como un "paso a paso" y dará instrucciones sobre cómo aumentar / disminuir usando el teclado. Pero usar esos comandos de teclado da como resultado algunas matemáticas extrañas, como se ve en esta tapa de pantalla:
También puede ver (a partir del "registro" en la tapa de la pantalla) que cuando el usuario escribe input, InputEvent
se activa un valor de event.type
ser input
, pero cuando se usa el comando de teclado VoiceOver para aumentar / disminuir, Event
se activa un tipo base con el event.type
ajuste de nuevo a input
.
Y esto no parece ser exclusivo de mis implementaciones de role="spinbutton"
. El spinner jQuery UI no se comporta bien cuando se incrementa / disminuye usando los comandos del teclado VoiceOver:
Incluso probé algunos de los ejemplos de w3c para role="spinbutton"
:
- El widget de tamaño de fuente en https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html
- El selector de fecha en https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html
... y aunque VoiceOver describió cada uno de esos controles de la IU como un "paso a paso" y dio instrucciones sobre cómo aumentarlos / disminuirlos usando el teclado, esas instrucciones no parecían funcionar. Otros comportamientos del teclado funcionaron, pero los que VoiceOver sugiere no.
¿Qué puedo hacer para asegurarme de que el role="spinbutton"
marcado funciona correctamente con los comandos de teclado de aumento / disminución de VoiceOver?