Ficha 01 · WCAG, contraste, teclado · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

WCAG POUR
Contraste
Teclado
Alts e legendas

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.

Perceptível — o conteúdo chega pelos sentidos disponíveis (texto, áudio, visual).
Operável — qualquer pessoa consegue interagir (teclado, voz, toque, comutador).
Compreensível — conteúdo e operação claros e previsíveis.
Robusto — código funciona com tecnologias assistivas (leitor de ecrã, lupa…).

Níveis: A (mínimo), AA (padrão legal UE), AAA (excelência).

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."

a) Mito. ~15-20% têm alguma deficiência permanente; mais utilizadores temporários e situacionais. b) Mito. Custa 10× mais — algumas decisões já são irreversíveis. c) Facto. Directiva 2016/2102 (público) e EAA 2019/882 (privado) referenciam EN 301 549 → WCAG 2.1 AA. d) Mito. Alts são o mínimo; faltam teclado, contraste, semântica, legendas, etc.

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 ≈ ? ___

a) ≈ 5.16:1 → ✓ AA normal; ✓ AA grande; ✗ AAA normal. b) ≈ 3.54:1 → ✗ AA normal; ✓ AA grande (≥ 18pt); ✗ AAA. c) ≈ 19.6:1 → ✓ tudo (passa AAA largamente).

(Aceitar valores próximos; importam as conclusões.)

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?

Problema: ~8% dos homens com daltonismo deuteranopia/protanopia confundem vermelho/verde. Sem outra pista, ficam sem informação.

Soluções (combinar 2 destas): 1. Forma/padrão diferente (linha contínua vs tracejada; setas ↑/↓). 2. Texto ao lado de cada linha ("subir 12%", "descer 4%"). 3. Tooltips com valores ao passar. 4. Padrões de fundo em áreas. 5. Mudar paleta para azul/laranja (mais distinguível em daltonismo).

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>

Ordem natural do DOM: 1. Logo (link) 2. Menu (button) 3. Saltar para conteúdo (link) 4. Sobre (link) 5. Subscrever (button) 6. Input email

(O <h1> e <p> não são focáveis. Idealmente o Skip link deveria ser o primeiro — mover antes do header.)

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; }

Problema: remove o foco visível em tudo — quem navega por teclado fica sem saber onde está. Falha WCAG 2.4.7 (Focus Visible).

Correção:

*:focus { outline: none; } /* opcional, mas... */

*:focus-visible {
  outline: 2px solid #2D6CDF;
  outline-offset: 2px;
  border-radius: 4px;
}

:focus-visible aparece só quando o foco vem de teclado, não de clique do rato. Permite manter o efeito limpo mas garantir acessibilidade.

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".

a) alt="Aulify" (nome da empresa, porque o logo é o link para home). b) alt="" (decorativa — leitor ignora). c) alt="Vendas trimestrais: Q1 100k, Q2 150k, Q3 130k, Q4 200k." (informação completa). d) Imagem com alt="" ou aria-hidden="true", e o texto "Editar" no botão. Não duplicar. e) alt="Equipa Aulify na inauguração do escritório." (descrever o que conta).

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?

Subtítulos — tradução do diálogo falado para outra língua. Para falantes que ouvem mas não entendem a língua.
Legendas (Closed Captions) — diálogo + sons relevantes ("música suave", "porta a bater") na mesma língua. Para surdos/baixa audição e ambientes sem som.
Transcrição — texto completo descarregável (incl. orador, contexto). Para leitura, SEO, pesquisa, e acesso por leitor de ecrã.

Acessibilidade: vídeo deve ter pelo menos CC; podcast deve ter transcrição.

Parte V · Semântica

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

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

Anunciado pelo leitor de ecrã como "botão" + nome — <div> não tem função semântica.
Focável por teclado automaticamente e responde a Enter/Espaço — <div> precisa de tabindex="0" e handlers manuais.
Tipo correto (submit/button/reset) — comporta-se bem dentro de formulários.

Bónus: 4) Estados nativos (:hover, :focus, :disabled); 5) Está visível para extensões/comandos de voz que pedem "click button X".