New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Accessibility Fixer

by ibelick in ibelick/ui-skills

Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

MITAuto-check passedFrontend & Design

Install Accessibility Fixer

skills CLI
$ npx skills add ibelick/ui-skills --skill fixing-accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ibelick/ui-skills fixing-accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ibelick/ui-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/fixing-accessibility .claude/skills/fixing-accessibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fixing-accessibility
GitHub stars
9.4k
Used in
4 other repos
Token cost
~1.2k tokens
SKILL.md length
527 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

  • Works in 9 steps: accessible names (critical) → keyboard access (critical) → focus and dialogs (critical) → …
  • Adding buttons, dialogs, menus or tabs and wanting them accessible from the start
  • SKILL.md covers how to use, when to apply, rule categories by priority and quick reference, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The skill works in two ways. Invoked on its own, it applies its constraints to any UI work in the conversation. Invoked with a file, it reviews that file against all the rules and reports each violation with the exact line, a one-sentence reason it matters and a code-level fix. It avoids rewriting large parts of the UI and prefers minimal, targeted fixes.

The rules are grouped by priority: accessible names, keyboard access, and focus and dialogs rated critical, then semantics, forms and errors, announcements, contrast and states, media and motion, and tool boundaries. Examples include giving icon-only buttons an aria-label, not using divs as buttons without full keyboard support, trapping focus in modals and restoring it to the trigger on close, preferring native elements over role hacks, and linking form errors to fields with aria-describedby and aria-invalid.

When your agent uses it

  • Adding buttons, dialogs, menus or tabs and wanting them accessible from the start
  • Reviewing a component file against accessibility rules
  • Fixing focus handling in modals and overlays
  • Making form errors and required fields announced to screen readers

Example prompts

  • “Review src/components/Modal.tsx for accessibility problems and suggest fixes.”
  • “Make the icon-only toolbar buttons accessible.”
  • “Check this signup form: are the errors linked to their fields properly?”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. accessible names (critical)
  2. keyboard access (critical)
  3. focus and dialogs (critical)
  4. semantics (high)
  5. forms and errors (high)
  6. announcements (medium-high)
  7. contrast and states (medium)
  8. media and motion (low-medium)
  9. tool boundaries (critical)

What it can do on your machine

Read from SKILL.md and the folder at commit 74da992. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Accessibility Fixer loads about 1.2k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 527 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ibelick/ui-skills at commit 74da992, republished under its MIT licence (© ibelick). 527 words, ~1,179 tokens.

Download SKILL.mdSave it as .claude/skills/fixing-accessibility/SKILL.md (or your agent's skills folder).
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.

fixing-accessibility

Fix accessibility issues.

how to use

  • /fixing-accessibility Apply these constraints to any UI work in this conversation.

  • /fixing-accessibility <file> Review the file against all rules below and report:

    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion)

Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.

when to apply

Reference these guidelines when:

  • adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns
  • building forms, validation, error states, helper text
  • implementing keyboard shortcuts or custom interactions
  • working on focus states, focus trapping, or modal behavior
  • rendering icon-only controls
  • adding hover-only interactions or hidden content

rule categories by priority

prioritycategoryimpact
1accessible namescritical
2keyboard accesscritical
3focus and dialogscritical
4semanticshigh
5forms and errorshigh
6announcementsmedium-high
7contrast and statesmedium
8media and motionlow-medium
9tool boundariescritical

quick reference

1. accessible names (critical)
  • every interactive control must have an accessible name
  • icon-only buttons must have aria-label or aria-labelledby
  • every input, select, and textarea must be labeled
  • links must have meaningful text (no “click here”)
  • decorative icons must be aria-hidden
2. keyboard access (critical)
  • do not use div or span as buttons without full keyboard support
  • all interactive elements must be reachable by Tab
  • focus must be visible for keyboard users
  • do not use tabindex greater than 0
  • Escape must close dialogs or overlays when applicable
3. focus and dialogs (critical)
  • modals must trap focus while open
  • restore focus to the trigger on close
  • set initial focus inside dialogs
  • opening a dialog should not scroll the page unexpectedly
4. semantics (high)
  • prefer native elements (button, a, input) over role-based hacks
  • if a role is used, required aria attributes must be present
  • lists must use ul or ol with li
  • do not skip heading levels
  • tables must use th for headers when applicable
Show full SKILL.md (211 more words)Show less
5. forms and errors (high)
  • errors must be linked to fields using aria-describedby
  • required fields must be announced
  • invalid fields must set aria-invalid
  • helper text must be associated with inputs
  • disabled submit actions must explain why
6. announcements (medium-high)
  • critical form errors should use aria-live
  • loading states should use aria-busy or status text
  • toasts must not be the only way to convey critical information
  • expandable controls must use aria-expanded and aria-controls
7. contrast and states (medium)
  • ensure sufficient contrast for text and icons
  • hover-only interactions must have keyboard equivalents
  • disabled states must not rely on color alone
  • do not remove focus outlines without a visible replacement
8. media and motion (low-medium)
  • images must have correct alt text (meaningful or empty)
  • videos with speech should provide captions when relevant
  • respect prefers-reduced-motion for non-essential motion
  • avoid autoplaying media with sound
9. tool boundaries (critical)
  • prefer minimal changes, do not refactor unrelated code
  • do not add aria when native semantics already solve the problem
  • do not migrate UI libraries unless requested

common fixes

html
<!-- icon-only button: add aria-label -->
<!-- before --> <button><svg>...</svg></button>
<!-- after -->  <button aria-label="Close"><svg aria-hidden="true">...</svg></button>

<!-- div as button: use native element -->
<!-- before --> <div onclick="save()">Save</div>
<!-- after -->  <button onclick="save()">Save</button>

<!-- form error: link with aria-describedby -->
<!-- before --> <input id="email" /> <span>Invalid email</span>
<!-- after -->  <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>

review guidance

  • fix critical issues first (names, keyboard, focus, tool boundaries)
  • prefer native HTML before adding aria
  • quote the exact snippet, state the failure, propose a small fix
  • for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior

© ibelick, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/fixing-accessibility of ibelick/ui-skills.

Open the folder on GitHubat commit 74da992

Used in 4 other repositories

We found 15 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in ibelick/ui-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Accessibility Fixer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Accessibility Fixer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Accessibility Fixer this skillibelick/ui-skills9.4k4 repos~1.2kAutomated safety check: PassMIT
Glycemicgpt UI Foundationlumose-health/GlycemicGPT141—~707Automated safety check: PassGPL-3.0
Error Prevention and RecoveryOwl-Listener/inclusive-design-skills103—~739Automated safety check: PassMIT
Form Validationthedaviddias/Front-End-Checklist74k—~633Automated safety check: PassMIT
Pattern Documentationmurphytrueman/design-system-ops201—~3.7kAutomated safety check: PassMIT
Form Validationthedaviddias/ux-patterns-for-developers258—~900Automated safety check: PassCustom licence

Similar skills

  • Glycemicgpt UI Foundation

    lumose-health/GlycemicGPT

    A skill your agent uses when adding or changing GlycemicGPT web UI structure, shared styling, Tailwind classes, semantic theme tokens, typography, base primitives, product UI components, TextInput…

    141 GitHub stars~707 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Error Prevention and Recovery

    Owl-Listener/inclusive-design-skills

    Designs forgiving forms and flows: prevent input errors, write messages that say what happened and what to do, and add undo, confirmation and recovery paths.

    103 GitHub stars~739 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Form Validation

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly.

    74k GitHub stars~633 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Pattern Documentation

    murphytrueman/design-system-ops

    Document a multi-component pattern (form validation, empty states, error handling): when to use, composition, states, a11y, anti-patterns.

    201 GitHub stars~3.7k tokensUpdated 13 days ago
    Frontend & DesignAuto-check passed

  • Form Validation

    thedaviddias/ux-patterns-for-developers

    A skill your agent uses when you need to validate and provide feedback.

    258 GitHub stars~900 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Shadcn

    pproenca/dot-skills

    shadcn/ui component library best practices and patterns (formerly shadcn-ui).

    214 GitHub stars~2.5k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from ibelick/ui-skills

  • Fixing Motion Performance

    ibelick/ui-skills

    Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.

    9.4k GitHub starsUsed in 5 repos~1.4k tokens
    Auto-check passed

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.4k GitHub starsUsed in 8 repos~855 tokens
    Auto-check passed

  • Improve UI Audit and Plans

    ibelick/ui-skills

    Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.4k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • HTML Metadata Fixer

    ibelick/ui-skills

    Audits and fixes page titles, meta descriptions, canonical URLs, Open Graph and Twitter cards, favicons, JSON-LD and robots directives.

    9.4k GitHub starsUsed in 2 repos~1.1k tokens
    Auto-check passed

  • DESIGN.md Creator

    ibelick/ui-skills

    Writes or updates a DESIGN.md for one product from its repository or a public URL, recording the design language and tokens that the evidence supports.

    9.4k GitHub stars~4k tokensUpdated today
    Auto-check passed

  • UI Skills Router

    ibelick/ui-skills

    Routes UI tasks to the smallest useful set of UI Skills through the ui-skills CLI, picking a category and loading at most three skills before implementing.

    9.4k GitHub starsUsed in 2 repos~362 tokens
    Auto-check passed

Categories

Questions about Accessibility Fixer

What does Accessibility Fixer do?

Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes. The skill works in two ways. Invoked on its own, it applies its constraints to any UI work in the conversation.

When should I use Accessibility Fixer?

Accessibility Fixer fits situations like: adding buttons, dialogs, menus or tabs and wanting them accessible from the start; reviewing a component file against accessibility rules; fixing focus handling in modals and overlays; making form errors and required fields announced to screen readers.

How do I install Accessibility Fixer in Claude Code?

Run `npx skills add ibelick/ui-skills --skill fixing-accessibility -a claude-code`. Or copy the skill folder (skills/fixing-accessibility in ibelick/ui-skills) into .claude/skills/fixing-accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Accessibility Fixer in Codex?

Run `npx skills add ibelick/ui-skills --skill fixing-accessibility -a codex`. Or copy the skill folder (skills/fixing-accessibility in ibelick/ui-skills) into .agents/skills/fixing-accessibility in your project. Codex loads it when a task matches its description.

Can I use Accessibility Fixer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ibelick/ui-skills --skill fixing-accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fixing-accessibility, .gemini/skills/fixing-accessibility, .github/skills/fixing-accessibility and .opencode/skills/fixing-accessibility in your project.

What does Accessibility Fixer need to run?

SKILL.md names no scripts, command-line tools or credentials: Accessibility Fixer is instructions for the agent only.

Does Accessibility Fixer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Accessibility Fixer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Accessibility Fixer use?

Accessibility Fixer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Accessibility Fixer use?

About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Accessibility Fixer?

Skills that share tags, products or a category with Accessibility Fixer: Glycemicgpt UI Foundation (lumose-health/GlycemicGPT, 141 stars), Error Prevention and Recovery (Owl-Listener/inclusive-design-skills, 103 stars), Form Validation (thedaviddias/Front-End-Checklist, 74k stars) and Pattern Documentation (murphytrueman/design-system-ops, 201 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Accessibility Fixer?

ibelick (a GitHub user) maintains it in ibelick/ui-skills, which has 9,437 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 6, 2026.

Source: ibelick/ui-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.