O JavaScript desempenha um papel importante em quase tudo o que criamos, desde componentes dinâmicos menores até produtos completos executados em um framework JavaScript, como React ou Angular.
Esse uso (ou uso excessivo) do JavaScript gerou muitas tendências alarmantes, como longos tempos de carregamento devido a grandes quantidades de código, uso de elementos HTML não semânticos e injeção de HTML e CSS por meio de 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, bem como soluções para problemas de acessibilidade que surgem com o uso de frameworks do JavaScript.
Eventos de gatilho
Com os eventos JavaScript, os usuários podem interagir com o conteúdo da Web e realizar 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 do teclado para interagir com a Web. É fundamental que você adicione suporte ao teclado às ações do JavaScript, já que isso afeta todos esses usuários.
Vejamos um evento de clique.
Se um evento onClick() for usado em um elemento HTML semântico, como <button>
ou <a>, ele vai incluir naturalmente a funcionalidade de mouse e 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 uma prévia dessa comparação no CodePen.
Se um elemento não semântico for usado para um evento acionador, adicione um evento keydown/keyup para detectar o pressionamento da tecla Enter ou espaço. Adicionar eventos acionadores a elementos não semânticos costuma ser esquecido. Infelizmente, quando é esquecido, o resultado é um componente acessível apenas por 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 Documentos, o título da página é essencial para usuários de leitores de tela. Ela informa aos usuários em qual página eles estão e se acessaram uma nova página.
Se você usa um framework de JavaScript, precisa considerar como lidar com os títulos das páginas. Isso é especialmente importante para
apps de página única (SPAs)
que são carregados de um único arquivo index.html, já que transições ou rotas (mudanças
de página) não envolvem a atualização da página. Cada vez 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 do JavaScript). Anunciar os títulos de página atualizados para um usuário de leitor de tela pode exigir trabalho a mais, mas a boa notícia é que você tem opções, como conteúdo dinâmico.
Conteúdo dinâmico
Uma das funcionalidades mais eficientes 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 para os usuários quando eles fizerem login no seu site ou app. Você quer que a mensagem se destaque do fundo branco e transmite 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 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 tem sido usada historicamente para criar conteúdo inacessível. 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 de HTML semântico |
| Sem dar tempo para que o conteúdo dinâmico seja reconhecido por tecnologia adaptativa | Usar um atraso de setTimeout() para que os usuários possam ouvir a mensagem completa |
Aplicar atributos de estilo para onFocus() dinamicamente |
Use :focus para os elementos relacionados na sua folha de estilo CSS |
| A aplicação de estilos in-line 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 |
| Criação de arquivos JavaScript muito grandes que prejudicam o desempenho geral do site | Use menos JavaScript. Você pode realizar funções semelhantes no CSS (como animações ou navegação fixa), que analisam mais rapidamente e têm um desempenho melhor. |
Para CSS, alterne as classes CSS em vez de adicionar estilos in-line, já que isso permite a reutilização e a simplicidade. Use conteúdo oculto na página e ative as classes para ocultar e mostrar conteúdo de HTML dinâmico. Se você precisar usar JavaScript para adicionar conteúdo à sua página de maneira dinâmica, verifique se ela é simples, concisa e acessível.
Gerenciamento de foco
No módulo de foco do teclado, abordamos a ordem de foco e os estilos do indicador. Gerenciamento de foco é saber quando e onde prender o foco e quando ele não deve ficar preso.
O gerenciamento de foco é essencial para usuários que utilizam 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 no momento certo.
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 utiliza apenas o teclado encontra um modal, ele pode usar a tecla Tab para alternar entre os elementos acionáveis, mas não pode ser permitido fora do modal sem ser explicitamente dispensado. O JavaScript é essencial para capturar esse foco corretamente.
Nível da página
O foco também deve ser mantido quando o usuário navegar de uma página a outra. Isso ocorre principalmente nos 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 ir para outra página do aplicativo, o foco é mantido no mesmo lugar ou pode ser 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:
- Colocar o foco no contêiner principal com um aviso
aria-live. - Voltar o foco para um link a fim de pular para o conteúdo principal.
- Mova o foco para o título de nível superior da nova página.
O foco dependerá do framework usado e do conteúdo que será exibido aos usuários. 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 é redirecionado para um usuário de tecnologia adaptativa cego, com baixa visão ou surdo.
Muitas vezes, o estado de um componente ou página é gerenciado por atributos ARIA, conforme introduzido no módulo ARIA e HTML. Vamos revisar 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 seus usuários precisam, há muitos estados ARIA a considerar 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á aberta ou
recolhida.
Ou você pode usar aria-pressed
para indicar que um botão foi pressionado.
É importante ser seletivo ao aplicar atributos ARIA. Pense no fluxo do usuário para entender quais informações críticas precisam ser transmitidas a ele.
Nível da página
Os desenvolvedores geralmente usam uma área visualmente oculta chamada região ativa ARIA para anunciar mudanças na tela e enviar mensagens de alerta para usuários de tecnologia adaptativa (AT, na sigla em inglês). Essa área pode ser pareada com o JavaScript para notificar os usuários sobre mudanças dinâmicas na página sem precisar que ela seja recarregada.
Historicamente, o JavaScript tem dificuldade para anunciar conteúdo em
aria-live
e alertar regiões devido à natureza dinâmica dele. A adição assíncrona de conteúdo ao DOM dificulta a detecção da região e o anúncio dela.
Para que o conteúdo seja lido corretamente, a região ativa ou de alerta precisa estar no
DOM no carregamento, então o texto pode ser trocado dinamicamente.
Se você usa um framework de JavaScript, a boa notícia é que quase todos eles têm um pacote "locutor em tempo real" 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 comuns do JavaScript:
- Reação: react-aria-live e react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
O JavaScript moderno é uma linguagem poderosa que permite que desenvolvedores da Web criem aplicativos da Web robustos. Isso às vezes leva a uma engenharia excessiva e, por extensão, a padrões inacessíveis. Ao seguir as dicas e os padrões do JavaScript neste módulo, você torna seus apps mais acessíveis para todos os usuários.
Teste seu conhecimento
Teste seus conhecimentos sobre JavaScript
Qual é a melhor forma de alterar o estilo de um elemento com JavaScript?
Todas as ações do JavaScript oferecem suporte a usuários de teclado?