Acessibilidade

Um site que alguns visitantes não conseguem usar é um site que dispensa clientes em silêncio. Tratamos o WCAG 2.2 nível AA como o piso de engenharia de toda construção, e o verificamos por medição, não com uma afirmação em um folheto.

Por que importa

Três razões, todas práticas

É cada vez mais uma exigência legal

A regulação de acessibilidade só se amplia: regras para o setor público, legislação de acessibilidade aplicada à web, e exigências de consumo em cada vez mais mercados. Somos engenheiros, não advogados, e não oferecemos aconselhamento jurídico. O que podemos dizer com clareza é que um site construído e verificado segundo o WCAG 2.2 AA se apoia no padrão que esses regimes referenciam, e um site que o ignora carrega um risco que você não precificou.

Se sobrepõe a ser encontrado

A mesma estrutura que serve um leitor de tela serve um robô de busca: títulos de verdade em ordem, controles rotulados, texto descritivo nas imagens, links que dizem para onde vão. O trabalho de acessibilidade e o de busca se reforçam, e é por isso que os tratamos como uma disciplina só, não como duas faturas.

É um sinal de qualidade que o comprador sente

Contraste confortável, alvos de toque generosos, uma página que funciona pelo teclado, movimento que respeita as suas preferências: os visitantes raramente nomeiam essas coisas, mas as sentem como cuidado. A ausência delas soa como desleixo, justamente na página em que você está pedindo confiança.

Na prática

O que o AA significa em uma página real

O padrão parece abstrato até ser aplicado. Isto é o que ele significa, concretamente, em todo site que entregamos.

  • Contraste nos dois esquemas de cores. As cores de texto e de interface são verificadas contra os fundos em que realmente aparecem, no modo escuro com o mesmo rigor do claro. O esquema escuro é desenhado junto com o claro, nunca invertido no final.
  • O site inteiro funciona pelo teclado. Um link de pular navegação como primeira parada, um indicador de foco visível em todo elemento interativo, e uma ordem de tabulação que segue a ordem de leitura da página.
  • Alvos confortáveis. Todo link e botão ultrapassa o tamanho mínimo de alvo em todo tamanho de tela, para que um dedo no celular acerte o que mirou.
  • Movimento que pede permissão. Tudo que anima é desativado para um visitante cujo sistema pede movimento reduzido, e um estado estático bem pensado é mostrado no lugar.
  • A semântica carrega a estrutura. Landmarks, exatamente um título principal, níveis de título em ordem, campos de formulário rotulados, e texto alternativo descritivo em toda imagem que carrega significado.
  • Formulários que falham com ajuda. Campos obrigatórios são marcados, erros são anunciados em texto e não apenas por cor, e um envio rejeitado recebe uma explicação honesta em vez de um descarte silencioso.
  • Texto que se comporta sob zoom. O layout se reorganiza quando o visitante amplia o texto, sem colunas cortadas e sem rolagem lateral.

Verificação

Verificado por página, por tamanho de tela, por esquema

01

Uma auditoria automatizada que controla o deploy

Toda página construída é auditada contra o WCAG 2.2 AA nas larguras de celular, tablet e desktop, nos esquemas claro e escuro, a cada mudança. Uma violação não gera um relatório que alguém talvez leia; ela reprova o build, e um build reprovado não publica. Regressões de acessibilidade são pegas antes de um visitante encontrá-las.

02

Medição, não olhômetro

As razões de contraste são calculadas, os tamanhos de alvo são medidos em pixels, a ordem dos títulos é analisada, e as mesmas checagens rodam em toda versão de idioma de toda página. O que uma lista afirma, a suíte prova.

03

Mãos no teclado também

As checagens automatizadas pegam muita coisa, mas não tudo. Antes de um site publicar, também o usamos como usaria um visitante real com necessidades de acesso: navegamos inteiramente pelo teclado, lemos com o texto ampliado, e percorremos os formulários pensando nos anúncios do leitor de tela.

Integrada

Integrada desde a paleta, nunca remendada

Remendar acessibilidade depois é o jeito caro de obtê-la: recolorir uma paleta de marca que nunca passou no contraste, reconstruir componentes que não aceitam foco, reescrever páginas cujos títulos eram decoração. Seguimos o caminho oposto. O design system é verificado quanto ao contraste nos dois esquemas antes de qualquer página ser composta, os componentes interativos nascem pensados para o teclado, e a auditoria roda desde o primeiro deploy do projeto, não no último. No lançamento, a acessibilidade não é uma tarefa em uma lista; é uma propriedade do código que os testes mantêm verdadeira.

Comece um projeto de site [email protected]

Pergunte o que quiser sobre o padrão, ou peça para avaliarmos o seu site atual. Fale conosco pelo formulário de contato ou em [email protected].