Ir para o guia de uso
fixing-accessibilitypor Julien Thibeaut

Fixing Accessibility Skill.

Um agente para Claude Code e Codex focado em revisão de design: audita e corrige erros de ARIA, teclado, foco, contraste e formulários.

  • Design Review & Accessibility
  • Relatório de revisão
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 4.714 caracteres no total

01 O que faz

O que a Skill fixing-accessibility faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um conjunto de regras de referência e correção para acessibilidade em HTML, voltado a designers e desenvolvedores que estão adicionando ou revisando UI interativa em um agente de código. Ele classifica nove categorias de regras por prioridade e impacto, desde nomes acessíveis, acesso por teclado, foco e diálogos, e limites de ferramenta em nível crítico, até semântica, formulários e erros, anúncios, contraste e estados, chegando a mídia e movimento.

Cada categoria é uma lista curta de requisitos concretos, como aria-label em botões apenas com ícone, nenhum tabindex acima de 0, e aria-invalid em campos que falham. Um bloco de correções comuns mostra HTML antes e depois para botões apenas com ícone, div-como-botão e erros de formulário não vinculados, e o modo de revisão relata cada violação com a linha citada, uma frase explicando o motivo e uma correção em nível de código.

Relatório de revisão
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Aplique as Restrições no Lugar

    Executar o comando simples transforma as regras em restrições permanentes sobre qualquer trabalho de UI acontecendo naquela conversa, não em uma única passagem de auditoria.

  2. 02
    Aponte-o para um Arquivo para um Relatório de Violações

    Com um argumento de arquivo, ele verifica esse arquivo contra todas as regras e relata cada violação como uma linha ou trecho citado, uma frase curta sobre por que isso importa, e uma correção em nível de código.

  3. 03
    Trabalhe as Categorias em Ordem de Prioridade

    As regras são agrupadas em categorias classificadas com uma avaliação de impacto; nomes acessíveis fica na prioridade 1, marcada como crítica.

  4. 04
    Mantenha a Mudança Mínima

    A skill é explícita quanto a não reescrever grandes partes da UI, e que as correções devem ser mínimas e direcionadas.

02 Encontre o ideal para você

Quando usar a Skill fixing-accessibility

Use a skill fixing-accessibility no Claude Code ou Codex quando o trabalho for revisão de design desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Adicionar ou alterar botões, links, campos, menus, diálogos, abas ou menus suspensos em uma interface existente.
  • Construir formulários com validação, estados de erro e texto de ajuda.
  • Implementar atalhos de teclado ou outras interações personalizadas.
  • Trabalhando em estados de foco, aprisionamento de foco ou comportamento de modais.
  • Renderizando controles apenas com ícone, ou adicionando interações apenas de hover e conteúdo oculto.

Conheça os Limites

  • Refatorando código que não tem relação com o problema de acessibilidade sendo corrigido.
  • Usando gambiarras baseadas em role quando um botão, link ou input nativo resolveria o mesmo problema.
  • Reproduzindo mídia automaticamente com som.

03 Dentro da skill

Regras que a Skill fixing-accessibility Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Nomeie Todo Controle Apenas com Ícone

    Botões apenas com ícone precisam ter um nome acessível via aria-label ou aria-labelledby, não apenas um glifo visível.

  2. Nunca Use um Tabindex Positivo

    Valores de tabindex maiores que 0 são descartados por completo; a ordem de tabulação segue a sequência natural.

  3. Aprisione, Inicie e Restaure o Foco em Diálogos

    Modais precisam aprisionar o foco enquanto abertos, definir o foco inicial dentro do diálogo e devolver o foco ao gatilho quando forem fechados.

  4. Vincule Erros ao Seu Campo

    Os erros precisam estar vinculados ao input com aria-describedby para que a mensagem seja anunciada junto com o campo.

  5. Marque Campos com Falha como Inválidos

    Um campo inválido deve definir aria-invalid, e não apenas exibir um estilo de erro.

  6. Evite ARIA Quando a Semântica Nativa Já Funciona

    Não adicione aria quando a semântica nativa já resolve o problema; isso está entre os limites de ferramentas como uma restrição crítica.

  7. Mantenha o Foco Visível

    Os contornos de foco não podem ser removidos, a menos que um substituto visível seja fornecido.

  8. Não Migre Bibliotecas de UI

    Substituir uma biblioteca de UI está fora do escopo, a menos que o usuário peça explicitamente.

04 Coloque em prática

Instale fixing-accessibility no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione fixing-accessibility ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

Forma genérica do CLI skills para skills/fixing-accessibility/SKILL.md; o repositório pode documentar seu próprio caminho.

Dar à Skill uma Primeira Tarefa de Revisão de Design

O SKILL.md não inclui um prompt de exemplo; este inicial foi escrito a partir da descrição resumida do catálogo. Substitua a linha da tarefa pelo seu briefing real.

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Origem: prompt inicial escrito a partir do uso resumido do catálogo (não do SKILL.md).

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

  • O resultado é entregue como relatório de revisão, conforme listado no catálogo para este skill.
  • O agente nomeia a skill fixing-accessibility em seu plano ou transcrição antes de produzir o resultado.
  • Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign, importe fixing-accessibility a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-a na barra superior.

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Repository
github.com/ibelick/ui-skills Branch main
Arquivo da skill
skills/fixing-accessibility/SKILL.md Checksum de conteúdo registrado na verificação; commit 79081ab
License
MIT De LICENSE.
Estrelas do repositório
8.402 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório ibelick/ui-skills, que contém 5 skills neste catálogo. Não é uma classificação ou contagem de uso para fixing-accessibility.
Verificado pelo OpenDesign
14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.
A Descrição da Própria Skill
"Audite e corrija problemas de acessibilidade HTML incluindo labels ARIA, navegação por teclado, gerenciamento de foco, contraste de cores e erros de formulário. Use ao adicionar controles interativos, formulários, diálogos ou revisar conformidade WCAG."

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 4.714 caracteres. Leia o arquivo completo no GitHub.

Fixing Accessibility

Execute fixing-accessibility em uma tarefa real de revisão de design.

Baixe o OpenDesign, importe fixing-accessibility do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows