# Criando Páginas Web Acessíveis ![Tudo Sobre Acessibilidade](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## 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, não importa como naveguem na web. Você descobrirá técnicas práticas que já estão incorporadas nos padrões da web, terá a oportunidade de testar ferramentas 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 fazer da 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 começar! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Você pode acessar 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—compreender 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 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 pela página. Mas aqui está o ponto—os leitores de tela só funcionam bem 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 capaz) - **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**: Pula 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 > 💡 **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 a estrutura dos seus cabeçalhos é como um mapa para os usuários—quando você acerta, está literalmente ajudando as pessoas a encontrar o caminho pelo seu conteúdo mais rapidamente! ### Construindo seu fluxo de trabalho de testes Aqui está uma boa notícia—testar acessibilidade de forma eficaz não precisa ser complicado! Você vai querer combinar ferramentas automatizadas (ótimas para identificar problemas óbvios) com alguns testes práticos. Aqui está uma abordagem sistemática que, na minha experiência, detecta a maioria dos problemas sem consumir o dia inteiro: **Fluxo de trabalho essencial para testes manuais:** ```mermaid flowchart 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] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **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 com os olhos fechados 3. **Teste de zoom**: Teste em 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 DevTools do seu navegador, execute uma auditoria de acessibilidade do Lighthouse e use os resultados para orientar as áreas de foco dos testes manuais. ### Ferramentas de zoom e ampliação Sabe quando você dá um zoom no 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**: Escala todo o conteúdo proporcionalmente (texto, imagens, layout) - este é o método preferido - **Zoom apenas no 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 do navegador**: 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 (Aprimorado) | |---------------|------------------|-----------------------| | **Texto normal** (menos de 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 para ferramentas de design como 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 testes com métodos variados garante uma cobertura completa. **Testes baseados em navegador (embutidos nas DevTools):** - **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 profissionais de teste:** - [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 > 🎯 **Meta de Teste**: Mire em uma pontuação de acessibilidade do Lighthouse de 95+ como base. Lembre-se, ferramentas automatizadas detectam apenas cerca de 30-40% dos problemas de acessibilidade—testes manuais ainda são essenciais! ### 🧠 **Verificação de Habilidades de Teste: Pronto para Encontrar Problemas?** **Vamos ver como você está se sentindo sobre testes de acessibilidade:** - Qual método de teste parece mais acessível para você agora? - Você consegue imaginar usar navegação apenas por teclado por um dia inteiro? - Qual é uma barreira de acessibilidade que você já experimentou online? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Impulso de confiança**: Testadores profissionais de acessibilidade usam exatamente essa combinação de métodos. Você está aprendendo práticas padrão da indústria! ## Construindo Acessibilidade Desde o Início A chave para o sucesso em acessibilidade é incorporá-la desde o início. Eu 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 de Conteúdo da 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 complicados! Eles são, na verdade, diretrizes práticas para criar conteúdo que funcione para todos. Depois que você entende o POUR, tomar decisões de acessibilidade se torna muito mais intuitivo. É como ter uma lista mental que orienta suas escolhas de design. Vamos detalhar: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Perceptível**: A informação deve ser apresentada de forma que os usuários possam percebê-la 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 múltiplas características sensoriais (não apenas cor) para transmitir informações **🎮 Operável**: Todos os componentes da interface devem ser operáveis pelos 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 - Certifique-se de 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 apropriada para 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 funcione bem mesmo quando recursos avançados não forem suportados** ### 🎯 **Verificação dos Princípios POUR: Fixando o Conceito** **Reflexão rápida sobre os fundamentos:** - Consegue pensar em uma funcionalidade de site que falha em cada princípio POUR? - Qual princípio parece mais natural para você como desenvolvedor? - Como esses princípios podem melhorar o design para todos, não apenas para usuários com deficiência? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Lembre-se**: Comece com melhorias de alto impacto e baixo esforço. HTML semântico e texto alternativo oferecem o maior ganho em acessibilidade com o menor esforço! ## Criando Design Visual Acessível Um bom design visual e acessibilidade andam de mãos dadas. Quando você projeta com acessibilidade em mente, muitas vezes 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 acessibilidade visual e de cores A cor é 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 mais 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 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 codificação por cores - Certifique-se de que os estados interativos sejam distinguíveis sem cor - 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 Os 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 modernas para indicadores de foco:** ```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 pelo menos uma proporção de contraste de 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 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 têm 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 certos para o propósito pretendido, está basicamente fornecendo leitores de tela, teclados e outras ferramentas com um mapa detalhado para ajudar os usuários a navegar de forma eficaz. Aqui está uma analogia que realmente fez sentido para mim: 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! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **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 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 | | `