--- title: 33. Acessibilidade slug: 33-acessibilidade docTags: createdAt: 2026-10-13T14:45:46.774Z --- *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. :::BlockQuote cd testes && ./executar.sh acessibilidade ::: *** ### O que está garantido **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 que nenhuma ferramenta mede 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. *** ### O assistente, que era o pior caso 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".