Módulo 8: Web para Todos (Acessibilidade)
2. Resumo da Aula Anterior
No último módulo, descobriste como a Semântica dá significado ao teu site. Hoje vamos usar esse significado para tornar o teu site inclusivo: acessível a pessoas com deficiência e muito mais fácil de usar para todos. Um site que não é acessível é um site que exclui utilizadores.
3. O Que Vais Aprender Hoje
Acessibilidade (muitas vezes abreviada como a11y) não é uma funcionalidade "extra", é a base da web:
- ✅ Os 4 princípios do WCAG (POUR).
- ✅ Como escrever
alttext descritivo e significativo. - ✅ Gestão de Foco: navegar apenas com o teclado (Tab).
- ✅ Atributos ARIA (Quando usar e quando evitar).
- ✅ Skip Links e Semântica de Landmarks (Marcos).
4. Teoria: Construir Sem Barreiras
O que é o POUR?
As diretrizes internacionais de acessibilidade baseiam-se em quatro pilares:
- Percebível: O utilizador tem de conseguir ver ou ouvir a informação.
- Operável: O utilizador tem de conseguir clicar, escrever ou navegar.
- Untensível: O conteúdo tem de ser claro e previsível.
- Robusto: O site tem de funcionar em vários navegadores e tecnologias de assistência.
O Texto Alternativo (alt) é a Voz da Imagem
Para um cego, uma imagem sem alt é um silêncio confuso.
Regra de Ouro: Se a imagem transmite informação (ex: um gráfico), o alt deve descrever essa informação. Se a imagem é apenas decorativa, usa alt="" para o leitor de ecrã a ignorar.
🦯 Analogia: O GPS na Escuridão
Imagina que estás a caminhar num edifício completamente às escuras:
- Links e Botões: São as maçanetas das portas. Tens de conseguir senti-las.
- Ordem de Foco (TAB): É o fio de ariane que te guia pelo caminho certo. Se o fio saltar do início para o fim de repente, ficas perdido.
- ARIA-Label: É uma etiqueta em braille na maçaneta que diz "Porta da Saída" em vez de ser apenas um metal frio.
ARIA: O Último Recurso
Existe uma regra famosa no mundo da a11y: "Se podes usar uma tag HTML nativa (como <button>), NÃO uses ARIA". Usa ARIA apenas se estiveres a criar algo tão complexo que o HTML básico não consiga explicar.
5. Exemplos de Código
Exemplo 1: Descrições de Imagens Inteligentes
<!-- Informativa -->
<img src="grafico-vendas.png" alt="Gráfico de barras mostrando aumento de 20% nas vendas de Verão">
<!-- Decorativa -->
<img src="linha-azul.png" alt="">Exemplo 2: Botões de Ícones (aria-label)
<button aria-label="Fechar Janela">
<span aria-hidden="true">×</span>
<!-- O span é escondido para o leitor não ler "XIS" -->
</button>6. Agora é a Tua Vez! (Auditoria de Acessibilidade)
Vamos testar se o teu site é amigável para todos. Segue estes passos:
- O Teste do Teclado: Abre o teu
index.htmlno browser. Larga o rato. Tenta chegar a todos os links e botões usando apenas a tecla TAB. Consegues ver em que botão estás (o contorno azul)? - Links Vazios: Procura no teu código links que sejam apenas ícones (ex: redes sociais). Adiciona-lhes um
aria-labeldescritivo. - Contraste: Olha para os teus textos. Estão escritos em cinzento claro sobre fundo branco? Tenta usar cores com mais contraste para quem tem visão reduzida.
- Ocultação Corajosa: Se tens ícones decorativos (como estrelas ou setas), adiciona-lhes
aria-hidden="true"para não "sujar" a leitura de quem usa áudio.
7. Verificação de Conhecimento
Um bom programador faz sites que funcionam. Um excelente programador faz sites que todos podem usar.
8. Resumo do Que Aprendemos
- 📌 a11y é sobre incluir todos os utilizadores.
- 📌 O POUR guia as decisões de design e código.
- 📌 Nunca use imagens sem alt (descritivo ou vazio).
- 📌 O TAB deve seguir a ordem lógica do conteúdo.
- 📌 ARIA serve para explicar o que o HTML nativo não consegue.
9. Desafios Práticos
Desafio 1: Skip Links
Pesquisa o que é um "Skip Link" e porque é que é a primeira coisa que um utilizador de teclado quer encontrar num site com muitos menus.
Solução: É um link escondido que só aparece no foco do teclado, permitindo ao utilizador "saltar" os menus e ir direto para o <main>.
Desafio 2: O Formulário Mudo
Se tiveres um campo de texto apenas com um placeholder e sem label, o que ouve um cego ao chegar ao campo?
Solução: Na maioria das vezes, ouve apenas "Campo de edição". Ele não sabe se deve escrever o nome, a morada ou a senha! O label é vital.
Desafio 3: Título de Página
Porque é que o <title> é considerado o elemento de acessibilidade mais importante de uma página?
Solução: Porque é a primeira coisa que um leitor de ecrã anuncia mal a página carrega. Diz ao utilizador ONDE ele está antes de ele começar a navegar.