Quais são as implicações de acessibilidade do uso de um framework como o angularjs?

Onde estamos

Estamos sob um impulso para a acessibilidade na Web, a fim de estar em conformidade com certas leis que regem instituições públicas / educacionais. Até agora, estamos nos certificando de que:

  1. nossos layouts foram logicamente ordenados;
  2. as imagens tinham tags alt="" . mas estão aprendendo rapidamente que precisamos entrar em ação e realmente pensar sobre isso.

O que estamos considerando

Estamos analisando o AngularJS como uma estrutura para aplicativos dynamics da Web, mas estamos preocupados com o que isso pode significar para nossa posição de acessibilidade.

Entendo que um navegador sem JavaScript provavelmente quebrará um aplicativo Angular altamente dynamic (por exemplo, expressões como {{ item.something }} incorporadas na marcação, usando ng-repeat para criar listas a partir de um único

  • , no lado do cliente vistas parciais como tags vazias, etc.).

    Questão

    Gostaria de saber se há práticas recomendadas ou resources de informações bem compreendidos para esses tipos de estruturas que dependem muito de marcação dinâmica e de codificação incorporada, que podem ser percebidas como rabiscos para algo como um leitor de canvas ou até mesmo um navegador com JavaScript e CSS desativados.

    Todos os mesmos princípios se aplicam, como usar texto alternativo para imagens, bom uso de títulos, usar as estruturas HTML (5) apropriadas para o conteúdo.

    Você pode criá-lo via JavaScript, mas os leitores de canvas dos últimos 5 anos entendem isso e usam a API de acessibilidade do navegador para acessar o DOM. O aspecto não JavaScript simplesmente não é um problema de acessibilidade . O número de usuários de leitores de canvas sem JavaScript é o mesmo que o da população em geral, portanto, é um HTML totalmente formado, em vez da marcação bruta que você vê no desenvolvimento.

    NB: Eu considero o aprimoramento progressivo uma boa abordagem, mas com o Angular.js você está decidindo antecipadamente não adotar essa abordagem. Se você quiser saber sobre desempenho e aprimoramento progressivo, acho que isso foi respondido .

    Obviamente, você não usa o Angular.js apenas para criar páginas de conteúdo padrão, portanto, você precisa estar atualizado com a especificação WAI-ARIA e como usar o ARIA em HTML . O especifica como marcar dinamicamente as coisas que não são cobertas pelas práticas tradicionais de HTML, como guias, trees, grades etc.

    Para um exemplo prático de técnicas de WAI ARIA na prática, eu daria uma olhada no guia de estilo técnico do Whatsock .

    Uma diferença em relação aos sites tradicionais é como você gerencia as atualizações de página , ao gerenciar o foco do teclado em vez de atualizar a página. Mas, além disso, o WAI-ARIA é a coisa para se ler.

  • Tradicionalmente, o Angular não incentivava os desenvolvedores a codificar as interfaces de usuário “da maneira correta” – era muito fácil criar diretivas de elementos personalizados inacessíveis (como ngClick em um div ) e nenhum suporte de acessibilidade foi fornecido. No entanto, melhorou com o lançamento do Angular 1.3x e do módulo ngAria. Agora, ao include ngAria em sua aplicação, certos atributos ARIA são aplicados automaticamente para que você não precise gerenciá-los.

    Por exemplo, a diretiva ngClick agora aplica tabIndex="0" e ngKeypress (desde que essas opções não estejam desabilitadas) para que não seja tão fácil criar events de cliques inacessíveis. O ngAria também adicionará em breve role="button" para comunicar o propósito de um elemento clicável: isso pode ser substituído por outros papéis. Veja este pedido pull para mais informações: https://github.com/angular/angular.js/pull/10318

    Outra maneira pela qual o ngAria pode ajudar é adicionando aria-disabled a qualquer uso de ng-disabled . Isso garante que os controles personalizados desativados pela estrutura sejam acessíveis por padrão, como:

    Com o ngAria, isso se torna:

    Para toda a lista de atributos suportados, consulte os documentos da API do ngAria: https://docs.angularjs.org/api/ngAria

    O ngAria continuará a evoluir (e eu gostaria que fosse apenas cozido em vez de um módulo), mas é ótimo ver a acessibilidade finalmente suportada pelo framework principal .

    Ainda cabe a cada um de nós manter a acessibilidade em mente e codificar com responsabilidade, mas a Angular não deve ficar no seu caminho por mais tempo. A resposta de Alistair a esta pergunta tem resources fantásticos: eu definitivamente me referiria a essas dicas sobre gerenciamento de foco de teclado, usando ARIA em HTML e assim por diante. Você também pode consultar o novo Guia do desenvolvedor do Angular.js para ngAria: https://docs.angularjs.org/guide/accessibility

    E mais uma coisa: se alguém tiver ideias para o ngAria, crie um problema no Github ou envie uma solicitação de pull! É um esforço orientado pela comunidade.

    Seus maiores problemas com o AngularJS e a acessibilidade serão:

    1. Gerenciamento de foco – assim que sua rota fizer com que uma seção de conteúdo seja atualizada e essa seção contenha o foco, o navegador enviará o foco para a parte superior do documento e o leitor de canvas e os usuários somente de teclado serão perdidos. Você terá que gerenciar ativamente seu foco
    2. Anúncios de atualizações dinâmicas – a vinculação de dados permite que as atualizações ocorram no DOM sem interação com seu JavaScript. Se essas atualizações forem importantes, os usuários do leitor de canvas terão que ser informados sobre essas atualizações usando regiões aria-live. Fazê-los funcionar corretamente – especialmente no iOS, será complicado.
    3. Validação de formulário – o exemplo do AngularJS usa elementos para as mensagens de erro exibidas quando a validação do formulário falha. Nenhuma das associações está correta com os campos de input e os mesmos problemas mencionados no item 2 terão que ser endereçados se forem exibidos automaticamente (especialmente quando feito usando desfoque)
    4. Atualização do atributo de título – quando seu roteador altera sua URL, você deve atualizar o título do documento

    Além disso, é apenas outro aplicativo HTML.

    Este repository do Github tem algumas diretivas e serviços do Angular.js para lidar com alguns desses problemas https://github.com/dequelabs/ngA11y

    Intereting Posts