You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
17 KiB
259 lines
17 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
|
"translation_date": "2025-10-22T23:03:49+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# Auditoria Abrangente de Acessibilidade de Websites
|
|
|
|
## Instruções
|
|
|
|
Nesta tarefa, você realizará uma auditoria profissional de acessibilidade em um website real, aplicando os princípios e técnicas que aprendeu. Essa experiência prática aprofundará sua compreensão sobre barreiras de acessibilidade e suas soluções.
|
|
|
|
Escolha um website que pareça ter problemas de acessibilidade—isso oferece mais oportunidades de aprendizado do que analisar um site já perfeito. Bons candidatos incluem sites mais antigos, aplicativos web complexos ou sites com conteúdo multimídia rico.
|
|
|
|
### Fase 1: Avaliação manual estratégica
|
|
|
|
Antes de recorrer a ferramentas automatizadas, realize uma avaliação manual abrangente. Essa abordagem centrada no usuário frequentemente revela problemas que as ferramentas não detectam e ajuda a entender a experiência real do usuário.
|
|
|
|
**🔍 Critérios essenciais de avaliação:**
|
|
|
|
**Navegação e Estrutura:**
|
|
- É possível navegar por todo o site usando apenas o teclado (Tab, Shift+Tab, Enter, Espaço, teclas de seta)?
|
|
- Os indicadores de foco são claramente visíveis em todos os elementos interativos?
|
|
- A estrutura de cabeçalhos (H1-H6) cria um esquema lógico de conteúdo?
|
|
- Existem links de salto para ir diretamente ao conteúdo principal?
|
|
|
|
**Acessibilidade Visual:**
|
|
- Há contraste de cores suficiente em todo o site (mínimo de 4.5:1 para texto normal)?
|
|
- O site depende exclusivamente de cores para transmitir informações importantes?
|
|
- Todas as imagens possuem texto alternativo apropriado?
|
|
- O layout permanece funcional ao ser ampliado em 200%?
|
|
|
|
**Conteúdo e Comunicação:**
|
|
- Existem textos de link como "clique aqui" ou outros textos ambíguos?
|
|
- É possível entender o conteúdo e a funcionalidade sem pistas visuais?
|
|
- Os campos de formulário estão devidamente rotulados e agrupados?
|
|
- As mensagens de erro são claras e úteis?
|
|
|
|
**Elementos Interativos:**
|
|
- Todos os botões e controles de formulário funcionam apenas com o teclado?
|
|
- Alterações dinâmicas de conteúdo são anunciadas para leitores de tela?
|
|
- Diálogos modais e widgets complexos seguem padrões adequados de acessibilidade?
|
|
|
|
📝 **Documente suas descobertas** com exemplos específicos, capturas de tela e URLs das páginas. Observe tanto os problemas quanto os aspectos bem feitos.
|
|
|
|
### Fase 2: Testes automatizados abrangentes
|
|
|
|
Agora valide e expanda suas descobertas manuais usando ferramentas de teste de acessibilidade padrão da indústria. Cada ferramenta tem diferentes pontos fortes, então usar várias ferramentas oferece uma cobertura completa.
|
|
|
|
**🛠️ Ferramentas de teste obrigatórias:**
|
|
|
|
1. **Lighthouse Accessibility Audit** (integrado ao Chrome/Edge DevTools)
|
|
- Execute auditorias em várias páginas
|
|
- Foque em métricas e recomendações específicas
|
|
- Registre sua pontuação de acessibilidade e violações específicas
|
|
|
|
2. **axe DevTools** (extensão de navegador - padrão da indústria)
|
|
- Detecção de problemas mais detalhada do que o Lighthouse
|
|
- Fornece exemplos específicos de código para correções
|
|
- Testa contra os critérios do WCAG 2.1
|
|
|
|
3. **WAVE Web Accessibility Evaluator** (extensão de navegador)
|
|
- Representação visual de recursos de acessibilidade
|
|
- Destaca tanto erros quanto aspectos positivos
|
|
- Excelente para entender a estrutura da página
|
|
|
|
4. **Analisadores de Contraste de Cores**
|
|
- WebAIM Contrast Checker para pares de cores específicos
|
|
- Extensões de navegador para análise de contraste em toda a página
|
|
- Teste contra os padrões WCAG AA e AAA
|
|
|
|
**🎧 Testes com tecnologia assistiva real:**
|
|
- **Testes com leitores de tela**: Use NVDA (Windows), VoiceOver (Mac) ou TalkBack (Android)
|
|
- **Navegação apenas com teclado**: Desconecte o mouse e navegue por todo o site
|
|
- **Testes de zoom**: Teste a funcionalidade com zoom de 200% e 400%
|
|
- **Testes de controle por voz**: Se disponível, experimente ferramentas de navegação por voz
|
|
|
|
**📊 Organize seus resultados** criando uma planilha mestre com:
|
|
- Descrição e localização do problema
|
|
- Nível de gravidade (Crítico/Alto/Médio/Baixo)
|
|
- Critérios de sucesso do WCAG violados
|
|
- Ferramenta que detectou o problema
|
|
- Capturas de tela e evidências
|
|
|
|
### Fase 3: Documentação abrangente das descobertas
|
|
|
|
Crie um relatório profissional de auditoria de acessibilidade que demonstre sua compreensão tanto dos problemas técnicos quanto de seu impacto humano.
|
|
|
|
**📋 Seções obrigatórias do relatório:**
|
|
|
|
1. **Resumo Executivo** (1 página)
|
|
- URL do website e breve descrição
|
|
- Nível geral de maturidade em acessibilidade
|
|
- Os 3 problemas mais críticos
|
|
- Impacto estimado nos usuários com deficiência
|
|
|
|
2. **Metodologia** (½ página)
|
|
- Abordagem de teste e ferramentas utilizadas
|
|
- Páginas avaliadas e combinações de dispositivos/navegadores
|
|
- Padrões avaliados (WCAG 2.1 AA)
|
|
|
|
3. **Descobertas Detalhadas** (2-3 páginas)
|
|
- Problemas categorizados por princípio do WCAG (Perceptível, Operável, Compreensível, Robusto)
|
|
- Inclua capturas de tela e exemplos específicos
|
|
- Observe recursos positivos de acessibilidade encontrados
|
|
- Faça referência cruzada com os resultados das ferramentas automatizadas
|
|
|
|
4. **Avaliação do Impacto no Usuário** (1 página)
|
|
- Como os problemas identificados afetam usuários com diferentes deficiências
|
|
- Cenários descrevendo experiências reais de usuários
|
|
- Impacto nos negócios (risco legal, SEO, expansão da base de usuários)
|
|
|
|
**📸 Coleta de evidências:**
|
|
- Capturas de tela de violações de acessibilidade
|
|
- Gravações de tela de fluxos problemáticos de usuários
|
|
- Relatórios de ferramentas (salvar como PDFs)
|
|
- Exemplos de código mostrando os problemas
|
|
|
|
### Fase 4: Plano profissional de remediação
|
|
|
|
Desenvolva um plano estratégico e priorizado para corrigir os problemas de acessibilidade. Isso demonstra sua capacidade de pensar como um desenvolvedor web profissional lidando com restrições reais de negócios.
|
|
|
|
**🎯 Crie recomendações detalhadas de melhorias (mínimo de 10 problemas):**
|
|
|
|
**Para cada problema identificado, forneça:**
|
|
|
|
- **Descrição do Problema**: Explicação clara do que está errado e por que é problemático
|
|
- **Referência ao WCAG**: Critério de sucesso específico violado (ex.: "2.4.4 Propósito do Link (No Contexto) - Nível A")
|
|
- **Impacto no Usuário**: Como isso afeta pessoas com diferentes deficiências
|
|
- **Solução**: Alterações específicas no código, modificações no design ou melhorias no processo
|
|
- **Nível de Prioridade**: Crítico (impede o uso básico) / Alto (barreira significativa) / Médio (problema de usabilidade) / Baixo (melhoria)
|
|
- **Esforço de Implementação**: Estimativa de tempo/complexidade (Solução rápida / Esforço moderado / Grande reformulação)
|
|
- **Verificação de Teste**: Como verificar se a correção funciona
|
|
|
|
**Exemplo de recomendação de melhoria:**
|
|
|
|
```
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
Priority: High (major navigation barrier)
|
|
Effort: Low (30 minutes to update content)
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
```
|
|
|
|
**📈 Fases estratégicas de implementação:**
|
|
|
|
- **Fase 1 (0-2 semanas)**: Problemas críticos que impedem a funcionalidade básica
|
|
- **Fase 2 (1-2 meses)**: Melhorias prioritárias para uma melhor experiência do usuário
|
|
- **Fase 3 (3-6 meses)**: Melhorias de prioridade média e aprimoramentos de processo
|
|
- **Fase 4 (Contínuo)**: Monitoramento e aprimoramento contínuos
|
|
|
|
## Rubrica de Avaliação
|
|
|
|
Sua auditoria de acessibilidade será avaliada tanto pela precisão técnica quanto pela apresentação profissional:
|
|
|
|
| Critério | Excelente (90-100%) | Bom (80-89%) | Satisfatório (70-79%) | Necessita Melhorar (<70%) |
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
| **Profundidade da Avaliação Manual** | Avaliação abrangente cobrindo todos os princípios POUR com observações detalhadas e cenários de usuários | Boa cobertura da maioria das áreas de acessibilidade com descobertas claras e alguma análise de impacto no usuário | Avaliação básica cobrindo áreas principais com observações adequadas | Testes limitados com observações superficiais e consideração mínima do impacto no usuário |
|
|
| **Utilização e Análise de Ferramentas** | Utiliza todas as ferramentas obrigatórias de forma eficaz, faz referência cruzada das descobertas, inclui evidências claras e analisa limitações das ferramentas | Utiliza a maioria das ferramentas com boa documentação, alguma referência cruzada e evidências adequadas | Utiliza ferramentas obrigatórias com documentação básica e algumas evidências | Uso mínimo de ferramentas, documentação ruim ou evidências ausentes |
|
|
| **Identificação e Categorização de Problemas** | Identifica 15+ problemas específicos em todos os princípios do WCAG, categoriza com precisão por gravidade, demonstra compreensão profunda | Identifica 10-14 problemas na maioria dos princípios do WCAG, boa categorização, demonstra compreensão sólida | Identifica 7-9 problemas com cobertura adequada do WCAG e categorização básica | Identifica <7 problemas com escopo limitado ou categorização ruim |
|
|
| **Qualidade e Viabilidade das Soluções** | 10+ soluções detalhadas e acionáveis com referências precisas ao WCAG, cronogramas de implementação realistas e métodos de verificação | 8-9 soluções bem desenvolvidas com referências geralmente precisas e bons detalhes de implementação | 6-7 soluções básicas com algum detalhe e abordagens geralmente realistas | <6 soluções ou detalhes insuficientes, implementações irrealistas |
|
|
| **Comunicação Profissional** | Relatório excelentemente organizado, bem escrito, inclui resumo executivo, usa linguagem técnica apropriada e segue padrões de documentos empresariais | Bem organizado com boa qualidade de escrita, inclui a maioria das seções obrigatórias, tom apropriado | Adequadamente organizado com escrita aceitável, inclui seções básicas obrigatórias | Organização ruim, escrita confusa ou ausência de seções-chave |
|
|
| **Aplicação no Mundo Real** | Demonstra compreensão do impacto nos negócios, considerações legais, diversidade de usuários e desafios práticos de implementação | Mostra boa compreensão das aplicações práticas com algum contexto de negócios | Compreensão básica das aplicações no mundo real | Conexão limitada com aplicações práticas |
|
|
|
|
## Opções de Desafios Avançados
|
|
|
|
**🚀 Para estudantes que buscam desafios adicionais:**
|
|
|
|
- **Análise Comparativa**: Audite 2-3 websites concorrentes e compare seus níveis de maturidade em acessibilidade
|
|
- **Foco em Acessibilidade Móvel**: Aprofunde-se em problemas específicos de acessibilidade móvel usando TalkBack no Android ou VoiceOver no iOS
|
|
- **Perspectiva Internacional**: Pesquise e aplique padrões de acessibilidade de diferentes países (EN 301 549, Section 508, ADA)
|
|
- **Revisão de Declaração de Acessibilidade**: Avalie a declaração de acessibilidade existente do website (se houver) em relação às suas descobertas
|
|
|
|
## Entregáveis
|
|
|
|
Envie um relatório abrangente de auditoria de acessibilidade que demonstre análise em nível profissional e planejamento prático de implementação:
|
|
|
|
**📄 Requisitos do Relatório Final:**
|
|
|
|
1. **Resumo Executivo** (1 página)
|
|
- Visão geral do website e avaliação de maturidade em acessibilidade
|
|
- Resumo das principais descobertas com impacto nos negócios
|
|
- Ações prioritárias recomendadas
|
|
|
|
2. **Metodologia e Escopo** (1 página)
|
|
- Abordagem de teste, ferramentas utilizadas e critérios de avaliação
|
|
- Páginas/seções avaliadas e quaisquer limitações
|
|
- Estrutura de conformidade com padrões (WCAG 2.1 AA)
|
|
|
|
3. **Relatório de Descobertas Detalhadas** (3-4 páginas)
|
|
- Observações de testes manuais com cenários de usuários
|
|
- Resultados de ferramentas automatizadas com referência cruzada
|
|
- Problemas organizados por princípios do WCAG com evidências
|
|
- Recursos positivos de acessibilidade identificados
|
|
|
|
4. **Plano Estratégico de Remediação** (3-4 páginas)
|
|
- Recomendações de melhorias priorizadas (mínimo de 10)
|
|
- Cronograma de implementação com estimativas de esforço
|
|
- Métricas de sucesso e métodos de verificação
|
|
- Estratégia de manutenção contínua de acessibilidade
|
|
|
|
5. **Evidências de Suporte** (Apêndices)
|
|
- Capturas de tela de violações de acessibilidade e ferramentas de teste
|
|
- Exemplos de código demonstrando problemas e soluções
|
|
- Relatórios de ferramentas e resumos de auditoria
|
|
- Notas ou gravações de testes com leitores de tela
|
|
|
|
**📊 Requisitos de Formatação:**
|
|
- **Formato do documento**: PDF (apresentação profissional)
|
|
- **Número de palavras**: 2.500-3.500 palavras (excluindo apêndices e capturas de tela)
|
|
- **Elementos visuais**: Inclua capturas de tela, diagramas e exemplos ao longo do texto
|
|
- **Citações**: Referencie diretrizes do WCAG e recursos de acessibilidade de forma apropriada
|
|
|
|
**💡 Dicas para Excelência:**
|
|
- Use formatação profissional no relatório com títulos e estilos consistentes
|
|
- Inclua um índice para facilitar a navegação
|
|
- Equilibre precisão técnica com linguagem clara e apropriada para negócios
|
|
- Demonstre compreensão tanto da implementação técnica quanto do impacto no usuário
|
|
|
|
## Resultados de Aprendizado
|
|
|
|
Após concluir esta auditoria abrangente de acessibilidade, você terá desenvolvido habilidades profissionais essenciais:
|
|
|
|
**🎯 Competências Técnicas:**
|
|
- **Domínio de Testes de Acessibilidade**: Proficiência com métodos de teste manuais e automatizados padrão da indústria
|
|
- **Aplicação do WCAG**: Experiência prática na aplicação das Diretrizes de Acessibilidade para Conteúdo Web em cenários reais
|
|
- **Compreensão de Tecnologia Assistiva**: Experiência prática com leitores de tela e navegação por teclado
|
|
- **Mapeamento Problema-Solução**: Capacidade de identificar barreiras de acessibilidade e desenvolver estratégias de remediação específicas e acionáveis
|
|
|
|
**💼 Habilidades Profissionais:**
|
|
- **Comunicação Técnica**: Experiência na redação de relatórios profissionais de acessibilidade para diferentes partes interessadas
|
|
- **Planejamento Estratégico**: Capacidade de priorizar melhorias de acessibilidade com base no impacto no usuário e na viabilidade de implementação
|
|
- **Garantia de Qualidade**: Compreensão do teste de acessibilidade como parte do ciclo de vida de desenvolvimento
|
|
- **Avaliação de Riscos**: Valorização das implicações legais, comerciais e éticas da conformidade com a acessibilidade
|
|
|
|
**🌍 Mentalidade de Design Inclusivo:**
|
|
- **Empatia com o Usuário**: Compreensão profunda das necessidades de diversos usuários e interações com tecnologia assistiva
|
|
- **Princípios de Design Universal**: Reconhecimento de que o design acessível beneficia todos os usuários, não apenas aqueles com deficiências
|
|
- **Melhoria Contínua**: Estrutura para avaliação e aprimoramento contínuos de acessibilidade
|
|
- **Habilidades de Advocacia**: Confiança para promover práticas de acessibilidade em projetos e equipes futuras
|
|
|
|
**🚀 Preparação para a Carreira:**
|
|
Esta tarefa espelha projetos reais de consultoria em acessibilidade, oferecendo uma experiência digna de portfólio que demonstra:
|
|
- Abordagem sistemática de resolução de problemas
|
|
- Atenção tanto aos detalhes técnicos quanto ao impacto nos negócios
|
|
- Comunicação clara de conceitos técnicos complexos
|
|
- Compreensão das responsabilidades legais e éticas no desenvolvimento web
|
|
|
|
Após a conclusão, você estará preparado para contribuir significativamente com iniciativas de acessibilidade em qualquer função de desenvolvimento web e para defender práticas de design inclusivo ao longo de sua carreira.
|
|
|
|
---
|
|
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. |