# Criando Páginas Web Acessíveis
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pré-Aula
[Quiz pré-aula](https://ff-quizzes.netlify.app/web/)
> O poder da Web está em sua universalidade. O acesso por todos, independentemente de deficiência, é um aspecto essencial.
>
> \- Sir Timothy Berners-Lee, Diretor do W3C e inventor da World Wide Web
Aqui está algo que pode te surpreender: quando você cria sites acessíveis, não está apenas ajudando pessoas com deficiências—na verdade, está tornando a web melhor para todos!
Já reparou nas rampas nas esquinas das ruas? Elas foram originalmente projetadas para cadeiras de rodas, mas agora ajudam pessoas com carrinhos de bebê, entregadores com carrinhos, viajantes com malas de rodinhas e ciclistas também. É exatamente assim que o design acessível na web funciona—soluções que ajudam um grupo frequentemente acabam beneficiando todos. Bem legal, né?
Nesta lição, vamos explorar como criar sites que realmente funcionem para todos, independentemente de como navegam na web. Você descobrirá técnicas práticas que já estão incorporadas nos padrões da web, experimentará ferramentas de teste e verá como a acessibilidade torna seus sites mais utilizáveis para todos os usuários.
Ao final desta lição, você terá confiança para tornar a acessibilidade uma parte natural do seu fluxo de trabalho de desenvolvimento. Pronto para explorar como escolhas de design cuidadosas podem abrir a web para bilhões de usuários? Vamos lá!
> Você pode fazer esta lição no [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
## Entendendo Tecnologias Assistivas
Antes de começarmos a codificar, vamos dedicar um momento para entender como pessoas com diferentes habilidades realmente experimentam a web. Isso não é apenas teoria—entender esses padrões de navegação no mundo real fará de você um desenvolvedor muito melhor!
As tecnologias assistivas são ferramentas incríveis que ajudam pessoas com deficiências a interagir com sites de maneiras que podem te surpreender. Quando você entende como essas tecnologias funcionam, criar experiências acessíveis na web se torna muito mais intuitivo. É como aprender a ver seu código pelos olhos de outra pessoa.
### Leitores de tela
[Leitores de tela](https://en.wikipedia.org/wiki/Screen_reader) são tecnologias bastante sofisticadas que convertem texto digital em saída de voz ou braille. Embora sejam usados principalmente por pessoas com deficiência visual, também são muito úteis para usuários com dificuldades de aprendizagem, como dislexia.
Eu gosto de pensar em um leitor de tela como um narrador muito inteligente lendo um livro para você. Ele lê o conteúdo em voz alta em uma ordem lógica, anuncia elementos interativos como "botão" ou "link" e fornece atalhos de teclado para navegar por uma página. Mas aqui está o ponto—os leitores de tela só podem fazer sua mágica se construirmos sites com estrutura adequada e conteúdo significativo. É aí que você entra como desenvolvedor!
**Leitores de tela populares em diferentes plataformas:**
- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratuito e mais popular), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (embutido)
- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (embutido e muito eficiente)
- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (embutido)
- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratuito e de código aberto)
**Como os leitores de tela navegam pelo conteúdo da web:**
Os leitores de tela oferecem vários métodos de navegação que tornam a navegação eficiente para usuários experientes:
- **Leitura sequencial**: Lê o conteúdo de cima para baixo, como seguir um livro
- **Navegação por marcos**: Pula entre seções da página (cabeçalho, navegação, principal, rodapé)
- **Navegação por cabeçalhos**: Salta entre cabeçalhos para entender a estrutura da página
- **Listas de links**: Gera uma lista de todos os links para acesso rápido
- **Controles de formulário**: Navega diretamente entre campos de entrada e botões
> 💡 **Aqui está algo que me surpreendeu**: 68% dos usuários de leitores de tela navegam principalmente por cabeçalhos ([Pesquisa WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Isso significa que sua estrutura de cabeçalhos é como um mapa para os usuários—quando você acerta, está literalmente ajudando as pessoas a encontrar seu caminho pelo conteúdo mais rápido!
### Construindo seu fluxo de trabalho de teste
Aqui está uma boa notícia—testar acessibilidade de forma eficaz não precisa ser complicado! Você vai querer combinar ferramentas automatizadas (elas são fantásticas para identificar problemas óbvios) com alguns testes práticos. Aqui está uma abordagem sistemática que, na minha experiência, identifica a maioria dos problemas sem consumir o dia inteiro:
**Fluxo de trabalho essencial de teste manual:**
```mermaid
graph TD
A[Start Testing] --> B{Keyboard Navigation}
B --> C[Tab through all interactive elements]
C --> D{Screen Reader Testing}
D --> E[Test with NVDA/VoiceOver]
E --> F{Zoom Testing}
F --> G[Zoom to 200% and test functionality]
G --> H{Color/Contrast Check}
H --> I[Verify all text meets contrast ratios]
I --> J{Focus Management}
J --> K[Ensure focus indicators are visible]
K --> L[Testing Complete]
```
**Lista de verificação passo a passo para testes:**
1. **Navegação por teclado**: Use apenas Tab, Shift+Tab, Enter, Espaço e teclas de seta
2. **Teste com leitor de tela**: Ative NVDA, VoiceOver ou Narrator e navegue de olhos fechados
3. **Teste de zoom**: Teste com níveis de zoom de 200% e 400%
4. **Verificação de contraste de cores**: Verifique todo o texto e componentes da interface
5. **Teste de indicador de foco**: Certifique-se de que todos os elementos interativos tenham estados de foco visíveis
✅ **Comece com o Lighthouse**: Abra as Ferramentas de Desenvolvedor do seu navegador, execute uma auditoria de acessibilidade do Lighthouse e use os resultados para guiar as áreas de foco dos seus testes manuais.
### Ferramentas de zoom e ampliação
Sabe quando você dá zoom no seu celular porque o texto está muito pequeno ou força a vista na tela do laptop em plena luz do dia? Muitos usuários dependem de ferramentas de ampliação para tornar o conteúdo legível todos os dias. Isso inclui pessoas com baixa visão, idosos e qualquer pessoa que já tentou ler um site ao ar livre.
As tecnologias modernas de zoom evoluíram além de apenas aumentar as coisas. Entender como essas ferramentas funcionam ajudará você a criar designs responsivos que permanecem funcionais e atraentes em qualquer nível de ampliação.
**Capacidades modernas de zoom em navegadores:**
- **Zoom da página**: Amplia todo o conteúdo proporcionalmente (texto, imagens, layout) - este é o método preferido
- **Zoom apenas do texto**: Aumenta o tamanho da fonte enquanto mantém o layout original
- **Pinch-to-zoom**: Suporte a gestos móveis para ampliação temporária
- **Suporte de navegadores**: Todos os navegadores modernos suportam zoom de até 500% sem quebrar a funcionalidade
**Software especializado de ampliação:**
- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (embutido), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (embutido com recursos avançados)
> ⚠️ **Consideração de Design**: O WCAG exige que o conteúdo permaneça funcional quando ampliado em até 200%. Nesse nível, o deslocamento horizontal deve ser mínimo e todos os elementos interativos devem permanecer acessíveis.
✅ **Teste seu design responsivo**: Amplie seu navegador para 200% e 400%. Seu layout se adapta de forma elegante? Você ainda consegue acessar toda a funcionalidade sem rolar excessivamente?
## Ferramentas Modernas de Teste de Acessibilidade
Agora que você entende como as pessoas navegam na web com tecnologias assistivas, vamos explorar as ferramentas que ajudam você a construir e testar sites acessíveis.
Pense assim: ferramentas automatizadas são ótimas para identificar problemas óbvios (como falta de texto alternativo), enquanto os testes práticos ajudam a garantir que seu site seja agradável de usar no mundo real. Juntas, elas te dão confiança de que seus sites funcionam para todos.
### Teste de contraste de cores
Aqui está uma boa notícia: contraste de cores é um dos problemas de acessibilidade mais comuns, mas também um dos mais fáceis de corrigir. Um bom contraste beneficia todos—desde usuários com deficiências visuais até pessoas tentando ler seus celulares na praia.
**Requisitos de contraste do WCAG:**
| Tipo de Texto | WCAG AA (Mínimo) | WCAG AAA (Avançado) |
|---------------|------------------|---------------------|
| **Texto normal** (menor que 18pt) | Razão de contraste 4.5:1 | Razão de contraste 7:1 |
| **Texto grande** (18pt+ ou 14pt+ em negrito) | Razão de contraste 3:1 | Razão de contraste 4.5:1 |
| **Componentes da interface** (botões, bordas de formulário) | Razão de contraste 3:1 | Razão de contraste 3:1 |
**Ferramentas essenciais de teste:**
- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Aplicativo de desktop com seletor de cores
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Baseado na web com feedback instantâneo
- [Stark](https://www.getstark.co/) - Plugin de ferramenta de design para Figma, Sketch, Adobe XD
- [Accessible Colors](https://accessible-colors.com/) - Encontre paletas de cores acessíveis
✅ **Crie melhores paletas de cores**: Comece com as cores da sua marca e use verificadores de contraste para criar variações acessíveis. Documente essas variações como os tokens de cores acessíveis do seu sistema de design.
### Auditoria abrangente de acessibilidade
O teste de acessibilidade mais eficaz combina várias abordagens. Nenhuma ferramenta única detecta tudo, então construir uma rotina de teste com métodos variados garante uma cobertura completa.
**Testes baseados em navegador (embutidos nas Ferramentas de Desenvolvedor):**
- **Chrome/Edge**: Auditoria de acessibilidade do Lighthouse + painel de acessibilidade
- **Firefox**: Inspetor de Acessibilidade com visualização detalhada em árvore
- **Safari**: Aba de auditoria no Web Inspector com simulação do VoiceOver
**Extensões de teste profissionais:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - Teste automatizado padrão da indústria
- [WAVE](https://wave.webaim.org/extension/) - Feedback visual com destaque de erros
- [Accessibility Insights](https://accessibilityinsights.io/) - Suite de testes abrangente da Microsoft
**Integração com linha de comando e CI/CD:**
- [axe-core](https://github.com/dequelabs/axe-core) - Biblioteca JavaScript para testes automatizados
- [Pa11y](https://pa11y.org/) - Ferramenta de teste de acessibilidade na linha de comando
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Pontuação automatizada de acessibilidade
> 🎯 **Objetivo do Teste**: Almeje uma pontuação de acessibilidade no Lighthouse de 95+ como base. Lembre-se, ferramentas automatizadas capturam apenas cerca de 30-40% dos problemas de acessibilidade—testes manuais ainda são essenciais!
## Construindo Acessibilidade Desde o Início
A chave para o sucesso na acessibilidade é incorporá-la desde o início. Sei que é tentador pensar "vou adicionar acessibilidade depois", mas isso é como tentar adicionar uma rampa a uma casa depois que ela já foi construída. Possível? Sim. Fácil? Nem tanto.
Pense na acessibilidade como planejar uma casa—é muito mais fácil incluir acessibilidade para cadeiras de rodas nos planos arquitetônicos iniciais do que adaptar tudo depois.
### Os princípios POUR: Sua base para acessibilidade
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são baseadas em quatro princípios fundamentais que formam o acrônimo POUR. Não se preocupe—esses não são conceitos acadêmicos enfadonhos! Eles são, na verdade, diretrizes práticas para criar conteúdo que funcione para todos.
Quando você entende o POUR, tomar decisões de acessibilidade se torna muito mais intuitivo. É como ter uma lista mental que guia suas escolhas de design. Vamos detalhar:
**🔍 Perceptível**: A informação deve ser apresentada de formas que os usuários possam perceber com seus sentidos disponíveis
- Forneça alternativas em texto para conteúdo não textual (imagens, vídeos, áudio)
- Garanta contraste de cores suficiente para todo o texto e componentes da interface
- Ofereça legendas e transcrições para conteúdo multimídia
- Projete conteúdo que permaneça funcional quando redimensionado em até 200%
- Use características sensoriais múltiplas (não apenas cor) para transmitir informações
**🎮 Operável**: Todos os componentes da interface devem ser operáveis por métodos de entrada disponíveis
- Torne toda a funcionalidade acessível via navegação por teclado
- Dê aos usuários tempo suficiente para ler e interagir com o conteúdo
- Evite conteúdo que cause convulsões ou distúrbios vestibulares
- Ajude os usuários a navegar eficientemente com estrutura clara e marcos
- Garanta que os elementos interativos tenham tamanhos adequados (mínimo de 44px)
**📖 Compreensível**: A informação e a operação da interface devem ser claras e compreensíveis
- Use linguagem clara e simples, adequada ao seu público
- Garanta que o conteúdo apareça e opere de forma previsível e consistente
- Forneça instruções claras e mensagens de erro para entrada do usuário
- Ajude os usuários a entender e corrigir erros em formulários
- Organize o conteúdo com ordem lógica de leitura e hierarquia de informações
**💪 Robusto**: O conteúdo deve funcionar de forma confiável em diferentes tecnologias e dispositivos assistivos
- Use HTML válido e semântico como base
- Garanta compatibilidade com tecnologias assistivas atuais e futuras
- Siga padrões da web e melhores práticas de marcação
- Teste em diferentes navegadores, dispositivos e ferramentas assistivas
- Estruture o conteúdo para que ele se degrade de forma elegante quando recursos avançados não forem suportados
## Criando Design Visual Acessível
Um bom design visual e acessibilidade andam de mãos dadas. Quando você projeta com acessibilidade em mente, frequentemente descobre que essas restrições levam a soluções mais limpas e elegantes que beneficiam todos os usuários.
Vamos explorar como criar designs visualmente atraentes que funcionem para todos, independentemente de suas habilidades visuais ou das condições em que estão visualizando seu conteúdo.
### Estratégias de cor e acessibilidade visual
A cor é uma ferramenta poderosa para comunicação, mas nunca deve ser a única forma de transmitir informações importantes. Projetar além da cor cria experiências mais robustas e inclusivas que funcionam em diversas situações.
**Projete para diferenças na visão de cores:**
Aproximadamente 8% dos homens e 0,5% das mulheres têm algum tipo de diferença na visão de cores (frequentemente chamada de "daltonismo"). Os tipos mais comuns são:
- **Deuteranopia**: Dificuldade em distinguir vermelho e verde
- **Protanopia**: Vermelho parece mais escuro
- **Tritanopia**: Dificuldade com azul e amarelo (raro)
**Estratégias inclusivas de uso de cores:**
```css
/* ❌ Bad: Using only color to indicate status */
.error { color: red; }
.success { color: green; }
/* ✅ Good: Color plus icons and context */
.error {
color: #d32f2f;
border-left: 4px solid #d32f2f;
}
.error::before {
content: "⚠️";
margin-right: 8px;
}
.success {
color: #2e7d32;
border-left: 4px solid #2e7d32;
}
.success::before {
content: "✅";
margin-right: 8px;
}
```
**Além dos requisitos básicos de contraste:**
- Teste suas escolhas de cores com simuladores de daltonismo
- Use padrões, texturas ou formas junto com a codificação por cores
- Certifique-se de que os estados interativos sejam distinguíveis sem depender de cores
- Considere como seu design aparece no modo de alto contraste
✅ **Teste a acessibilidade das suas cores**: Use ferramentas como [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) para ver como seu site aparece para usuários com diferentes tipos de visão de cores.
### Indicadores de foco e design de interação
Indicadores de foco são o equivalente digital de um cursor—eles mostram aos usuários de teclado onde estão na página. Indicadores de foco bem projetados melhoram a experiência para todos, tornando as interações claras e previsíveis.
**Melhores práticas para indicadores de foco modernos:**
```css
/* Enhanced focus styles that work across browsers */
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}
/* Remove focus outline for mouse users, preserve for keyboard users */
button:focus:not(:focus-visible) {
outline: none;
}
/* Focus-within for complex components */
.card:focus-within {
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
border-color: #4A90A4;
}
/* Ensure focus indicators meet contrast requirements */
.custom-focus:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #000000;
}
```
**Requisitos para indicadores de foco:**
- **Visibilidade**: Deve ter uma proporção de contraste de pelo menos 3:1 com os elementos ao redor
- **Largura**: Espessura mínima de 2px ao redor de todo o elemento
- **Persistência**: Deve permanecer visível até que o foco se mova para outro lugar
- **Distinção**: Deve ser visualmente diferente de outros estados da interface
> 💡 **Dica de Design**: Ótimos indicadores de foco frequentemente usam uma combinação de contorno, sombra de caixa e mudanças de cor para garantir visibilidade em diferentes fundos e contextos.
✅ **Audite os indicadores de foco**: Navegue pelo seu site usando a tecla Tab e observe quais elementos possuem indicadores de foco claros. Algum deles é difícil de ver ou está ausente?
### HTML semântico: A base da acessibilidade
HTML semântico é como dar às tecnologias assistivas um sistema de GPS para o seu site. Quando você usa os elementos HTML corretos para o propósito pretendido, está basicamente fornecendo aos leitores de tela, teclados e outras ferramentas um mapa detalhado para ajudar os usuários a navegar de forma eficaz.
Aqui está uma analogia que realmente faz sentido: HTML semântico é a diferença entre uma biblioteca bem organizada com categorias claras e sinais úteis versus um depósito onde os livros estão espalhados aleatoriamente. Ambos os lugares têm os mesmos livros, mas em qual você preferiria tentar encontrar algo? Exatamente!
**Blocos de construção de uma estrutura de página acessível:**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**Por que o HTML semântico transforma a acessibilidade:**
| Elemento Semântico | Propósito | Benefício para Leitores de Tela |
|--------------------|-----------|---------------------------------|
| `` | Cabeçalho da página ou seção | "Marco de banner" - navegação rápida para o topo |
| `