Acessibilidade e arquitetura do CSS — CSS moderno, acessibilidade e arquitetura

Foco visível e acessível

Aqui vira a chave: até agora você escrevia CSS para ficar bonito. Agora vai escrever para que todo mundo consiga usar, navegando como navegar. Isso é acessibilidade, e separa quem faz sites de quem faz sites de verdade.

O foco indica qual elemento receberá o teclado. ⚠️ Cilada clássica: matá-lo com outline: none "porque é feio". Se você tira sem alternativa, deixa às cegas quem navega com teclado, e é muita gente. :focus-visible resolve o dilema de sempre: mostra o anel de foco quando se navega com teclado, mas não a cada clique de mouse. O melhor dos dois mundos.

.botao:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

Respeitar as preferências do usuário

O sistema operacional expõe preferências que o CSS pode ler com media queries:

/* Reduz ou elimina animações para quem pede (tontura, vestibular) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Adapta o tema ao modo escuro do sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f172a;
    --texto: #e2e8f0;
  }
}

Contraste

⚠️ Cilada clássica: aquele cinza clarinho sobre branco que fica tão elegante na sua tela nova e em plena luz do dia é, para muita gente, ilegível. O texto deve ter contraste suficiente sobre o seu fundo. As diretrizes WCAG AA pedem uma razão mínima de 4.5:1 para texto normal e 3:1 para texto grande. Não confie no olho: verifique sempre o contraste com uma ferramenta.

Arquitetura: BEM

À medida que o CSS cresce, a maior dificuldade não é escrevê-lo e sim mantê-lo sem que ele desmorone em cima de você. ⚠️ Cilada clássica: nomes mágicos tipo .azul2 ou .caixaFinal que em uma semana nem você sabe o que fazem. BEM (Block, Element, Modifier) é uma convenção de nomes que torna seu CSS previsível e legível num relance:

.cartao { }              /* Block: o componente */
.cartao__titulo { }      /* Element: uma parte do bloco (duplo sublinhado) */
.cartao--destacado { }   /* Modifier: uma variante (duplo traço) */

<article class="cartao cartao--destacado">
  <h2 class="cartao__titulo">Olá</h2>
</article>

Controlar a especificidade

A especificidade decide qual regra vence quando várias afetam o mesmo elemento. Uma boa arquitetura a mantém baixa e plana:

Prefira classes a IDs ou a seletores de tag encadeados.
Evite aninhar em excesso: .menu .lista .item a é frágil e difícil de sobrescrever.
Reserve !important para casos excepcionais; costuma ser sintoma de uma especificidade descontrolada.

BEM, ao usar classes planas de um único nível, mantém a especificidade constante e te poupa das guerras de !important (aquelas em que só você perde).

E com isso você fecha a trilha de Web. Para um segundo e olhe para trás: você começou com um <h1> e já domina semântica, layout, formulários, animações, acessibilidade e CSS moderno sustentável. Você sabe construir interfaces completas e bem-feitas. Parabéns de verdade. 🎉

Só falta uma coisa: elas precisam se mexer. Reagir ao clique, validar, atualizar dados sem recarregar a página... isso é JavaScript, e é justamente o que vem agora. Você está na metade do caminho, e a melhor parte está só começando.