Acessibilidade: cinco coisas que resolvem a maioria dos problemas

Acessibilidade tem fama de ser um assunto enorme, com uma norma de centenas de páginas. É verdade — e também é verdade que uma mão-cheia de hábitos apanha a maior parte dos problemas reais de um site normal.

1. HTML com significado

É o mais importante, e o mais barato: um <button> já é focável, já responde ao Enter e ao espaço, e já se anuncia como botão.

<!-- Um div não é nada disto, e exige recriar tudo à mão -->
<div class="botao" onclick="guardar()">Guardar</div>

<button type="button" onclick="guardar()">Guardar</button>

O mesmo vale para <nav>, <main>, <header> e os títulos: um leitor de ecrã salta de secção em secção e de título em título. Sem eles, é tudo uma parede de texto.

2. Texto alternativo que diz alguma coisa

<!-- Informativa: descreva o que ela mostra -->
<img src="grafico.png" alt="Visitas mensais, de 200 em janeiro a 1400 em agosto" />

<!-- Decorativa: alt vazio, para o leitor a ignorar -->
<img src="ornamento.svg" alt="" />

Um alt vazio é uma decisão legítima. Não ter atributo nenhum é que não: aí o leitor de ecrã lê o nome do ficheiro.

3. Etiquetas ligadas aos campos

<label for="email">E-mail</label>
<input id="email" type="email" />

Sem a ligação, quem usa leitor de ecrã ouve "caixa de texto" e mais nada. E há um bónus para toda a gente: com o for, clicar na etiqueta põe o cursor no campo.

4. Foco visível

/* Nunca. É apagar o mapa a quem navega por teclado. */
*:focus { outline: none; }

/* Se o contorno do browser não combina, substitua-o — não o apague */
:focus-visible {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

5. Contraste que se lê

O mínimo é 4,5:1 entre o texto e o fundo (3:1 para texto grande). Cinzento-claro sobre branco é bonito num ecrã novo, num escritório, com trinta anos. Deixa de ser legível ao sol, num portátil antigo, ou com a vista cansada.

O teste de dez segundos

Ponha o rato de lado e percorra a página inteira com o Tab. Se conseguir chegar a tudo, se souber sempre onde está, e se nada ficar preso — está melhor do que a maioria dos sites que visita hoje.