Habilidades accessibility-compliance
♿

accessibility-compliance

Seguro

Criar Interfaces Compatíveis com WCAG 2.2

Crie experiências digitais inclusivas que atendam aos padrões WCAG 2.2. Esta habilidade fornece padrões de código, diretrizes e melhores práticas para leitores de tela, navegação por teclado e acessibilidade em dispositivos móveis.

Suporta: Claude Codex Code(CC)
🥉 76 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "accessibility-compliance". Create an accessible button component with loading state

Resultado esperado:

  • Um componente de botão React com:
  • - atributo aria-busy durante estado de carregamento
  • - aria-disabled para estados desabilitados/carregamento
  • - alvo de toque mínimo de 44x44px
  • - anel de foco visível com focus-visible
  • - mudanças de estado anunciadas para leitores de tela

A utilizar "accessibility-compliance". Build an accessible modal dialog

Resultado esperado:

  • Um componente modal com recursos:
  • - role='dialog' e aria-modal='true'
  • - trap de foco para navegação por teclado
  • - ouvinte de evento de tecla Escape
  • - aria-labelledby vinculando ao título
  • - retorno do foco no fechar para elemento de acionamento

A utilizar "accessibility-compliance". Create accessible form with error handling

Resultado esperado:

  • Um formulário com:
  • - associações de rótulos explícitas via htmlFor
  • - aria-invalid e aria-describedby para erros
  • - resumo de erro com role='alert'
  • - link do resumo de erro para o campo
  • - região de live para status de envio do formulário

Auditoria de Segurança

Seguro
v1 • 2/6/2026

This skill is a documentation-only reference for accessibility compliance. All 225 static findings are false positives caused by the scanner misinterpreting markdown code fences and documentation links as security issues. The 'Ruby/shell backtick execution' patterns are markdown code block delimiters (```tsx, ```typescript). The 'Hardcoded URL' patterns are legitimate links to accessibility standards resources (W3C, A11y Project). No executable code, network requests, or command execution is present. This skill is safe for publication.

4
Arquivos analisados
2,174
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

Criando Componentes React Acessíveis

Gere componentes de botão, modal e formulário acessíveis com atributos ARIA apropriados, gerenciamento de foco e suporte por teclado.

Revisão de Código de Acessibilidade

Revise o código para problemas de conformidade com WCAG, incluindo contraste de cores, HTML semântico e correção de atributos de acessibilidade.

Acessibilidade em Aplicativos Móveis

Implemente tamanho de alvos de toque, alternativas a gestos e suporte a tecnologias assistivas para aplicativos iOS e Android.

Tente Estes Prompts

Acessibilidade de Componente Básica 
Crie um componente [nome do componente] acessível que siga as diretrizes WCAG 2.2. Inclua atributos ARIA apropriados, suporte a navegação por teclado e anúncios para leitores de tela.
Formulário com Validação 
Construa um formulário acessível com rótulos apropriados, tratamento de erros e anúncios de regiões de live. Inclua mensagens de erro vinculadas via aria-describedby e validação acessível por teclado.
Diálogo Modal 
Implemente um diálogo modal acessível com trapamento de foco, fechamento com tecla Escape, roles ARIA apropriadas (dialog, alertdialog) e retorno do foco ao elemento de acionamento ao fechar.
Auditoria de Acessibilidade 
Revise o código a seguir para conformidade com WCAG 2.2. Verifique HTML semântico, atributos ARIA, acessibilidade por teclado, contraste de cores e compatibilidade com leitores de tela. Liste quaisquer violações com sugestões de correção.

Melhores Práticas

  • Use elementos HTML semânticos primeiro antes de adicionar atributos ARIA - elementos nativos fornecem acessibilidade embutida
  • Garanta que todos os elementos interativos sejam acessíveis por teclado com indicadores de foco visíveis
  • Teste com tecnologias assistivas reais (NVDA, JAWS, VoiceOver, TalkBack) durante desenvolvimento

Evitar

  • Usar role='presentation' em tabelas que contêm relações significativas de dados
  • Remover estilos de outline sem fornecer indicadores de foco visíveis alternativos
  • Usar aria-label ou aria-labelledby sem fornecer alternativas de texto visíveis

Perguntas Frequentes

Quais níveis de WCAG esta habilidade suporta?
Esta habilidade cobre os critérios de sucesso do WCAG 2.2 Nível A, AA e AAA com diretrizes específicas para cada nível.
Esta habilidade testa automaticamente meu código para acessibilidade?
Não. Esta habilidade fornece padrões e diretrizes. Testes manuais com tecnologias assistivas e ferramentas automatizadas como axe DevTools ainda são recomendados.
Qual é o tamanho mínimo do alvo de toque para acessibilidade em dispositivos móveis?
O WCAG 2.2 requer um tamanho mínimo de alvo de 24x24 pixels CSS (Nível AA) com uma recomendação de 44x44 pixels CSS (Nível AAA).
Quando devo usar regiões aria-live?
Use regiões aria-live para anunciar mudanças de conteúdo dinâmico para leitores de tela, como erros de validação de formulário, atualizações de resultados de pesquisa ou mudanças de estado de carregamento.
Qual é a diferença entre aria-disabled e disabled?
O atributo disabled impede interação por teclado e foco. aria-disabled apenas anuncia o estado para tecnologia assistiva, mas não impede a interação.
Como tornar atalhos de teclado personalizados acessíveis?
Forneça documentação visível de atalhos, permita personalização, garanta que não entrem em conflito com atalhos do navegador e anuncie-os via aria-keyshortcuts.

Detalhes do Desenvolvedor

Autor

wshobson

Licença

MIT

Repositório

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/accessibility-compliance/

Referência

main

Estrutura de arquivos

📁 references/

📄 aria-patterns.md

📄 mobile-accessibility.md

📄 wcag-guidelines.md

📄 SKILL.md