Poucos problemas respondem pela maior parte das falhas de acessibilidade. Trabalhe neles aqui: leia o que quebra, compare o antes e o depois e marque cada correção para ver a contagem de violações cair a zero.
As mesmas regras movem scanners automáticos como o axe, e este próprio site barra todo pull request que as viole. Saiba mais nas receitas.
Leitores de tela não anunciam nada para uma imagem sem o atributo alt: o conteúdo simplesmente se perde.
Antes
<img src="/chart.png" />Depois
<img src="/chart.png" alt="Revenue grew 24% in Q2" />Um campo só com placeholder não tem nome acessível, então a tecnologia assistiva não sabe dizer o que digitar.
Antes
<input type="email" placeholder="Email" />Depois
<label for="email">Email</label>
<input id="email" type="email" />Um botão que contém só um ícone (ou um SVG) não tem texto, então é anunciado apenas como “botão”.
Antes
<button><svg ...></svg></button>Depois
<button aria-label="Close dialog"><svg aria-hidden="true" ...></svg></button>Texto cinza-claro sobre branco fica abaixo da razão 4,5:1 e se torna ilegível para quem tem baixa visão.
Antes
color: #b5b5b5; /* 1.9:1 on white */Depois
color: #595959; /* 7:1 on white */Remover o contorno sem pôr nada no lugar deixa quem usa o teclado sem ver onde está o foco.
Antes
:focus { outline: none; }Depois
:focus-visible { outline: 2px solid #0070f3; outline-offset: 2px; }Pular de <h1> direto para <h4> quebra a estrutura do documento pela qual quem usa leitor de tela navega.
Antes
<h1>Title</h1>
<h4>Section</h4>Depois
<h1>Title</h1>
<h2>Section</h2>