CSS e acessibilidade: o que todo front-end deveria saber

Acessibilidade não é só uma responsabilidade do HTML semântico — o CSS tem um papel enorme em tornar (ou não) uma interface utilizável por todas as pessoas.

Nunca remova o foco visível sem substituí-lo

/* Evite isto sem alternativa */
:focus { outline: none; }

/* Prefira personalizar mantendo a visibilidade */
:focus-visible {
  outline: 2px solid #5b53f0;
  outline-offset: 3px;
}

Quem navega pelo teclado depende do indicador de foco para saber onde está na página. Removê-lo sem um substituto claro é uma das barreiras de acessibilidade mais comuns — e mais fáceis de evitar.

Respeite prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Esse media query reflete uma preferência do sistema operacional da pessoa usuária, geralmente ligada a sensibilidade a movimento — vale a pena declarar isso globalmente, como fazemos neste site.

Contraste de cores

O WCAG 2.1 recomenda uma razão de contraste mínima de 4.5:1 entre texto e fundo para texto normal (3:1 para texto grande). Ferramentas de design com neumorphism e glassmorphism exigem atenção redobrada aqui, já que dependem de sombras e transparências sutis.

Tamanhos de toque

Elementos interativos devem ter uma área de toque confortável — próxima de 44x44px é uma referência comum, especialmente relevante ao desenhar botões com pouco padding.

Não dependa só de cor para comunicar estado

Um campo de formulário com erro marcado apenas com uma borda vermelha é invisível para quem tem daltonismo. Combine cor com um ícone, texto ou padrão adicional.

Conclusão

Acessibilidade em CSS costuma custar poucas linhas extras de código e beneficia todo mundo — inclusive quem está usando o site sob luz solar direta ou com a tela quebrada.