33. Acessibilidade

O que a plataforma cumpre das regras da W3C, como isso é medido a cada execução, e o que nenhuma ferramenta mede.

A plataforma é verificada contra a WCAG 2.1, níveis A e AA — o critério que a legislação brasileira e a maioria dos contratos públicos exigem. A verificação não é uma declaração: roda na cadeia de testes, em mais de cinquenta telas — as do IMR entre elas — e nos três temas, a cada execução; cinco telas representativas repetem a varredura em Firefox, WebKit e no iPhone. O IMR entrou na lista porque módulo que nasce depois da varredura é exatamente onde a regressão passa despercebida: ninguém mede o que ainda não existia quando a lista foi escrita.

Estrutura. Marcos de região nomeados, link para pular direto ao conteúdo como primeiro parador de tabulação, idioma declarado na página, cada campo com rótulo associado, cada botão com nome acessível — inclusive os que são só ícone.

Contraste. Todo par de cores usado em texto alcança 4,5:1. Chegar lá custou três mudanças de paleta, e cada uma nasceu de uma medição:

•     O verde da marca escureceu de #2f8f3e para #277732. Branco sobre o anterior dava 4,10:1.

•     Surgiu um token para a cor do texto sobre o acento. O acento é escuro no tema claro e claro nos temas escuro e cinza; branco fixo em cima dele dava 2,17:1 em dois dos três temas.

•     O vermelho do tema cinza clareou de #dd8878 para #e59a8c.

Opacidade deixou de ser hierarquia de texto. opacity-70 sobre um token que passa com 6,28:1 o derruba para 3,19:1. Texto secundário usa o token próprio.

O mapa de calor escolhe a cor do texto medindo. A célula é a cor da série misturada com a superfície em proporção que depende do valor — a cor de fundo só existe depois de renderizada. Nenhuma regra fixa de "branco acima de tanto" funciona nos três temas. A plataforma mistura as cores, calcula a luminância pela fórmula da WCAG e escolhe o extremo de maior contraste.

Teclado. Todo controle focado mostra onde o foco está, o foco não entra em região escondida, diálogos prendem o foco e o devolvem ao fechar, e Esc fecha. Dentro do diálogo o Tab só para no que está à vista: aba escondida, painel recolhido e conteúdo de um "mais detalhes" fechado ficam de fora da volta.

Botão apagado diz por quê, à vista. Quando falta permissão para uma ação, o botão aparece desbotado — e não some —, e logo abaixo da barra vem uma linha curta com o motivo: qual ação e qual permissão do perfil falta ("Lançar e Apagar: Seu perfil não tem a permissão …"). Antes o motivo só aparecia ao passar o rato (que não existe no celular nem no teclado) ou para o leitor de tela. A nota sai uma vez por trecho da tela, e não em cada botão; quando há motivos diferentes no mesmo trecho, ela vira a pergunta "Por que não dá para …?", que abre com clique, toque ou Enter.

Alvos de toque. Os botões só de ícone que tiram um item — desfazer vínculo de caso, desvincular risco de um achado, tirar um anexo — têm área de toque de pelo menos 24 × 24 px (WCAG 2.5.8), sem o ícone crescer.

Movimento. prefers-reduced-motion é respeitado: quem pediu menos animação ao sistema recebe menos animação aqui.

Texto que cresce. Aumentar a fonte é critério de acessibilidade, e dos que ferramenta nenhuma mede: o axe verifica a página como ela está, e redimensionar exige aumentar de verdade e olhar o que quebrou. São dois critérios AA — 1.4.4, texto a 200% sem perder conteúdo nem função, e 1.4.10, refluxo a 320px sem rolagem em dois eixos, que é a condição de quem usa zoom de 400%.

A plataforma cumpre os dois, e agora isso é medido a cada execução, nas duas larguras. O que sustenta é o texto ser declarado em unidade relativa: travado em pixel, ele ignora o ajuste do navegador e o controle de acessibilidade do sistema operacional deixa de ter efeito.

E há um controle no próprio produto: Tamanho do texto, nas Preferências, com três tamanhos — padrão, grande (112%) e maior (125%). Ele aparece também na tela de entrada e no cabeçalho dos portais de atendimento e de resposta, porque quem precisa de letra maior precisa dela para ler o formulário de login, e não só depois dele.

Ele não é o que faz a plataforma cumprir o critério 1.4.4 — isso é do texto em unidade relativa, e já valia antes. Ele existe porque o zoom do navegador aumenta tudo: margens, ícones, grade. Quem precisa de letra maior nem sempre quer a tela inteira maior. Aqui só a raiz tipográfica muda.

São três degraus e não um controle contínuo. Um deslizador de porcentagem convidaria a testar dezenas de valores intermediários que ninguém verificou; três tamanhos são três estados, e os três estão medidos na suíte.

Um detalhe que o teste prende: a escolha é aplicada antes da montagem, junto com o tema. Se fosse aplicada depois, a página apareceria no tamanho padrão e cresceria um instante depois — e quem escolheu letra maior veria a tela saltar a cada carregamento.

O axe-core verifica atributos e contraste. Ele não percorre a tela: não descobre que a ordem de tabulação pula a navegação, que um rótulo está tecnicamente presente e semanticamente errado, ou que uma mensagem de erro aparece longe do campo que a causou. Por isso há também um teste de navegação por teclado — e por isso nada disso substitui alguém usando a plataforma com leitor de tela.

Ele abria sozinho na primeira entrada e cobria a tela com um fundo que engolia qualquer clique, e o Esc não o fechava. A primeira ação possível de quem entrava pela primeira vez era fechar uma coisa que ninguém pediu — orientação que obstrui deixa de ser orientação.

Foi corrigido em três frentes. Não abre sozinho: na primeira entrada o botão "Como funciona" ganha um ponto, e o nome acessível dele diz "ainda não visto", porque cor sozinha não comunica a quem não a enxerga. Não bloqueia: virou painel encostado à direita, sem fundo interceptando — dá para ler um passo e clicar no menu ao mesmo tempo, e aria-modal="false" diz ao leitor de tela a verdade, que o resto da página continua disponível. Fecha pelo Esc, e devolve o foco ao botão que o abriu.

Em tela estreita ele ocupa a largura toda, porque ali não existe "ao lado".