💡 O que e:
Contraste e a diferenca de luminosidade entre texto e fundo. Um contraste adequado garante que pessoas com baixa visao, daltonismo ou em ambientes com muita luz consigam ler o conteudo. A razao de contraste e medida como proporacao (ex: 4.5:1).
🎯 Por que aprender:
- • 8% dos homens tem algum tipo de daltonismo
- • Usuarios mais velhos precisam de mais contraste
- • Luz solar reduz contraste percebido em telas
- • Requisito legal em muitos paises para sites publicos
🔑 Conceitos-chave:
Ratio Minimo 4.5:1
Para texto normal (menor que 18px)
Ratio Minimo 3:1
Para texto grande (18px+ ou 14px bold)
Nivel AAA: 7:1
Maximo contraste, ideal para leitura longa
Nao depender so de cor
Use icones, sublinhado ou texto junto
💡 O que e:
Navegacao por teclado permite usar um site sem mouse. Usuarios navegam com Tab (proximo elemento), Shift+Tab (anterior), Enter (ativar) e setas. Essencial para pessoas com deficiencias motoras que usam teclado ou dispositivos alternativos.
Experimente agora: pressione Tab nesta pagina para ver os elementos focaveis.
🎯 Por que aprender:
- • Usuarios avancados preferem teclado por velocidade
- • Lesoes temporarias podem impedir uso do mouse
- • Dispositivos alternativos emulam teclado
- • Screen readers dependem de navegacao por teclado
🔑 Conceitos-chave:
Focus Visible
Indicador visual claro do elemento focado
Tab Order Logica
Ordem de navegacao segue fluxo visual
Skip Links
Atalhos para pular navegacao repetitiva
Focus Trap
Manter foco dentro de modais abertos
💡 O que e:
Screen readers sao softwares que leem o conteudo da tela em voz alta. Usados por pessoas cegas ou com baixa visao, eles interpretam o HTML e descrevem a interface. NVDA (Windows), VoiceOver (Mac/iOS) e TalkBack (Android) sao os mais comuns.
O que um screen reader le:
"Link: Inicio. Botao: Menu. Imagem: Logo da empresa. Heading nivel 1: Bem-vindo."
🎯 Por que aprender:
- • 285 milhoes de pessoas no mundo tem deficiencia visual
- • HTML semantico beneficia SEO e screen readers
- • Alt text em imagens e indexado por buscadores
- • ARIA labels melhoram experiencia de todos
🔑 Conceitos-chave:
Alt Text Descritivo
Descreva imagens: "Pessoa sorrindo ao telefone"
Headings Hierarquicos
h1, h2, h3 em ordem logica para navegacao
ARIA Labels
aria-label para elementos sem texto visivel
Landmarks
nav, main, aside, footer para estrutura
💡 O que e:
Design inclusivo e uma metodologia que considera a diversidade humana desde o inicio do projeto. Vai alem de acessibilidade: considera idade, cultura, idioma, contexto, habilidades cognitivas e situacoes temporarias (mao ocupada, ambiente barulhento).
Exemplos de situacoes:
🎯 Por que aprender:
- • 1 bilhao de pessoas tem alguma deficiencia no mundo
- • Todos envelhecem e perdem capacidades gradualmente
- • Design inclusivo beneficia todos os usuarios
- • Legendas em videos ajudam em ambientes barulhentos
🔑 Conceitos-chave:
Solve for One, Extend to Many
Resolver para um caso beneficia muitos
Multimodalidade
Oferecer multiplas formas de interacao
Carga Cognitiva
Reduzir esforco mental necessario
Consistencia
Padroes previsiveis reduzem aprendizado
💡 O que e:
WCAG (Web Content Accessibility Guidelines) sao as diretrizes internacionais da W3C para acessibilidade web. Organizadas em 4 principios: Perceivable (perceber), Operable (operar), Understandable (entender) e Robust (robusto). Niveis A, AA e AAA indicam conformidade.
🎯 Por que aprender:
- • Lei brasileira exige acessibilidade em sites governamentais
- • ADA nos EUA ja resultou em processos contra sites inacessiveis
- • WCAG 2.1 AA e o nivel minimo recomendado
- • Clientes corporativos exigem conformidade
🔑 Conceitos-chave:
Nivel A (Minimo)
Requisitos basicos, essenciais para funcionar
Nivel AA (Recomendado)
Padrao para maioria dos sites comerciais
Nivel AAA (Ideal)
Maximo de acessibilidade, nem sempre viavel
POUR Principles
Perceivable, Operable, Understandable, Robust
💡 O que e:
Teste de acessibilidade e o processo de verificar se um site e acessivel. Combina testes automatizados (ferramentas que escaneiam o codigo), manuais (navegacao por teclado, screen readers) e com usuarios reais que tem deficiencias.
Ferramentas de teste:
🎯 Por que aprender:
- • Ferramentas automaticas encontram ate 30% dos problemas
- • Testes manuais capturam problemas de contexto
- • Lighthouse score e facil de verificar e compartilhar
- • CI/CD pode automatizar verificacao em cada deploy
🔑 Conceitos-chave:
Teste Automatizado
Ferramentas que escaneiam codigo rapidamente
Teste Manual
Navegar com teclado e screen reader
Teste com Usuarios
Feedback real de pessoas com deficiencias
Auditoria WCAG
Verificacao formal contra criterios
🎯 Vocabulario para Prompts
Use estes termos ao pedir sites acessiveis para IAs:
Contraste e Cores
contraste WCAG AA (4.5:1)
cores acessiveis para daltonicos
nao depender apenas de cor
indicadores visuais alem de cor
Navegacao
navegavel por teclado
focus visible em todos elementos
skip link para conteudo principal
tab order logica
Semantica HTML
HTML semantico (nav, main, article)
headings hierarquicos h1-h6
landmarks ARIA
labels em todos os inputs
Screen Readers
alt text descritivo em imagens
aria-label em botoes de icone
aria-describedby para instrucoes
sr-only para texto oculto
Formularios
labels associados a inputs
mensagens de erro claras
fieldset e legend para grupos
autocomplete attributes
Geral
site acessivel WCAG 2.1 AA
design inclusivo
reduced motion para animacoes
texto redimensionavel ate 200%
Exemplo de Prompt Completo:
"Crie um formulario de contato acessivel: labels associados a cada input, mensagens de erro claras com aria-describedby, contraste WCAG AA, navegavel por teclado com focus visible, e fieldset agrupando campos relacionados."
📝 Resumo do Modulo
Proximo Modulo:
3.5 - Escrevendo Prompts Efetivos: Estrutura e tecnicas avancadas de vibe coding