Acessibilidade digital: guia prático para sites

Na definição do W3C, acessibilidade na web significa que sites, ferramentas e tecnologias são projetados e desenvolvidos para que pessoas com deficiência possam usá-los. A mesma página lembra que o cuidado também ajuda quem não tem deficiência: quem usa o celular ao sol, quem não pode ouvir o áudio naquele momento, pessoas mais velhas, alguém com o braço quebrado e quem navega numa conexão lenta.

Na prática, um site acessível funciona com teclado, com leitor de tela, com o texto ampliado e com menos movimento na tela, sem que a pessoa precise pedir ajuda para ler, comprar ou entrar em contato.

A WCAG 2.2 foi publicada em 5 de outubro de 2023 e atualizada em 12 de dezembro de 2024. O W3C recomenda usar a versão mais recente, e as versões são compatíveis entre si: o que atende à 2.2 também atende à 2.1 e à 2.0. A 2.2 trouxe 9 critérios novos, como o foco que não pode ficar encoberto e o tamanho mínimo dos alvos de toque, e retirou o critério 4.1.1, sobre a análise do código.

A norma se organiza em camadas: quatro princípios (perceptível, operável, compreensível e robusto), diretrizes e critérios de sucesso testáveis, cada um num nível, A, AA ou AAA. Para o nível AA, a página precisa atender a todos os critérios A e AA. O próprio W3C não recomenda exigir o AAA como regra para um site inteiro, porque alguns conteúdos não conseguem cumprir todos os critérios desse nível.

O artigo 63 da Lei Brasileira de Inclusão (Lei nº 13.146, de 2015) diz: “É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.” O parágrafo 1º pede que esses sites tenham o símbolo de acessibilidade em destaque.

A lei não fixa uma versão da WCAG: a lista de políticas do W3C para o Brasil registra a LBI sem versão associada, ao lado do eMAG, o modelo de acessibilidade do governo eletrônico. Este guia não é parecer jurídico; para um caso concreto, vale ouvir um advogado.

Estes critérios da WCAG 2.2 valem para quase toda página. Os nomes são traduzidos por nós; o texto oficial, em inglês, está no link de cada um.

• Texto alternativo que diz o que a imagem informa

  O texto alternativo deve servir ao mesmo propósito da imagem: numa foto de produto, o produto; num ícone de lupa que abre a busca, a busca. Imagem só decorativa leva alt="", para o leitor de tela pular.

• Texto como texto, não como imagem

  Imagens de texto não mudam de tamanho nem de contraste como o texto. No site da Welz, as tabelas nutricionais, que na página antiga eram imagem, viraram tabelas em HTML.

• Contraste medido, não estimado

  Texto grande é o de pelo menos 18 pontos, ou 14 pontos em negrito, cerca de 24 px e 18,5 px. Abaixo disso, a relação mínima é de 4,5:1, conferida com um medidor de contraste, não a olho.

• Teclado e foco

  O que funciona com o mouse deve funcionar pelo teclado, sem prender o foco, e o foco precisa aparecer. Numa janela modal, Tab e Shift + Tab circulam só dentro dela, e Esc fecha a janela.

• Movimento sob controle

  Animação que começa sozinha e dura mais de cinco segundos precisa de um jeito de pausar, parar ou esconder. A consulta CSS prefers-reduced-motion informa se a pessoa pediu ao sistema menos movimento não essencial; o critério 2.3.3, de nível AAA, pede que a animação disparada pela interação possa ser desligada.

• Formulários que explicam

  Cada campo precisa de rótulo ou instrução, e um erro detectado deve ser identificado e descrito em texto, não só com uma borda vermelha.

• HTML antes de ARIA

  A primeira regra do ARIA é usar o elemento nativo do HTML quando ele já tem o comportamento necessário: um <button>, e não uma <div> com papel de botão.

• Idioma e legendas

  O atributo lang no <html> declara o idioma da página e permite ao leitor de tela usar a pronúncia certa. Vídeos gravados com fala precisam de legendas.

Ferramentas automáticas ajudam, mas nenhuma ferramenta sozinha determina se um site atende às diretrizes: o W3C lembra que elas não checam tudo e às vezes dão resultados enganosos. O teste combina etapas:

• Ferramenta automática

  Acha logo contraste baixo, imagem sem texto alternativo e campo sem rótulo. É o começo da revisão, não o fim.

• Teclado

  Percorrer a página inteira só com Tab, Shift + Tab, Enter, espaço e Esc, conferindo se o foco aparece, segue uma ordem que faz sentido e nunca fica preso.

• Zoom e largura

  Ampliar o texto a 200% e estreitar a janela até 320 px CSS, conferindo se nada se sobrepõe nem some.

• Leitor de tela e verificação rápida

  O W3C mantém um roteiro de verificação rápida, ainda em rascunho. Um leitor de tela mostra se títulos, links e botões fazem sentido sem o visual.

• Pessoas reais

  Testar com pessoas com deficiência e com pessoas mais velhas encontra problemas de uso que a conferência de conformidade, sozinha, não encontra.