Acessibilidade: os quatro princípios das WCAG aplicados na prática

O que é

As Web Content Accessibility Guidelines (WCAG) 2.2 do W3C organizam seus critérios de sucesso em quatro princípios. A tradução alemã da versão 2.0, publicada pelo W3C, chama-os de perceptível, operável, compreensível e robusto. Cada critério tem um nível de conformidade: A, AA ou AAA; AA é o nível que normalmente se adota como meta. A versão 2.2 acrescenta, entre outros, critérios sobre o tamanho mínimo dos elementos de interação (2.5.8 «Target Size (Minimum)»: 24 por 24 pixels CSS), sobre o foco não obscurecido (2.4.11), sobre a repetição de dados já informados (3.3.7 «Redundant Entry») e sobre a autenticação sem tarefas de memória ou de resolução de enigmas (3.3.8 «Accessible Authentication (Minimum)»). O critério 4.1.1 «Parsing» foi removido na 2.2 por estar obsoleto. O texto original em inglês é sempre o que vale; as traduções não são normativas.

Por que importa

As barreiras excluem pessoas que usam leitor de tela, teclado, ampliação ou controle por voz. Essas mesmas falhas prejudicam mecanismos de busca e leitores automatizados: uma imagem sem alternativa em texto, um botão sem nome acessível e um campo sem rótulo são invisíveis para qualquer acesso não visual. Os quatro princípios formam uma estrutura de verificação que dá para percorrer de cabeça, mesmo sem ferramentas.

Como aplicar

• Perceptível: toda imagem informativa recebe um atributo alt; as puramente decorativas recebem um vazio (alt=""). Texto normal exige uma razão de contraste de pelo menos 4,5:1, e texto grande, 3:1. Nunca transmita informação apenas por cor; sublinhe os links dentro de textos corridos.
• Operável: todas as funções são acessíveis pelo teclado, o foco é visível e não fica preso em lugar nenhum (2.1.2 «No Keyboard Trap»). Alvos de clique e toque com no mínimo 24 por 24 pixels CSS ou com espaçamento suficiente. Um link de salto leva ao conteúdo principal.
• Compreensível: declare o idioma da página com lang e, separadamente, o das seções em outro idioma. A navegação é igual em todas as páginas. As mensagens de erro indicam o campo e a correção; dados já informados não são solicitados novamente.
• Robusto: HTML semântico (títulos, listas, marcos de navegação, button em vez de div clicável); ARIA apenas onde o HTML não oferece equivalente.
• Verificar: primeiro de forma automatizada (encontra as violações formais); depois, uma rodada só com teclado e outra com leitor de tela pelos fluxos mais importantes.

Armadilhas

Um atributo title não é um nome acessível. Remover a moldura de foco por razões de design viola o 2.4.7. Ferramentas automáticas de verificação em geral não avaliam o conteúdo das alternativas em texto: alt="Bild" passa no teste e não ajuda ninguém. «Overlays de acessibilidade» incluídos depois não substituem uma estrutura ausente no código-fonte. Quem lê apenas a tradução alemã da versão 2.0 não conhece os critérios acrescentados nas versões 2.1 e 2.2.