Diga ao leitor de canvas que a página foi alterada no aplicativo Backbone / Angular de página única

Imagine que você tenha um aplicativo simples de uma única página – independentemente de ter sido escrito usando Backbone, Angular, Ember ou qualquer outra coisa.

Como você pode dizer a um leitor de canvas que alteramos a ‘página’ quando uma rota é seguida?

Em um aplicativo clássico, quando navego de /index.html para /about.html o leitor de canvas, obviamente, detecta a alteração da página e faz uma nova leitura conforme o esperado.

No meu aplicativo Backbone, no entanto, quando eu sigo uma rota, não consigo descobrir como triggersr uma ‘releitura’. Eu tentei acionar um evento de focus que eu tinha visto em algum lugar, mas isso não parece funcionar.

Nota: Atualmente estou testando com o NVDA / Chrome.

No geral, você não precisa ativar uma “releitura” e, dependendo da sua interface do usuário, pode não ser uma boa coisa.

Minha experiência foi com o angular.js (como uma pessoa de acessibilidade em vez do desenvolvedor), e nossa abordagem geral era gerenciar o foco em vez de acionar uma releitura. (Nós fazemos extensos testes de acessibilidade.)

A principal coisa do ponto de vista da interface do usuário (principalmente para usuários de leitor de canvas) é que selecionar um link (por exemplo, about.html ) deve levá-lo a algum lugar.

Nesse caso, o local apropriado para colocar o foco seria o topo da área de conteúdo da “página”, esperançosamente, um

.

Para que isso funcione, o elemento de destino deve ser focável por meio de um script, então, provavelmente, ele precisa de tabindex menos que seja um link ou controle de formulário:

 

O -1 significa que ele não está na ordem de tabulação padrão, mas é focável por meio de um script. Veja mais em práticas de autoria da WAI-ARIA .

Então, no final da function que carrega o novo conteúdo, incluindo o atributo tabindex, adicione algo como:

 $('#test').attr('tabindex', '-1').css('outline', 'none'); $('#test').focus(); 

Ao adicionar tabindex dinamicamente, é melhor fazê-lo em uma linha antes da function focus() , caso contrário, pode não funcionar (lembro-me disso de testar com o JAWS).

Para testar isso eu usaria:

  • NVDA e Firefox, Windows
  • Maxilas e IE, Windows

Também é bom testar com o VoiceOver no Safari / OSX, mas isso funciona de maneira diferente e pode não atingir os mesmos problemas que um leitor de canvas baseado em Windows.

Você terá muitos problemas com o Chrome / NVDA, pois isso não é suportado muito bem, e é muito improvável que os usuários finais o usem. IE está ok com o NVDA, mas o Firefox é o melhor .

No geral, vale a pena conhecer as práticas de criação do WAI-ARIA, particularmente Usando o ARIA em HTML . Mesmo que você esteja usando um aplicativo JS, o navegador (e, portanto, o leitor de canvas) está interpretando o HTML resultante para que o conselho continue relevante.

Por fim, se você estiver atualizando o conteúdo da página sem que o usuário pressione espaço / enter para ativar alguma coisa, você poderá descobrir que o JAWS / NVDA não sabe sobre o novo conteúdo, já que o ‘buffer virtual’ não foi atualizado. Nesse caso, talvez seja necessário adicionar um shim JS para atualizá-los , mas somente se você tiver problemas no teste, ele não deverá ser um patch global.

Tomando a resposta de @AlastairC , e os comentários abaixo dela. Eu levei isso um pouco mais longe agora e estou indo com isso como minha solução daqui para frente:


Minha solução de encaminhamento

Eu descobri que apenas ler o primeiro título não era tão útil assim. Especialmente se a última página em que você estava era uma sequência de carregamento. Você pode ouvir que algo novo foi focado, mas certamente não está claro que isso faz parte de uma página inteira.

Adicione algum texto descritivo e útil à página

Como tal, agora tenho um único parágrafo no topo do meu modelo de layout de página. Isso inclui uma mensagem amigável do leitor de canvas, juntamente com uma visão geral muito aproximada do que a página.

 

The Dashboard page is now on-screen. It contains several widgets for summarizing your data.

Observe que o valor tabindex nos permite focar esse elemento com JavaScript. Você pode não querer usar um elemento p para isso, você pode usar qualquer coisa que você gosta realmente.

Escondê-lo fora da canvas (opcional, necessário apenas se ele quebrasse seu design / legibilidade)

Isso é então acoplado ao CSS para mover esse elemento para fora da canvas:

 .screenreader-summary { position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; outline: none; /* Important, don't show an outline on-focus */ } 

Focar este elemento, quando uma nova página é mostrada na canvas

Finalmente, no código JavaScript que mostra sua página na canvas (por exemplo, em MarionetteJS usando onShow ou o evento show ):

 $yourViewEl.find('.screenreader-summary').focus(); 

O resultado

Eu sou uma pessoa com visão, então pegue o que eu digo com uma pitada de sal – no entanto, descobri que ler uma breve descrição é muito mais útil.

Para angular o URL muda, se alguém REALMENTE precisa reler tudo (como eu por causa dos requisitos), o que foi o truque para nós foi este:

 $(window).on('hashchange', function () { location.reload(); }); 

e acabamos de adicionar código extra para lidar com páginas como “sucesso”, caso nenhuma recarga deva acontecer. isso simula o carregamento real da página e os leitores de canvas o lerão normalmente como uma alteração de página. tipo de derrota o propósito de angular de certa forma, mas isso vai ajudar pessoas como eu que já têm o aplicativo e querem uma solução rápida.

Intereting Posts