Aplicativos de página única representam um desafio significativo de acessibilidade quando se trata de comunicar mudanças de visualização. Sem uma atualização de página, os leitores de tela não detectam essas importantes alterações da IU, deixando os usuários com deficiência visual confusos e desatentos.
Uma solução é criar uma mensagem com base no título da página e aproveitar uma região ativa ARIA para anunciar explicitamente, por meio de uma mensagem útil, que uma nova visualização foi carregada. Primeiro crie uma função que é chamada quando viewContent é atualizado. O AngularJS fornece um evento $ viewContentLoaded para esse propósito. No código do controlador, ouça o evento e chame uma função (em CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, announce_view_loaded
Na função announce_view_loaded, atualize o título da página e anuncie a mensagem. Embora estruturas de página única não atualizem automaticamente os títulos das páginas, manter o título da página sincronizado com a visualização atual melhora a compreensão dos usuários sobre a visualização.
Uma maneira de fazer isso é usar um atributo de dados em algum lugar da visualização para armazenar o título da visualização:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Agora crie uma mensagem usando o título da página atualizado e anuncie-a:
$ .announce (document.title + ’, visualização carregada’)
$ .announce () é uma função jQuery que usa uma única região não visível ao vivo para anunciar o conteúdo. Essa abordagem ajuda a simplificar o código e os esforços de depuração em comparação com o uso ad hoc de regiões ativas. No entanto, existem algumas práticas recomendadas a serem lembradas.
Primeiro, crie uma única região ao vivo de "anunciante" em sua página para anunciar conteúdo usando aria-live = "polite | assertive". Não use nenhuma outra região ativa, incluindo funções de região ativa (por exemplo, role = "alert | timer | log"). Um exemplo de região viva:
div aria-live = "polite" id = "announcer"> (O texto adicionado ou atualizado aqui será anunciado) / div>
Em segundo lugar, limpe o conteúdo da região ativa logo após atualizar o conteúdo. Isso evita que os usuários tropecem em mensagens antigas.
Finalmente, como com qualquer técnica de acessibilidade, use $ .announce () criteriosamente. Deve ser usado apenas para comunicar atualizações significativas da IU.
Palavras: Patrick Fox
Patrick Fox é diretor de tecnologia de IU da Web da Razorfish em Austin. Este artigo apareceu originalmente na edição 271 da net magazine.
Gostou disso? Leia isso!
- O guia do designer para acessibilidade digital
- As melhores fontes de script grátis
- Seleção gratuita de fontes de graffiti
