Skip to the usage guide
fixing-accessibilityby Julien Thibeaut

Fixing Accessibility Skill.

A Claude Code and Codex skill for design review: audits and fixes ARIA, keyboard, focus, contrast, and form errors.

  • Design Review & Accessibility
  • Review report
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 and section headings read from the upstream file on 2026-09-14 · 4,714 characters in full

01 What it does

What the fixing-accessibility Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A reference-and-fix ruleset for HTML accessibility, aimed at designers and developers who are adding or reviewing interactive UI in a coding agent. It ranks nine rule categories by priority and impact, from accessible names, keyboard access, focus and dialogs, and tool boundaries at critical through semantics, forms and errors, announcements, contrast and states, down to media and motion.

Each category is a short list of concrete requirements, such as aria-label on icon-only buttons, no tabindex above 0, and aria-invalid on failing fields. A common fixes block shows before-and-after HTML for icon-only buttons, div-as-button, and unlinked form errors, and review mode reports each violation with the quoted line, a one-sentence why, and a code-level fix.

Review report
See the example prompt ↗

How It Works

  1. 01
    Apply the Constraints in Place

    Running the bare command turns the rules into standing constraints on any UI work happening in that conversation, not a single audit pass.

  2. 02
    Point It at a File for a Violation Report

    With a file argument it checks that file against all the rules and reports each violation as a quoted line or snippet, one short sentence on why it matters, and a code-level fix.

  3. 03
    Work the Categories in Priority Order

    The rules are grouped into ranked categories with an impact rating; accessible names sits at priority 1, marked critical.

  4. 04
    Keep the Change Minimal

    The skill is explicit that it should not rewrite large parts of the UI, and that fixes should be minimal and targeted.

02 Find your fit

When to Use the fixing-accessibility Skill

Use the fixing-accessibility skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Adding or changing buttons, links, inputs, menus, dialogs, tabs or dropdowns in an existing interface.
  • Building forms with validation, error states and helper text.
  • Implementing keyboard shortcuts or other custom interactions.
  • Working on focus states, focus trapping or modal behaviour.
  • Rendering icon-only controls, or adding hover-only interactions and hidden content.

Know the Boundaries

  • Refactoring code that is unrelated to the accessibility problem being fixed.
  • Using role-based hacks where a native button, link or input would do the same job.
  • Autoplaying media with sound.

03 Inside the skill

Rules the fixing-accessibility Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Name Every icon-only Control

    Icon-only buttons must have an accessible name through aria-label or aria-labelledby, not just a visible glyph.

  2. Never Use a Positive Tabindex

    tabindex values greater than 0 are ruled out entirely; tab order is left to the natural sequence.

  3. Trap, Seed and Restore Focus in Dialogs

    Modals must trap focus while open, set initial focus inside the dialog, and return focus to the trigger when they close.

  4. Link Errors to Their Field

    Errors have to be tied to the input with aria-describedby so the message is announced with the field.

  5. Mark Failing Fields as Invalid

    An invalid field must set aria-invalid, not merely display an error style.

  6. Skip ARIA When Native Semantics Already Work

    Do not add aria when native semantics already solve the problem; this sits under tool boundaries as a critical constraint.

  7. Keep Focus Visible

    Focus outlines may not be removed unless a visible replacement is provided.

  8. Do Not Migrate UI Libraries

    Swapping out a UI library is out of scope unless the user explicitly asks for it.

04 Put it to work

Install fixing-accessibility in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add fixing-accessibility to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/fixing-accessibility/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

The SKILL.md does not include an example prompt; this starter is written from the catalog one-liner. Replace the task line with your real brief.

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.

Source: starter prompt written from the catalog one-line use (not from the SKILL.md).

Check the First Result

Before accepting the output, look for these in the transcript and the files:

  • The result is delivered as Review report, as the catalog lists for this skill.
  • The agent names the fixing-accessibility skill in its plan or transcript before producing the result.
  • Your own content, names and numbers appear unchanged in the output.

In OpenDesign import fixing-accessibility from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Repository
github.com/ibelick/ui-skills Branch main
Skill file
skills/fixing-accessibility/SKILL.md Content checksum recorded at verification; commit 79081ab
License
MIT From LICENSE.
Repository stars
8,402 GitHub snapshot taken 2026-09-14 for the whole ibelick/ui-skills repository, which contains 5 skills in this catalog. Not a rating or usage count for fixing-accessibility.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 4,714 characters. Read the full file on GitHub.

Fixing Accessibility

Run fixing-accessibility on a Real Design Review Task.

Download OpenDesign, import fixing-accessibility from its SKILL.md link, paste the prompt above, and read the plan before the result.

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

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows