Especialização · Design UI/UX
Trabalhamos com tokens de cor com rácio de contraste calculado, padrões de teclado verificados elemento a elemento e animações que se interrompem segundo a preferência do sistema. Verificamos com uma ferramenta, em páginas reais, e publicamos também o que falhou.
Já construídoSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.
A maioria dos „sistemas de design” é uma paleta e uma lista de componentes. O nosso começa com algo mais aborrecido e mais útil: cada cor de texto tem um rácio de contraste calculado face a cada fundo em que aparece efetivamente. Não „fica bem”, mas sim um número. O token de texto secundário deste site, `--muted: #666b65`, obtém entre 4,72:1 e 5,45:1 nos sete fundos usados. O limiar exigido para texto pequeno é 4,5:1.
Esse número não surgiu por bom senso. Corremos axe-core 4.10.2 em dez páginas do nosso próprio site e a única regra WCAG sistematicamente violada era o contraste: 31 a 43 nós por página, dos quais 31 vinham do cabeçalho e do rodapé, por isso se multiplicavam por todos os 147 endereços. Oito cores escritas diretamente na folha de estilo produziam 2,88:1 até 4,49:1. A mais grave, a 10 px e 3,72:1, era exatamente a linha com os links jurídicos — o caminho por onde chega alguém quando quer exercer um direito.
A segunda parte do sistema é o movimento, tratado como função, não como decoração. Na página inicial há 38 elementos animados em loop infinito. Todos estão cobertos por um botão de pausa: ao premir, passam ao estado parado, a etiqueta muda e o estado é anunciado para os leitores de ecrã. Em separado, uma regra global anula qualquer animação e transição quando o sistema pede movimento reduzido, desativa a rolagem suave e até esconde o botão de pausa, que se torna inútil. Também verificámos a armadilha clássica — uma animação que começa com opacidade quase zero e deixa o conteúdo invisível quando é anulada: aqui não existe.
O resto é disciplina: indicador de foco visível, de 2 px, aplicado apenas na navegação por teclado; navegação com setas em grupos de tabs, segundo o modelo recomendado; formulários com erros anunciados como alerta e confirmações anunciadas como estado. E uma regra que mantemos rigorosamente: o que não pudemos verificar é escrito como não verificado. A auditoria própria tem uma secção de limites da ferramenta, e dois defeitos encontrados ali ainda estão em aberto — estão abaixo, com nome.
Qué incluye
A paleta está num bloco de 14 variáveis, e o texto secundário usa um único token: `--muted: #666b65`. As razões, recalculadas com a fórmula de luminância relativa da WCAG nos sete fundos do site: 5,45:1 sobre branco, 5,15, 5,11, 5,03, 5,02, 4,79 e 4,72. O texto principal, `--ink: #181a19`, obtém 17,49:1 sobre branco; o verde de acento `#355c46`, 7,58:1. Quando uma cor não atinge o limiar, muda-se o token, não se argumenta na reunião.
O grupo de separadores da página inicial usa índice de tabulação móvel: só o separador ativo é acessível com Tab, os outros são retirados da ordem, e as setas esquerda/direita, Home e End movem o foco, com o comportamento predefinido da tecla anulado. É o modelo das práticas recomendadas para componentes acessíveis, implementado, não citado. Nas componentes base do site há 21 etiquetas acessíveis, 7 estados premido/não premido, 3 ligações entre título e região, 2 estados de seleção, 2 regiões que anunciam alterações e 2 ligações entre comando e o painel que controlam.
Na página inicial há 38 elementos animados em loop infinito, iniciados automaticamente, que duram mais de cinco segundos — exatamente a situação regulada pelo critério «Pausar, parar, ocultar». Os 38 estão cobertos por botões de pausa: ao premir, as animações passam ao estado parado e o estado do botão muda. Em separado, em `prefers-reduced-motion: reduce` uma regra global anula qualquer animação e transição, desativa a rolagem suave, elimina o deslocamento ao passar com o rato e esconde o botão de pausa. Na folha principal há sete blocos destes, mais um na folha base.
Contorno sólido de 2 px, no verde de acento, com 5 px de distância, aplicado por `:focus-visible` — portanto aparece na navegação com teclado e não no clique com rato. Verificado no navegador, elemento por elemento, no cabeçalho e nos primeiros comandos no conteúdo: quatro elementos diferentes, o mesmo contorno. Em lado nenhum da folha de estilo existe um contorno eliminado sem substituto.
No formulário de contacto do site, as etiquetas estão implícitas nos campos, o erro é marcado como alerta e a confirmação como estado — portanto os leitores de ecrã anunciam-nos sem que o utilizador tenha de procurar. A armadilha para bots está corretamente escondida: elemento pai sem exibição, marcado como oculto para tecnologias assistivas e retirado da ordem de tabulação. A nossa própria auditoria confirma que as regras de etiquetagem, de nome para seletores e de preenchimento automático passam todas.
Corremos axe-core 4.10.2 na página em produção, não num ambiente de teste, numa amostra de dez páginas que cobre padrões diferentes: página inicial, catálogo, uma página de produto, o índice de serviços, uma página de serviço, a matriz de soluções, uma combinação da matriz, contactos, tarifas, um artigo e um documento jurídico. O resultado bruto é escrito na página, com o número de nós, não resumido em «conforme».
Da mesma auditoria: a 320 px de largura, o comando do cabeçalho e o botão de menu ultrapassam o ecrã em 22 px e a página desloca-se horizontalmente — a aritmética é 362 px de conteúdo num contentor de 280 px. Nos documentos jurídicos, os links no texto não se distinguem do texto à volta senão pela cor, e a relação entre o acento e o texto de corpo é 1,01:1, portanto o sublinhado é obrigatório. Ambos estão abertos, com correção escrita. Publicamo-los porque um comprador que pede acessibilidade merece ver como é uma lista real de defeitos.
O site não tem tema escuro. O bloco de tokens é declarado para três seletores que recebem valores idênticos, e no código não existe qualquer regra para a preferência de esquema do sistema. Verificado no browser com o esquema escuro emulado: a página continua branca. A consequência útil: todos os rácios de contraste medidos são válidos em ambos os esquemas. A consequência incómoda: o comutador de tema é código morto do ponto de vista da cor. Um tema escuro real significa re-medição integral do contraste, não a cópia dos valores.
Uma única família para títulos e texto, com espaçamento entre letras ajustado por nível — mais apertado nos títulos grandes, `-0,055em` nos níveis um e dois, `-0,035em` no nível três — e peso 500 nos títulos. Os parágrafos usam equilibragem de linhas, para que não fique uma palavra sozinha na última linha. O contentor tem largura máxima de 1240 px com margens de 48 px, e os botões têm a mesma altura de linha em todo o lado. São regras escritas na folha de estilo, por isso aplicam-se também depois de sairmos.
Qué aspecto tiene
A primeira entrega é a lista das coisas que as pessoas vêm fazer, por ordem de frequência, com o local onde hoje param. Sem isso, qualquer novo ecrã é uma preferência estética. Com isso, cada decisão seguinte tem um critério.
Definem-se as cores, os fundos em que de facto aparecem e o rácio de cada par, calculado. Entregamos a tabela de pares com os seus rácios. É muito mais barato do que descobrir no fim que a paleta escolhida não pode ser usada para texto pequeno.
Cada componente interativo recebe, no mesmo commit, o aspeto e o comportamento: o que acontece ao Tab, às setas, ao Escape, o que é anunciado e como. O padrão de teclado acrescentado depois é uma reescrita, não uma complementação.
Executamos a ferramenta numa amostra que cobre padrões diferentes e entregamos a saída bruta, não um resumo. Cada constatação recebe o local no código, o critério violado, a correção proposta e o critério de verificação após a correção — por exemplo: o número de nós de contraste deve descer para zero na página que contém apenas o cabeçalho e o rodapé.
Entregamos os tokens, os componentes, o documento de auditoria e a lista do que não pôde ser verificado, com o motivo. Neste site, a lista inclui a ativação com teclado e a emulação da preferência de movimento reduzido no navegador — ambas limitações da ferramenta, ambas escritas tal como estão.
Os dados
Las preguntas que hace cualquiera que tenga un delegado de protección de datos — hechas aquí antes de que las haga él.
Un caso
A situação
Site próprio, recentemente refeito, com um sistema de tokens já existente. Ninguém tinha reclamado nada. A pergunta não foi «está bonito?», mas «o que diz uma ferramenta que não tem opiniões?».
Qué construimos
Injetámos axe-core 4.10.2 na página em produção e executámo-lo em dez páginas escolhidas por padrões diferentes. A única regra WCAG sistematicamente violada era o contraste. Agrupámos os nós por par texto–fundo, recalculámos cada rácio com a fórmula de luminância relativa do standard — para não dependermos de uma única ferramenta — e procurámos cada cor na folha de estilo. Oito valores escritos diretamente no código produziam todos os falhanços permanentes: 3,89:1 nos 25 links do rodapé, 2,88:1 nos números dos passos, 3,72:1 na linha com os links jurídicos, e mais cinco entre 3,99 e 4,49. O token certo já existia; o problema era que oito regras o contornavam.
Qué salió
Os oito valores foram substituídos pelo token, e o token foi ajustado para passar o limiar em todos os sete fundos do site. Verificado duas vezes: no repositório já não aparece nenhuma das oito cores, e a folha de estilo servida hoje em produção contém apenas o token. Recalculado de forma independente: 4,72:1 no pior caso e 5,45:1 sobre branco. O resto do audit confirmou o que já estava correto — o indicador de foco, o padrão de teclado nos grupos de separadores, os rótulos e estados do formulário, a cobertura completa das animações com botões de pausa.
Qué no dice el caso
Duas constatações ficaram em aberto e estão escritas como tal: a 320 px de largura o cabeçalho ultrapassa o ecrã em 22 px, e nos documentos jurídicos os links no texto distinguem-se apenas pela cor, com um rácio de 1,01:1 face ao texto circundante — a cor sozinha não é suficiente, é necessária sublinhadura. E o limite de método: uma ferramenta automática cobre parte dos critérios. A ativação com teclado não pôde ser testada com as ferramentas disponíveis e está marcada como não verificada, não passada.
Perguntas
Significa números, não adjetivos. O texto secundário neste site usa um único token, `#666b65`, que obtém entre 4,72:1 e 5,45:1 nos sete fundos onde aparece — o limiar exigido para texto pequeno é 4,5:1. O foco é um contorno de 2 px que só aparece na navegação com teclado. O movimento tem um botão de paragem e é totalmente anulado quando existe a preferência de movimento reduzido no sistema. Cada uma destas afirmações tem um lugar no código e uma forma de verificação.
axe-core 4.10.2, executado na página em produção, em dez páginas que cobrem padrões diferentes — a página inicial, o catálogo, uma página de produto, o índice e uma página de serviço, a matriz de soluções e uma combinação dela, o contacto, os preços, um artigo, um documento jurídico. O resultado bruto, com o número de nós por página, entra no documento. Depois disso recalculamos manualmente os rácios de contraste com a fórmula do standard, para não dependermos de uma única ferramenta. E escrevemos explicitamente o que não pôde ser verificado.
No momento do audit, a única regra sistematicamente violada era o contraste: 31 a 43 nós por página, dos quais 31 no cabeçalho e no rodapé, portanto multiplicados pelas 147 páginas. Oito cores escritas diretamente na folha de estilo produziam 2,88 a 4,49:1; a mais grave, a 10 px e 3,72:1, era a linha com os links jurídicos. Todas as oito estão agora substituídas pelo token, e a correção está na folha servida de produção. Continuam em aberto duas coisas: a 320 px o cabeçalho ultrapassa o ecrã em 22 px, e nos documentos jurídicos os links no texto não se distinguem senão pela cor, com um rácio de 1,01:1 face ao texto circundante. Ambas têm a correção escrita.
Porque, de outro modo, «acessível» é uma palavra sem custo. Qualquer pessoa pode escrever que cumpre a norma; poucos mostram a lista de não conformidades, com o número de nós e a linha na folha de estilos. Se trabalharmos juntos, você vai receber o mesmo tipo de lista sobre o seu site — incluindo as partes que não nos favorecem. É mais barato saber por nós.
Não, e digo isso porque é verificável: o bloco de tokens está declarado para três seletores que recebem valores idênticos, e no código não existe nenhuma regra para a preferência de esquema. Emulando o esquema escuro no browser, a página continua branca. O lado positivo é que todos os rácios de contraste medidos são válidos em ambos os esquemas. O que falta resolver é que um comutador de tema que não altera as cores é código morto. Um tema escuro real significa re-medição completa do contraste — não se transfere do claro.
Podem, e por isso têm duas saídas. Primeira: cada elemento animado infinitamente está coberto por um botão de pausa — na página inicial verificámos que todos os 38 estão cobertos, zero descobertos. Segunda: na preferência de movimento reduzido do sistema, uma regra global anula qualquer animação e transição, para a rolagem suave e até esconde o botão de pausa. Também verificámos a armadilha clássica: se uma animação começa com opacidade quase zero e é anulada, o conteúdo pode ficar invisível. Aqui isso não acontece, porque os elementos não têm opacidade de base reduzida.
Entregamos os tokens e os componentes em código. Um sistema de design que fica na ferramenta de projeto erode-se à primeira urgência: alguém escreve uma cor diretamente no componente porque «assim fica melhor aqui», e passados seis meses você tem oito cores paralelas que falham a verificação. Exatamente isso aconteceu connosco, está documentado acima, e por isso o token é a única fonte de verdade para a cor do texto secundário.
Algumas coisas concretas, escritas tal como estão no audit. Ativação com teclado: o painel de browser usado não produz a ativação por defeito — premir Enter num botão não gera clique — por isso não reportamos conclusões sobre Enter e Space. Emulação da preferência de movimento reduzido: não a conseguimos ativar no browser, por isso a regra foi verificada na origem, e um teste manual com a preferência ativada continua recomendado. E as métricas de carregamento percebido não estavam disponíveis na ferramenta, por isso estão marcadas como não medidas, não estimadas.
Não, e ninguém honesto o devia fazer com base numa ferramenta automática. Uma ferramenta cobre parte dos critérios; o resto exige verificação manual, e alguns exigem utilizadores reais. O que garantimos é o método: amostra declarada, ferramenta e versão declaradas, resultado bruto publicado, rácios recalculados independentemente, correção com critério de verificação, e a lista explícita do que não pôde ser verificado. Um certificado sem essa lista não diz nada.
14 delas são código e ficheiros dos nossos repositórios. Não publicamos o nome nem a linha: juntos, numa única página, descreveriam com demasiada precisão como estão construídos sistemas que não são só nossos. Percorremo-los consigo, no repositório, a pedido — a verificação continua possível, só que se faz numa conversa.
Conte-nos o seu processo. Em conjunto decidimos o que vale a pena construir, o que podemos ligar e como verificamos o resultado.