Ficha 01 · WCAG, contraste, teclado

Parte I · Princípios

Exercício 1 · POUR (10 pts)

Indica os 4 princípios da WCAG e o que cada um significa em 1 frase.

Exercício 2 · Mito vs facto (10 pts)

Para cada afirmação, diz se é mito ou facto e justifica numa frase.

a) "Acessibilidade só interessa a 1% das pessoas." b) "Adicionar acessibilidade no fim é mais barato." c) "WCAG AA é o padrão legal na UE." d) "Basta pôr alt nas imagens para o site ser acessível."

Parte II · Contraste

Exercício 3 · Calcular passa/falha (15 pts)

Para cada par texto/fundo indica o rácio aproximado e se passa em AA texto normal (≥ 4.5:1), AA texto grande (≥ 3:1) e AAA texto normal (≥ 7:1). Podes usar a regra: pretos puros vs brancos puros = 21:1.

a) Texto #FFFFFF sobre #2D6CDF. Rácio ≈ ? ___

b) Texto #888888 sobre #FFFFFF. Rácio ≈ ? ___

c) Texto #000000 sobre #FFFF00 (amarelo). Rácio ≈ ? ___

Exercício 4 · Cor + ícone (10 pts)

Tens um gráfico em que linhas verdes = subir e linhas vermelhas = descer. Que problema isto cria e como resolvê-lo sem mudar a cor?

Parte III · Teclado

Exercício 5 · Tab order (10 pts)

Tens este HTML. Indica a ordem em que o Tab vai percorrer os elementos focáveis:

<header>
  <a href="/">Logo</a>
  <button>Menu</button>
</header>
<main>
  <a href="#main">Saltar para conteúdo</a>
  <h1>Título</h1>
  <a href="/sobre">Sobre</a>
  <p>Texto sem links.</p>
  <button>Subscrever</button>
  <input type="email" placeholder="Email">
</main>

Exercício 6 · Focus visível (10 pts)

Encontras este CSS num projeto. Que problema tem e como corrigir mantendo a estética?

*:focus { outline: none; }

Parte IV · Alts e legendas

Exercício 7 · alt correto (15 pts)

Indica o alt adequado para cada imagem:

a) Logo da empresa que é também o link para a home.

b) Foto decorativa de fundo num hero section.

c) Gráfico de barras "Vendas trimestrais — Q1: 100k, Q2: 150k, Q3: 130k, Q4: 200k".

d) Ícone ✏️ ao lado do botão "Editar".

e) Foto de funcionários da empresa numa página "Sobre nós".

Exercício 8 · Legendas vs transcrição (10 pts)

Qual é a diferença entre legendas (CC), subtítulos e transcrição? Em que cenários usar cada um?

Parte V · Semântica

Exercício 9 · button vs div (10 pts)

Explica 3 razões pelas quais <button> é melhor que <div onclick="...">.