Extra — Acessibilidade (a11y)

Objectivo: fazer sites que toda a gente consegue usar — incluindo quem usa leitor de ecrã ou só o teclado. Bónus: melhora o SEO. Pré-requisito: F1 (HTML), F2 (CSS).

1. Porque importa

• É inclusão (pessoas com deficiência visual, motora…).
• É lei em muitos contextos.
• O Google premeia páginas acessíveis → melhor SEO.

2. As bases que resolvem 80%

• alt em imagens — descreve a imagem (alt="" só se for decorativa).
• <label> em cada <input> — ligado por for/id.
• Semântica — header/main/nav/footer + títulos por ordem.
• Contraste — texto legível sobre o fundo (rácio ≥ 4.5:1).
• Teclado — tudo o que se clica deve ser alcançável com Tab e ter foco visível.

<img src="grafico.webp" alt="Vendas subiram 20% em 2026" />

<label for="email">Email</label>
<input id="email" type="email" />

3. ARIA — só quando o HTML não chega

<button aria-label="Fechar">✕</button>   <!-- o ✕ não diz nada a um leitor de ecrã -->

Regra de ouro: HTML semântico primeiro; ARIA só para preencher lacunas.

4. Como testar rápido

• Navega a página só com o teclado (Tab, Enter).
• Corre uma auditoria (ex.: Lighthouse no Chrome → separador Accessibility).

✅ Exercício

Pega numa página tua e: (1) confirma que toda a imagem tem alt; (2) percorre-a só com Tab e vê se chegas a todos os botões/links.