O JavaScript tem um papel importante em quase tudo que criamos, desde pequenos de componentes dinâmicos a produtos completos executados em um framework de JavaScript, como React ou Angular.
O uso (ou uso excessivo) do JavaScript trouxe muitas tendências alarmantes, como longos tempos de carregamento devido à grande quantidade de códigos, uso de HTML não semântico e injeção de HTML e CSS por meio de JavaScript. E você pode estar sem saber como a acessibilidade se encaixa em cada uma dessas peças.
O JavaScript pode ter um grande impacto na acessibilidade do seu site. Neste vamos compartilhar alguns padrões gerais de acessibilidade que são aprimorados por JavaScript, bem como soluções para problemas de acessibilidade que surgem usando frameworks JavaScript.
Acionar eventos
Os eventos JavaScript permitem que os usuários interajam com o conteúdo da Web e realizem uma uma ação específica. Muitas pessoas, como usuários de leitores de tela, pessoas com deficiências motoras finas, pessoas sem mouse ou trackpad, e outros, dependem do suporte a teclado para interagir com a Web. É essencial adicionar suporte ao teclado para as ações do JavaScript, pois afeta todos esses usuários.
Vejamos um evento de clique.
Se um evento onClick() for usado em um elemento HTML semântico, como um <button>
ou <a>, isso inclui naturalmente as funções de mouse e teclado. No entanto,
a funcionalidade de teclado não é aplicada automaticamente quando um evento onClick()
for adicionado a um elemento não semântico, como um <div> genérico.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
Veja esta comparação no CodePen.
Se um elemento não semântico for usado em um evento acionador, uma Evento keydown/keyup precisam ser adicionados para detectar quando o botão Enter ou a barra de espaço é pressionado. Adicionar eventos de gatilho a elementos não semânticos costumam ser esquecidos. Infelizmente, quando é esquecido, o resultado é um componente que só pode ser acessado pelo mouse. Somente teclado os usuários não têm acesso às ações associadas.
Títulos de páginas
Como aprendemos no módulo Document, o título da página é essencial para usuários de leitores de tela. Ele informa aos usuários qual página eles estão e se acessaram uma nova página.
Se você usar um framework de JavaScript, precisará considerar como lidar com a página
títulos. Isso é especialmente importante para
aplicativos de página única (SPAs)
que são carregados de um único arquivo index.html, como transições ou rotas (página
alterações) não envolverá a atualização da página. Sempre que um usuário carrega uma nova página no
um SPA, o título não será alterado por padrão.
Para SPAs, o arquivo document.title pode ser adicionado manualmente ou com um pacote auxiliar (dependendo da JavaScript). Apresentamos o títulos de páginas atualizados para um usuário de leitor de tela pode exigir algum trabalho adicional, mas a boa notícia é você tem opções, como conteúdo dinâmico.
Conteúdo dinâmico
Uma das mais poderosas funcionalidades de JavaScript é a capacidade de adicionar HTML e CSS a qualquer elemento na página. Os desenvolvedores podem criar aplicativos dinâmicos com base nas ações ou comportamentos dos usuários.
Digamos que você precise enviar uma mensagem aos usuários quando eles fizerem login no seu site. ou aplicativo. Você quer que a mensagem se destaque do fundo branco e seja retransmitida a mensagem: "Você fez login."
Você pode usar o elemento innerHTML
para definir o conteúdo:
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
É possível aplicar CSS de maneira semelhante, com
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Com grandes poderes vêm grandes responsabilidades. Infelizmente, o JavaScript de HTML e CSS tem sido usada indevidamente para criar conteúdo inacessível conteúdo. Alguns usos indevidos comuns estão listados aqui:
| Possível uso indevido | Uso correto |
|---|---|
| Renderizar grandes blocos de HTML não semântico | Renderizar partes menores do HTML semântico |
| Não permitir tempo para que o conteúdo dinâmico seja reconhecido pela tecnologia assistiva | Usar um atraso de setTimeout() para permitir que os usuários ouçam a mensagem completa |
Como aplicar atributos de estilo a onFocus() dinamicamente |
Use :focus para os elementos relacionados na folha de estilo CSS |
| A aplicação de estilos inline pode fazer com que as folhas de estilo do usuário não sejam lidas corretamente | Manter seus estilos em arquivos CSS para manter a consistência do tema |
| Criar arquivos JavaScript muito grandes que prejudicam o desempenho geral do site | Use menos JavaScript. Você pode executar funções semelhantes no CSS (como animações ou navegação fixa), que têm uma análise mais rápida e desempenho melhor. |
Para CSS, alterne as classes CSS em vez de adicionar estilos in-line, como esta permite a reutilização e a simplicidade. Use conteúdo oculto na página e alternar classes para ocultar e mostrar conteúdo para HTML dinâmico. Se você precisar usar JavaScript para adicionar conteúdo dinamicamente à sua página, de forma simples e concisa e, é claro, acessível.
Gerenciamento de foco
No Módulo de foco do teclado, abordamos o foco estilos de ordem e indicador. Gerenciamento de foco é saber quando e onde armadilha o foco e quando ele não deve ser preso.
O gerenciamento de foco é fundamental para usuários que usam apenas o teclado.
Nível do componente
É possível criar armadilhas de teclado quando o foco de um componente não é gerenciado corretamente. Uma armadilha do teclado ocorre quando um usuário que utiliza apenas o teclado fica preso em um componente. o foco não é mantido quando deveria ser.
Um dos padrões mais comuns em que os usuários enfrentam problemas de gerenciamento de foco está em um componente modal. Quando um usuário que utiliza apenas o teclado encontra um modal, ele deve ser capaz de navegar entre os elementos acionáveis do modal, mas eles nunca deve ser permitido fora do modal sem que ele seja explicitamente dispensado. O JavaScript é essencial para a captura adequada desse foco.
Nível da página
O foco também deve ser mantido quando um usuário navega de uma página a outra. Isso é especialmente em SPAs, onde há nenhuma atualização do navegador e todo o conteúdo muda dinamicamente. Sempre que um usuário clicar em um link para outra página no aplicativo, o foco é mantido no mesmo lugar ou possivelmente colocado em outro lugar.
Ao fazer a transição entre páginas (ou roteamento), a equipe de desenvolvimento precisa decidir para onde o foco vai quando a página é carregada.
Há várias técnicas para fazer isso:
- Posicionar o foco no contêiner principal com um aviso
aria-live. - Coloque o foco novamente em um link para acessar o conteúdo principal.
- Mova o foco para o cabeçalho de nível superior da nova página.
O foco vai depender da estrutura que você está usando e o conteúdo que você quer veicular para os usuários. Pode ser contexto ou depende da ação.
Gerenciamento do estado
Outra área em que o JavaScript é fundamental para a acessibilidade é o gerenciamento de estado, ou quando o estado visual atual de um componente ou página é retransmitido para um usuário de tecnologia assistiva com baixa visão, cego ou surdo.
Muitas vezes, o estado de um componente ou página é gerenciado por atributos ARIA, como Introduzido no módulo ARIA e HTML. Vamos analisar alguns dos tipos mais comuns de atributos ARIA usados para ajudar gerenciar o estado de um elemento.
Nível do componente
Dependendo do conteúdo da sua página e das informações que os usuários precisam, existem muitos estados ARIA a serem consideradas ao retransmitir informações sobre um componente para o usuário.
Por exemplo, você pode usar um
aria-expanded
para informar ao usuário se um menu suspenso ou lista está expandido ou
recolhido.
Ou você pode usar aria-pressed
para indicar que um botão foi pressionado.
É importante ser seletivo ao aplicar atributos ARIA. Reflita sobre as fluxo do usuário para entender quais informações críticas devem ser transmitidas ao usuário.
Nível da página
Os desenvolvedores costumam usar uma área visualmente escondida chamada de Região ativa ARIA para anunciar alterações na tela e mensagens de alerta para tecnologia assistiva (AT). Esta área pode ser pareada com JavaScript para notificar os usuários sobre alterações na página sem exigir que a página inteira seja atualizada.
Historicamente, o JavaScript tem tido dificuldade em anunciar conteúdo em
aria-live
e regiões de alerta devido à sua natureza dinâmica. Adicionar conteúdo a
o DOM torna difícil para a AT identificar e anunciar a região.
Para que o conteúdo seja lido corretamente, a região ativa ou de alerta precisa estar no
DOM durante o carregamento, o texto poderá ser trocado dinamicamente.
Se você usar uma estrutura de JavaScript, a boa notícia é que quase todas têm uma "locutor ao vivo" pacote que faz todo o trabalho para você e é totalmente acessíveis. Não é preciso se preocupar em criar uma região ativa com os problemas descritos na seção anterior.
Aqui estão alguns pacotes ativos para frameworks comuns de JavaScript:
- React: react-aria-live e react-a11y-announcer (em inglês)
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
O JavaScript moderno é uma linguagem poderosa que permite que os desenvolvedores da Web criem aplicativos da Web robustos. Isso às vezes leva a excesso de engenharia e, e padrões inacessíveis. Ao seguir os padrões e as dicas de JavaScript neste módulo, você pode tornar seus apps mais acessíveis a todos os usuários.
Teste seu conhecimento
Teste seus conhecimentos sobre JavaScript
Qual é a melhor maneira de alterar o estilo de um elemento com JavaScript?
Todas as ações do JavaScript são compatíveis com usuários de teclado?