O que accessibility-a11y faz?
Implemente práticas recomendadas de acessibilidade web (a11y) seguindo as diretrizes WCAG para criar interfaces de usuário inclusivas e acessíveis.
Visão Geral
Esta skill auxilia no desenvolvimento de aplicações web que são acessíveis a todas as pessoas, incluindo aquelas com deficiências visuais, auditivas, motoras ou cognitivas. Ela abrange desde a estruturação semântica do HTML até testes com leitores de tela e otimização de contraste de cores.
Funcionalidades
- HTML Semântico: Uso correto de tags como
<nav>,<main>,<article>,<aside>,<header>,<footer>e cabeçalhos hierárquicos (<h1>a<h6>). - Navegação por Teclado: Garantir que todos os elementos interativos sejam focáveis e operáveis via teclado.
- Suporte a Leitores de Tela: Uso de atributos
aria-label,aria-labelledby,aria-describedby,roleealtpara fornecer contexto adequado. - Contraste de Cores: Verificação de taxas de contraste conforme WCAG AA (4.5:1 para texto normal) e AAA (7:1 para texto normal).
- Gestão de Foco: Implementação de indicadores de foco visíveis e gerenciamento correto de foco em modais e componentes dinâmicos.
Como Usar
- Análise de Acessibilidade: A skill pode analisar componentes HTML existentes e sugerir melhorias baseadas nas diretrizes WCAG.
- Geração de Código: Crie novos componentes com acessibilidade integrada desde o início.
- Testes Automatizados: Integre com ferramentas como axe-core ou Lighthouse para verificar conformidade.
Exemplo
<!-- Antes: Botão sem rótulo acessível -->
<div class="btn" onclick="submit()">Enviar</div>
<!-- Depois: Botão acessível com suporte a teclado e leitor de tela -->
<button type="submit" aria-label="Enviar formulário">Enviar</button>
Recursos
Plataformas Suportadas
- Claude Code
- Cursor
- Codex
- Outros agentes de IA compatíveis com skills MARKDOWN
Contribuição
Sinta-se à vontade para abrir issues ou pull requests neste repositório para sugerir melhorias ou relatar problemas relacionados à acessibilidade.