Incrementando um `role =" botão giratório "` com Voiceover

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.typeser input- mas quando o comando do teclado do VoiceOver para incremento / decréscimo é usado, um tipo de base Eventé acionado com event.typenovamente 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?

Não acredito que role="spinbutton"seja compatível com o VoiceOver, pois parece que o VoiceOver seqüestra os eventos de pressionamento de tecla ao usar o cursor do VoiceOver. Portanto, ao focar em um elemento com o role="spinbutton"VoiceOver, o usuário deve usar "Control-Option DownArrow" ou "Control-Option DownArrow" para diminuir ou aumentar o valor. Quando essas teclas são pressionadas, o evento não chega a nenhum manipulador de eventos keyDown do JavaScript, portanto não podemos detectar que essas teclas foram pressionadas e não podemos implementar o incremento ou decremento real do valor. Portanto, não tenho certeza de que haja alguma maneira de usar role="spinbutton"e fazê-lo funcionar com o VoiceOver. O usuário receberá instruções que não funcionam e serão confusas.

Como solução alternativa para um aplicativo em que estou trabalhando, implementei o comportamento de manipulação de chaves descrito nas práticas de autoria do WAI ARIA para o botão de rotação, mas não adicionei role="spinbutton"ou os outros atributos da ária listados. Em vez disso, adicionei aria-live="assertive"que, quando o valor for alterado pelo teclado ou clicando nos botões de incremento / decremento, o usuário ouvirá o novo valor. Além disso, adicionei algum texto visualmente oculto que instrui o usuário sobre como aumentar / diminuir o valor com o teclado e o associou à entrada usando aria-describedby.

Acabei de visitar o exemplo do botão giratório do w3 , e parece que o teclado pode ser operado no VoiceOver Mac (versão do SO 10.15.1 com Safari). Você pode inspecionar o código que eles usaram e obter inspiração lá.

No entanto, o exemplo do botão giratório w3 não anuncia o valor atual quando o stepper recebe o foco ou as alterações à medida que você sobe e desce . Tentei configurações de verbosidade Média e Alta sem sorte.

Esse fracasso em anunciar o valor (um aria-valuetextou aria-valuenowoutro) talvez pareça um bug do lado da Apple, então acabei de denunciá-lo. Boa pegada.

Talvez isso possa ser hackeado com uma região de ária, mas você pode acabar com anúncios duplicados em outras combinações de navegador / leitor de tela.