Ficha 02 · ARIA, formulários, motion, auditoria

Parte I · ARIA

Exercício 1 · Regras de ouro (10 pts)

Indica 2 regras importantes ao usar ARIA.

Exercício 2 · Botão hamburger (15 pts)

Escreve o HTML de um botão hamburger que abre/fecha um menu, com ARIA correto.

Exercício 3 · Toast vivo (10 pts)

Tens este toast que aparece após o utilizador guardar:

<div class="toast">Encomenda guardada.</div>

Que atributo ARIA falta para que um leitor de ecrã o anuncie automaticamente? E qual seria a diferença entre polite e assertive?

- **`polite`** — anuncia quando o leitor estiver disponível (não interrompe). Para confirmações.
- **`assertive`** (ou `role="alert"`) — interrompe imediatamente o leitor. Para **erros críticos** ou problemas de segurança. Usar com parcimónia (irritante se demais).

</div>

## Parte II · Formulários

### Exercício 4 · Refazer formulário (20 pts)

Este formulário tem **6 problemas** de acessibilidade. Identifica-os e reescreve-o corretamente.

```html
<form>
  <div>Email</div>
  <input type="text" placeholder="O teu email">

  <div>Password</div>
  <input type="text">

  <div onclick="enviar()">Entrar</div>
</form>

Exercício 5 · Erro descritivo (10 pts)

O input do email falha a validação. Que mensagem mostrar (e como), em vez de só "Erro"?

Parte III · Motion

Exercício 6 · Reduced motion CSS (10 pts)

Escreve o CSS que desativa/encurta todas as animações e transições quando o utilizador pediu menos movimento.

Exercício 7 · Onde está o perigo (10 pts)

Indica 2 padrões de animação que podem ser problemáticos e porquê.

Parte IV · Auditar

Exercício 8 · Plano de teste (15 pts)

Acabaste de implementar uma página de checkout. Descreve 5 testes manuais que farias antes de considerar acessível (não basta correr o Lighthouse).

Parte V · Cenário

Exercício 9 · Briefing (10 pts)

Um cliente pede um site institucional para o município. Que 3 requisitos legais e técnicos de acessibilidade colocarias logo no briefing?