Estou lutando para implementar uma entrada acessível com comportamentos de incremento / decremento, usando um <input type="text" role="spinbutton" />
elemento em HTML / JavaScript. Mas parece que, com o VoiceOver, existem eventos de entrada personalizados (falsos?) Para aumentar / diminuir, que alteram o valor da entrada de maneiras inesperadas.
Como garantir que um usuário que navegue na página com tecnologia assistiva não receba orientações ruins do VoiceOver ao tentar interagir com meu widget?
Por exemplo, usando código super aparado 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>
... O VoiceOver descreverá a entrada como um "passo a passo" e fornecerá instruções sobre como aumentar / diminuir usando o teclado. Mas o uso desses comandos de teclado resulta em uma matemática estranha, como pode ser visto nesta tela:
Você também pode ver (no "registro" na tampa da tela) que, quando o usuário digita a entrada, um InputEvent
é acionado por event.type
ser input
- mas quando o comando do teclado do VoiceOver para incremento / decréscimo é usado, um tipo de base Event
é acionado com event.type
novamente definido para input
.
E isso não parece exclusivo das minhas implementações de role="spinbutton"
. O botão giratório da interface do usuário do jQuery não se comporta bem quando incrementado / diminuído usando os comandos de teclado do VoiceOver:
Eu até tentei alguns exemplos do w3c para role="spinbutton"
:
- O widget de tamanho da fonte em https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html
- O selecionador de data em https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html
... e mesmo que o VoiceOver tenha descrito cada um desses controles da interface do usuário como um "passo a passo" e tenha fornecido instruções sobre como incrementá-los / diminuí-los usando o teclado, essas instruções não pareciam funcionar. Outros comportamentos de teclado funcionaram - mas os que o VoiceOver sugere não.
O que posso fazer para garantir que a role="spinbutton"
marcação funcione corretamente com os comandos de teclado de incremento / decremento do VoiceOver?