O JavaScript tem 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) do 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 por JavaScript. E talvez você não saiba 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.
Eventos de acionamento
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ência motora fina, pessoas sem mouse ou trackpad, e outras, dependem do suporte do teclado para interagir com a Web. É fundamental adicionar suporte ao teclado às suas ações de 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 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 de acionamento, um evento keydown/keyup precisa ser adicionado para detectar o pressionamento da tecla Enter ou espaço. Muitas vezes, as pessoas se esquecem de adicionar eventos de acionamento a elementos não semânticos. Infelizmente, quando isso acontece, o resultado é um componente acessível apenas 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 Documento, 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 navegaram para uma nova página.
Se você usa um framework de JavaScript, precisa considerar como lida 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 as transições ou rotas (mudanças de página) não envolvem uma 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 de JavaScript). Anunciar os títulos de página atualizados para um usuário de leitor de tela pode exigir um trabalho extra, 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 na página. Os desenvolvedores podem criar aplicativos dinâmicos com base nas ações ou comportamentos dos usuários.
Suponha 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 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 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 HTML e CSS em JavaScript tem sido 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ântico | Renderizar partes menores de HTML semântico |
| Não permitir que a tecnologia adaptativa reconheça o conteúdo dinâmico | Usar um atraso de tempo de setTimeout() para permitir que os usuários ouçam a mensagem completa |
Aplicar atributos de estilo para onFocus() de forma dinâmica |
Use :focus para os elementos relacionados na sua 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 diminuem o desempenho geral do site | Use menos JavaScript. Você pode realizar funções semelhantes em CSS (como animações ou navegação fixa), que são analisadas mais rapidamente e têm melhor desempenho. |
Para CSS, alterne as classes em vez de adicionar estilos inline, já que isso permite reutilização e simplicidade. Use conteúdo oculto na página e alterne classes para ocultar e mostrar conteúdo em HTML dinâmico. Se você precisar usar JavaScript para adicionar conteúdo dinamicamente à sua 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 indicadores. O gerenciamento de foco é saber quando e onde prender o foco e quando ele não deve ser preso.
O gerenciamento de foco é essencial 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 ser.
Um dos padrões mais comuns em que os usuários têm problemas de gerenciamento de foco é em um componente modal. Quando um usuário que usa apenas o teclado encontra um modal, ele precisa conseguir usar a tecla Tab entre os elementos acionáveis do modal, mas nunca pode sair do modal sem dispensá-lo explicitamente. O JavaScript é essencial para capturar o foco corretamente.
Nível da página
O foco também precisa ser mantido quando um usuário navega de página em página. 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 lugar ou colocado em outro lugar completamente diferente.
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 anúncio
aria-live. - Coloque o foco de volta em 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 local em que você decide colocar o foco depende da estrutura que está usando e do conteúdo que quer veicular para os usuários. Ele 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 seja, quando o estado visual atual de um componente ou página é transmitido para um usuário de tecnologia adaptativa com baixa visão, cego ou surdocego.
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, 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á aberto ou
fechado.
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 visualmente oculta chamada região ativa ARIA para anunciar mudanças na tela e mensagens de alerta para usuários de tecnologia adaptativa (TA). Essa área pode ser combinada com JavaScript para notificar os usuários sobre mudanças dinâmicas na página sem exigir que ela seja recarregada por completo.
Historicamente, o JavaScript tem dificuldade em 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 a identificação e o anúncio da região pelas TA.
Para que o conteúdo seja lido corretamente, a região de alerta ou ao vivo precisa estar no DOM no carregamento. Depois, 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 de "anunciador ao vivo" que faz todo o trabalho para você e é totalmente acessível. Não é necessário se preocupar em criar uma região dinâmica 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 aos desenvolvedores da Web criar aplicativos da Web robustos. Isso às vezes leva a um excesso de engenharia e, por extensão, a padrões inacessíveis. Ao seguir os padrões e dicas de JavaScript neste módulo, você pode tornar seus apps mais acessíveis para todos os usuários.