Rômulo SutilSenior Product Designer
Todos os cases

Acessibilidade · CAIXA · Guia A11y

Guia de Acessibilidade CAIXA

O Guia A11y CAIXA transforma WCAG e eMAG em critérios práticos, com exemplo certo e errado, para aplicar do rascunho à homologação.

Papel
Autor do guia e consultor de acessibilidade
Time
Solo
Escopo
Mapeamento da WCAG 2.1 e do eMAG, design editorial e workshops
Cliente
CAIXA, via Qintess
Capa do Guia A11y CAIXA: logo da CAIXA e telas do guia com ilustrações de pessoas com e sem deficiência

Resultados

  • 100+designers capacitados em workshops e mentorias
  • 30+critérios documentados, com exemplo certo e errado

O problema

Os times não aplicavam acessibilidade porque a norma era longa, densa e distante da rotina de design.

Os checklists ficavam em documentos que ninguém lia. Os produtos saíam fora do padrão, e a correção chegava tarde, só na homologação.

AntesPDFnorma longa e difícil de consultar
Depois100+designers capacitados

Decisões

  1. Navegação pelos 4 princípios

    O guia não é um PDF. Os 4 princípios viram uma navegação lateral, com cada critério e seu número. O designer consulta o que precisa em vez de ler de ponta a ponta.

    Os 4 princípios da WCAG organizados em grade, com os critérios de cada umAmpliar imagem

  2. Certo e errado lado a lado

    Cada critério mostra o acerto e o erro na mesma tela. Ver o problema ensina mais rápido do que ler a regra.

    Critério de legendas com o exemplo acessível e o não acessível lado a ladoAmpliar imagem

  3. Alerta de segurança no critério 3.3.1

    No critério 3.3.1 (identificação de erros), alertei que seguir a regra ao pé da letra pode facilitar ataques de força bruta em cadastros. Acessibilidade e segurança entram na mesma conversa.

    Critério 3.3.1, identificação de erros, com a dica sobre risco de força brutaAmpliar imagem

  4. Etiqueta de papel em cada critério

    Cada critério leva uma etiqueta de papel, como Designer ou Dev. Cada um sabe onde começa e onde termina a sua parte.

    Critério de audiodescrição com a etiqueta de papel e um exemplo real da CAIXAAmpliar imagem

Processo

  1. Norma longe da rotina

    A norma não chegava à rotina de design: era longa demais para consultar no dia a dia.

  2. Guia visual

    Um guia visual, com acerto e erro lado a lado, faria os times aplicarem os critérios na hora.

  3. Ajuste nos workshops

    Nos workshops, testar contraste e leitor de tela travava os times. Acrescentei dicas de plugins do Figma e do Chrome DevTools.

  4. Publicação no Figma

    Publiquei o guia no Figma como referência, separando o que é do design e o que é do desenvolvimento.