Acessibilidade

Acessibilidade é a parte do trabalho que decide se a interface existe pra todo mundo ou só pra quem usa mouse, enxerga bem e tem a mão firme.

Não é uma camada que se aplica no fim. Quase tudo se resolve na estrutura, e a estrutura é decidida quando você desenha.

As quatro que resolvem a maior parte

• contraste: texto normal precisa de pelo menos 4.5:1 contra o fundo. Texto grande, 3:1. Isso é decisão de design, não de código
• foco visível: quem navega de Tab precisa ver onde está. Se o seu design system não tem estado de foco, ele está incompleto
• tag certa: <button> em vez de div clicável. Resolve teclado e leitor de tela de uma vez
• texto alternativo: imagem que informa precisa de descrição. Imagem decorativa leva alt="" pra ser ignorada

<img src="grafico.png" alt="Vendas subiram 30% no último trimestre">
<img src="ornamento.svg" alt="">

O teste que leva um minuto

Guarde o mouse e navegue a tela inteira de Tab. Se você não conseguir chegar em algum controle, ou não souber dizer onde está, a tela tem um problema real, e você acabou de encontrar sem instalar nada.

Sobre aria

aria-label, aria-expanded e companhia servem pra dar nome e estado a coisas que o HTML sozinho não descreve. Regra de ouro: aria é remendo. Se dá pra resolver trocando a tag, troque a tag.