O JavaScript desempenha um papel importante em quase tudo o que criamos, desde componentes dinâmicos menores até produtos completos executados em um framework de JavaScript, como React ou Angular.
Esse uso (ou uso excessivo) de JavaScript trouxe muitas tendências alarmantes, como tempos de carregamento longos devido a grandes quantidades de código, uso de elementos HTML não semânticos e injeção de HTML e CSS pelo JavaScript. E você pode não ter certeza de como a acessibilidade se encaixa em cada uma dessas peças.
O JavaScript pode ter um grande impacto na acessibilidade do seu site. Neste módulo, vamos compartilhar alguns padrões gerais de acessibilidade aprimorados pelo JavaScript, além de soluções para problemas de acessibilidade que surgem ao usar frameworks JavaScript.
Acionar eventos
Os eventos JavaScript permitem que os usuários interajam com o conteúdo da Web e realizem 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 outras, dependem do suporte a teclado para interagir com a Web. É fundamental adicionar suporte ao teclado às ações JavaScript, já que isso afeta todos esses usuários.
Vamos analisar um evento de clique.
Se um evento onClick() for usado em um elemento HTML semântico, como <button>
ou <a>, ele naturalmente incluirá a funcionalidade do mouse e do teclado. No entanto,
a funcionalidade do teclado não é aplicada automaticamente quando um evento onClick()
é 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>
Confira esta comparação no CodePen.
Se um elemento não semântico for usado para um evento acionador, um evento keydown/keyup precisa ser adicionado para detectar a tecla Enter ou Space pressionada. A adição de eventos de acionamento a elementos não semânticos é frequentemente esquecida. Infelizmente, quando isso acontece, o resultado é um componente que só pode ser acessado com um mouse. Os usuários que utilizam apenas o teclado ficam sem acesso às ações associadas.
Títulos de páginas
Como aprendemos no módulo de documentos, o título da página é essencial para usuários de leitores de tela. Ele informa aos usuários em qual página eles estão e se eles navegaram para uma nova página.
Se você usa um framework JavaScript, é preciso considerar como processa os títulos
de página. Isso é especialmente importante para
apps de página única (SPAs, na sigla em inglês)
que são carregados de um único arquivo index.html, já que as transições ou rotas (mudanças
de página) não envolvem uma atualização da página. Sempre que um usuário carrega uma nova página em
um SPA, o título não muda por padrão.
Para SPAs, o valor document.title pode ser adicionado manualmente ou com um pacote auxiliar (dependendo do framework JavaScript). Anunciar os títulos de página atualizados para um usuário de leitor de tela pode exigir mais trabalho, mas a boa notícia é que você tem opções, como conteúdo dinâmico.
Conteúdo dinâmico
Uma das funcionalidades mais poderosas do JavaScript é a capacidade de adicionar HTML e CSS a qualquer elemento da 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 app. Você quer que a mensagem se destaque do plano de fundo branco e transmita a mensagem: "Você fez login."
Use o elemento
innerHTML
para definir o conteúdo:
document.querySelector("#banner").innerHTML = '<p>You are now signed 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, a injeção de JavaScript de HTML e CSS já foi usada indevidamente para criar conteúdo inacessível. Confira alguns usos indevidos comuns:
| Possível uso indevido | Uso correto |
|---|---|
| Renderizar grandes partes de HTML não semânticas | Renderizar partes menores de HTML semântico |
| Não permitir tempo para que o conteúdo dinâmico seja reconhecido pela tecnologia assistiva | Usar um tempo de espera de setTimeout() para que os usuários ouçam a mensagem completa |
Aplicar atributos de estilo para 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 | Mantenha 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. Talvez seja possível executar funções semelhantes no CSS (como animações ou navegação fixa), que são analisadas mais rapidamente e têm melhor desempenho. |
Para CSS, alterne as classes CSS em vez de adicionar estilos inline, já que isso permite reutilização e simplicidade. Use conteúdo oculto na página e alterne as classes para ocultar e mostrar conteúdo para HTML dinâmico. Se você precisar usar JavaScript para adicionar conteúdo à sua página dinamicamente, verifique se ele é simples, conciso e acessível.
Gerenciamento de foco
No Módulo de foco do teclado, abordamos a ordem de foco e os estilos de indicador. O gerenciamento de foco é saber quando e onde capturar o foco e quando ele não deve ser capturado.
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 de teclado ocorre quando um usuário que usa apenas o teclado fica preso em um componente ou o foco não é mantido quando deveria.
Um dos padrões mais comuns em que os usuários enfrentam problemas de gerenciamento de foco é em um componente modal. Quando um usuário que usa apenas o teclado encontra um modal, ele precisa ser capaz de navegar entre os elementos acionáveis do modal, mas eles nunca podem ser permitidos fora do modal sem que ele seja explicitamente dispensado. O JavaScript é essencial para capturar corretamente esse foco.
Nível da página
O foco também precisa ser mantido quando um usuário navega de uma página para outra. Isso é especialmente verdadeiro em SPAs, em que não há atualização do navegador e todo o conteúdo muda dinamicamente. Sempre que um usuário clica em um link para acessar outra página do aplicativo, o foco é mantido no mesmo lugar ou 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:
- Coloque 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 título de nível superior da nova página.
O local onde você decide colocar o foco dependerá da estrutura que você está usando e do conteúdo que quer disponibilizar para seus usuários. Ela pode depender do contexto ou 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 adaptativa com baixa visão, cego ou surdo.
Muitas vezes, o estado de um componente ou página é gerenciado por atributos ARIA, conforme apresentado no módulo ARIA e HTML. Vamos analisar alguns dos tipos mais comuns de atributos ARIA usados para ajudar a gerenciar o estado de um elemento.
Nível do componente
Dependendo do conteúdo da página e das informações que os usuários precisam, existem muitos estados ARIA que precisam ser considerados ao redirecionar informações sobre um componente para o usuário.
Por exemplo, você pode usar um atributo
aria-expanded
para informar ao usuário se um menu suspenso ou uma lista estão abertos ou
fechados.
Ou você pode usar aria-pressed
para indicar que um botão foi pressionado.
É importante ser seletivo ao aplicar atributos ARIA. Pense no fluxo de usuários para entender quais informações importantes precisam ser transmitidas a eles.
Nível da página
Os desenvolvedores costumam usar uma área oculta chamada de região ativa do ARIA para anunciar mudanças na tela e alertar mensagens para usuários de tecnologia assistiva (AT). Essa área pode ser combinada com o JavaScript para notificar os usuários sobre mudanças dinâmicas na página sem precisar que ela seja atualizada.
Historicamente, o JavaScript tem dificuldade para anunciar conteúdo em
aria-live
e regiões de alerta devido à natureza dinâmica. A adição assíncrona de conteúdo ao DOM dificulta que a AT identifique e anuncie 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. Em seguida, o texto pode ser trocado dinamicamente.
Se você usa um framework JavaScript, a boa notícia é que quase todos eles têm um pacote "anunciante ao vivo" que faz todo o trabalho para você e é totalmente acessível. Não é preciso se preocupar em criar uma região ativa e lidar com os problemas descritos na seção anterior.
Confira alguns pacotes ativos para frameworks JavaScript comuns:
- React: react-aria-live e react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
O JavaScript moderno é uma linguagem poderosa que permite que os desenvolvedores da Web criem aplicativos da Web robustos. Às vezes, isso leva a uma engenharia excessiva e, por extensão, a padrões inacessíveis. Ao seguir as dicas e padrões do JavaScript neste módulo, você pode tornar seus apps mais acessíveis para todos os usuários.
Teste seu conhecimento
Teste seus conhecimentos de JavaScript
Qual é a melhor maneira de mudar o estilo de um elemento com JavaScript?
Todas as ações do JavaScript podem ser usadas com o teclado?