Vai alla guida all’uso
fixing-accessibilitydi Julien Thibeaut

Fixing Accessibility Skill.

Una skill per Claude Code e Codex dedicata al design review: verifica e corregge errori di ARIA, tastiera, focus, contrasto e form.

  • Design Review & Accessibility
  • Report di revisione
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
Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 4.714 caratteri in totale

01 Cosa fa

Cosa fa lo Skill fixing-accessibility in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Un insieme di regole di riferimento e correzione per l'accessibilità HTML, pensato per designer e sviluppatori che aggiungono o revisionano UI interattive in un agente di codice. Classifica nove categorie di regole per priorità e impatto, dai nomi accessibili, accesso da tastiera, focus e dialoghi, e limiti degli strumenti a livello critico, fino a semantica, moduli ed errori, annunci, contrasto e stati, e infine media e motion.

Ogni categoria è un breve elenco di requisiti concreti, come aria-label sui pulsanti solo icona, nessun tabindex superiore a 0, e aria-invalid sui campi che falliscono. Un blocco di correzioni comuni mostra l'HTML prima e dopo per pulsanti solo icona, div-come-pulsante ed errori di modulo non collegati, e la modalità di revisione segnala ogni violazione con la riga citata, una frase sul perché e una correzione a livello di codice.

Rapporto di revisione
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Applicare i Vincoli sul Posto

    Eseguire il comando semplice trasforma le regole in vincoli permanenti su qualsiasi lavoro di UI in corso in quella conversazione, non in un singolo passaggio di audit.

  2. 02
    Puntarlo su un File per un Report delle Violazioni

    Con un argomento file, verifica quel file rispetto a tutte le regole e segnala ogni violazione come riga o snippet citato, una breve frase sul perché è importante e una correzione a livello di codice.

  3. 03
    Lavorare le Categorie in Ordine di Priorità

    Le regole sono raggruppate in categorie classificate con una valutazione dell'impatto; i nomi accessibili si trovano alla priorità 1, contrassegnata come critica.

  4. 04
    Mantenere la Modifica Minima

    Lo skill è esplicito nel non dover riscrivere ampie parti della UI, e che le correzioni devono essere minime e mirate.

02 Trova la tua applicazione

Quando usare la skill fixing-accessibility

Usa la skill fixing-accessibility in Claude Code o Codex quando il lavoro è una design review di questo tipo. Ambito e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

  • Aggiungere o modificare pulsanti, link, campi, menu, dialoghi, tab o dropdown in un'interfaccia esistente.
  • Costruire moduli con validazione, stati di errore e testo di aiuto.
  • Implementare scorciatoie da tastiera o altre interazioni personalizzate.
  • Lavorare su stati di focus, focus trapping o comportamento delle modali.
  • Rendere controlli solo con icona, o aggiungere interazioni attivabili solo con hover e contenuti nascosti.

Conosci i limiti

  • Refactoring di codice non correlato al problema di accessibilità da correggere.
  • Usare trucchi basati sui ruoli quando un button, link o input nativo svolgerebbe la stessa funzione.
  • Riprodurre automaticamente media con audio.

03 Dentro la skill

Le regole che la Skill fixing-accessibility fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Assegnare un Nome a Ogni Controllo Solo con Icona

    I pulsanti solo con icona devono avere un nome accessibile tramite aria-label o aria-labelledby, non solo un glifo visibile.

  2. Non Usare Mai un Tabindex Positivo

    I valori di tabindex superiori a 0 sono esclusi del tutto; l'ordine di tabulazione segue la sequenza naturale.

  3. Intrappolare, Impostare e Ripristinare il Focus nelle Finestre di Dialogo

    Le modali devono intrappolare il focus mentre sono aperte, impostare il focus iniziale all'interno della finestra di dialogo e restituire il focus al trigger alla chiusura.

  4. Collegare gli Errori al Loro Campo

    Gli errori devono essere collegati all'input tramite aria-describedby affinché il messaggio venga annunciato insieme al campo.

  5. Contrassegnare i Campi non Validi come Invalid

    Un campo non valido deve impostare aria-invalid, non semplicemente mostrare uno stile di errore.

  6. Evitare ARIA Quando la Semantica Nativa Funziona Già

    Non aggiungere aria quando la semantica nativa risolve già il problema; questo rientra tra i limiti degli strumenti come vincolo critico.

  7. Mantenere il Focus Visibile

    I contorni di focus non possono essere rimossi a meno che non venga fornita una sostituzione visibile.

  8. Non Migrare le Librerie UI

    Sostituire una libreria UI non è compreso nell'ambito a meno che l'utente non lo richieda esplicitamente.

04 Mettila al lavoro

Installa fixing-accessibility in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi fixing-accessibility a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per skills/fixing-accessibility/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo task di revisione del design

Il SKILL.md non include un prompt di esempio; questo starter è scritto dalla riga riassuntiva del catalogo. Sostituisci la riga del task con il tuo brief reale.

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.

Fonte: prompt iniziale scritto dall'uso in una riga del catalogo (non dal SKILL.md).

Verifica il primo risultato

Prima di accettare l'output, cerca questi elementi nella trascrizione e nei file:

  • Il risultato viene consegnato come report di revisione, come elencato nel catalogo per questo skill.
  • L'agente nomina lo skill fixing-accessibility nel suo piano o trascrizione prima di produrre il risultato.
  • I tuoi contenuti, nomi e numeri appaiono invariati nell'output.

In OpenDesign importa fixing-accessibility dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Repository
github.com/ibelick/ui-skills Branch main
File della skill
skills/fixing-accessibility/SKILL.md Checksum del contenuto registrato alla verifica; commit 79081ab
License
MIT Da LICENSE.
Stelle del repository
8.402 Snapshot GitHub acquisita il 14-09-2026 per l'intero repository ibelick/ui-skills, che contiene 5 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per fixing-accessibility.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.
Descrizione della skill
Verifica e risolve problemi di accessibilità HTML inclusi label ARIA, navigazione da tastiera, gestione del focus, contrasto colore ed errori nei form. Usa quando aggiungi controlli interattivi, form, dialog o verifichi la conformità WCAG.

Descrizione front-matter da SKILL.md. Il file completo è di circa 4.714 caratteri. Leggi il file completo su GitHub.

Fixing Accessibility

Esegui fixing-accessibility su un'attività di revisione del design reale.

Scarica OpenDesign, importa fixing-accessibility dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

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

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows