Incrementar un `role =“ spinbutton ”` con Voiceover

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, InputEventse activa un valor de event.typeser input, pero cuando se usa el comando de teclado VoiceOver para aumentar / disminuir, Eventse activa un tipo base con el event.typeajuste 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?

No creo que role="spinbutton"sea ​​compatible con VoiceOver, ya que parece que VoiceOver secuestra los eventos de keydown cuando se usa el cursor de VoiceOver. Entonces, cuando se enfoca en un elemento con role="spinbutton"VoiceOver, se le indica al usuario que use "Control-Option DownArrow" o "Control-Option UpArrow" para disminuir o incrementar el valor. Cuando se presionan esas teclas, el evento no llega a ningún controlador de evento KeyDown de JavaScript, por lo que no podemos detectar que esas teclas se hayan presionado y no podemos implementar el incremento o la disminución real del valor. Así que no estoy seguro de que haya alguna forma de usarlo role="spinbutton"y hacerlo funcionar con VoiceOver. El usuario recibirá instrucciones que no funcionan y será confuso.

Como solución alternativa para una aplicación en la que estoy trabajando, he implementado el comportamiento de manejo de claves descrito en las prácticas de autoría WAI ARIA para el botón giratorio, pero no he agregado role="spinbutton"ni los otros atributos aria enumerados. En cambio, he agregado aria-live="assertive"para que cuando el valor se cambie ya sea por teclado o haciendo clic en los botones de incremento / decremento, el usuario escucha el nuevo valor. Además, agregué un texto oculto visualmente que instruye al usuario sobre cómo aumentar / disminuir el valor con el teclado y lo asocié con la entrada usando aria-describedby.

Acabo de visitar el ejemplo del botón giratorio de w3 , y parece funcionar con el teclado en VoiceOver Mac (OS versión 10.15.1 con Safari). Puede inspeccionar el código que han usado y obtener inspiración allí.

Sin embargo, el ejemplo del botón giratorio w3 no anuncia el valor actual cuando el paso a paso recibe el foco, o los cambios a medida que avanza y baja . Probé la configuración de verbosidad media y alta sin suerte.

Esta falla al anunciar el valor (uno aria-valuetexto aria-valuenowquizás ambos) parece ser un error del lado de Apple, así que solo lo informé. Buena atrapada.

Esto podría ser pirateado con una región aria-live, pero podría terminar con anuncios duplicados en otras combinaciones de navegador / lector de pantalla.