accessibility-compliance
Faz seu agente criar interfaces fáceis de usar para todos. Ele garante que o design seja acessível, funcionando bem com tecnologias assistivas e para pessoas com deficiência.
O que ela faz
Esta ferramenta ajuda a criar sites e aplicativos que todos podem usar, incluindo pessoas com deficiência. Ela garante que tudo funcione bem com leitores de tela, navegação pelo teclado e outras tecnologias assistivas.
Quando usar
- ✓Ao criar sites acessíveis para pessoas com deficiência.
- ✓Ao testar se um site funciona com leitores de tela.
- ✓Ao garantir que um site possa ser navegado apenas com o teclado.
Exemplo do que pedir para a IA
“Quero que este site seja acessível para pessoas com deficiência visual.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta usa códigos especiais (HTML semântico) e segue regras (WCAG) para garantir que leitores de tela e outras tecnologias entendam e naveguem pelo conteúdo. Ela também verifica se o site funciona bem com teclado e respeita preferências como alto contraste.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add wshobson/agents --skill accessibility-complianceOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/accessibility-compliance/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Conformidade de Acessibilidade
Domine a implementação de acessibilidade para criar experiências inclusivas que funcionem para todos, incluindo pessoas com deficiência.
Quando Usar Esta Habilidade
- Implementar conformidade com WCAG 2.2 Nível AA ou AAA
- Construir interfaces acessíveis para leitores de tela
- Adicionar navegação por teclado a componentes interativos
- Implementar gerenciamento de foco e "focus trapping" (trava de foco)
- Criar formulários acessíveis com rotulagem adequada
- Suportar preferências de redução de movimento e alto contraste
- Construir recursos de acessibilidade móvel (VoiceOver do iOS, TalkBack do Android)
- Realizar auditorias de acessibilidade e corrigir violações
Padrões Detalhados e Exemplos Práticos
A documentação detalhada de padrões está em references/details.md. Leia este arquivo quando o nível de navegação acima for insuficiente.
Melhores Práticas
- Use HTML Semântico: Prefira elementos nativos em vez de ARIA, quando possível
- Teste com Usuários Reais: Inclua pessoas com deficiência em testes de usuário
- Teclado Primeiro: Projete interações para funcionar sem mouse
- Não Desabilite Estilos de Foco: Estilize-os, não os remova
- Forneça Alternativas de Texto: Todo conteúdo não textual precisa de descrições
- Suporte ao Zoom: O conteúdo deve funcionar com zoom de 200%
- Anuncie Mudanças: Use regiões ativas ("live regions") para conteúdo dinâmico
- Respeite Preferências: Honre as preferências "prefers-reduced-motion" (reduzir movimento) e "prefers-contrast" (alto contraste)
Problemas Comuns
- Falta de texto alternativo: Imagens sem descrições
- Contraste de cores ruim: Texto difícil de ler contra o fundo
- Trava de teclado: Foco preso em um componente
- Falta de rótulos: Campos de formulário sem rótulos associados
- Mídia com reprodução automática: Conteúdo que toca sem a iniciativa do usuário
- Controles personalizados inacessíveis: Recriando funcionalidade nativa de forma inadequada
- Falta de links de "pular": Sem forma de contornar conteúdo repetitivo
- Problemas na ordem de foco: Ordem de tabulação não corresponde à ordem visual
Ferramentas de Teste
- Automatizadas: axe DevTools, WAVE, Lighthouse
- Manuais: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android)
- Simuladores: NoCoffee (visão), Silktide (várias deficiências)
Perguntas frequentes
O que são leitores de tela?
São programas que leem em voz alta o conteúdo de um site ou aplicativo, ajudando pessoas com deficiência visual a entenderem o que está na tela.
O que é WCAG?
É um conjunto de diretrizes internacionais para tornar a web acessível a todos.
Por que usar HTML semântico?
HTML semântico usa as tags corretas para cada tipo de conteúdo (títulos, parágrafos, botões), o que ajuda leitores de tela e outros dispositivos a entenderem a estrutura e o propósito de cada parte da página.
Detalhes
Descrição original do autor
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
repo: wshobson/agents
Popularidade
- Estrelas no GitHub
- 41 mil
- Posição no ranking
- #4968
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
screen-reader-testing
Faz seu agente testar sites usando leitores de tela para garantir que sejam acessíveis.
wshobson/agents
wcag-audit-patterns
Ajuda seu agente a auditar sites para acessibilidade e corrigir problemas de acordo com as diretrizes WCAG.
wshobson/agents
multi-reviewer-patterns
Faz seu agente coordenar revisões de código paralelas, deduplicando achados e consolidando relatórios.
wshobson/agents
parallel-debugging
Permite ao agente depurar problemas complexos com investigações paralelas e análise de causa raiz.
wshobson/agents
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC