O JavaScript desempenha um papel importante em quase tudo o que criamos, de componentes dinâmicos menores a produtos completos executados em um framework 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 saber como a acessibilidade se encaixa em cada uma dessas partes.
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 suas ações do JavaScript, porque 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 essa 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 usam apenas o teclado não têm 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
da 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."
Você pode usar o elemento
innerHTML
para definir o conteúdo:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
É possível aplicar o 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 estilos do usuário não sejam lidas corretamente | Mantenha seus estilos em arquivos CSS para manter a consistência do tema |
| Criação de arquivos JavaScript muito grandes que diminuem a performance geral do site | Use menos JavaScript. Talvez você possa 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 dinamicamente à página, verifique se ele é simples e conciso e, claro, 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 prender 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 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 uma modal, ele precisa poder alternar entre os elementos de ação da modal, mas nunca deve ser permitido fora da modal sem descartá-la explicitamente. O JavaScript é essencial para capturar esse foco corretamente.
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 no seu aplicativo, o foco é mantido no mesmo local 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. - Retorne o foco a um link para pular para o conteúdo principal.
- Mova o foco para o título de nível superior da nova página.
O foco vai depender do framework que você está usando e do conteúdo que você quer oferecer aos usuários. Ela pode depender do contexto ou da ação.
Gerenciamento do estado
Outra área em que o JavaScript é essencial para a acessibilidade é o gerenciamento de estado, ou quando o estado visual atual de um componente ou página é transmitido a um usuário de tecnologia adaptativa com baixa visão, cegueira ou surdoceficiencia.
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 necessárias para os usuários, há muitos estados ARIA a serem considerados ao transmitir informações sobre um componente ao 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 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. Adicionar conteúdo de forma assíncrona ao
DOM dificulta que o AT detecte e anuncie a região.
Para que o conteúdo seja lido corretamente, a região ativa ou de alerta precisa estar no
DOM no 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 é necessário 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?