Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Accessibility (a11y) Best Practices

A WCAG-based rule set that makes Claude write and review web UI with semantic HTML, ARIA, keyboard access and proper contrast.

Dev & CodingIntermediate★ 269⑂ 42AI score 6/10Last updated: Oct 8, 2026

What it does

Gives Claude a structured WCAG playbook to apply whenever it writes or reviews web interface code.

  • Semantic HTML: landmarks (<header>, <main>, <nav>), unbroken h1–h6 hierarchy, real <button> elements
  • Forms: label/for/id pairing, <fieldset>/<legend> grouping, clear validation messaging
  • ARIA: when to reach for aria-label, aria-describedby, aria-live, aria-expanded — and when native HTML is better
  • Visual: 4.5:1 contrast for body text, 3:1 for large text, never color alone, always-visible focus rings
  • Keyboard: tabindex rules, no keyboard traps, 44x44px touch targets, Enter/Space activation
  • User preferences: prefers-reduced-motion, prefers-color-scheme, prefers-contrast
  • Testing: Lighthouse, axe-core in CI, NVDA/JAWS/VoiceOver, 200% zoom checks

Who it's for

  • Frontend developers working in React, Vue, or plain HTML/CSS
  • Teams under legal accessibility obligations (public sector, education, finance)
  • Design-system maintainers raising the bar on shared components
  • Junior developers who need a dependable a11y checklist

Example uses

  1. Component review: "Audit this dropdown for accessibility and add the right ARIA attributes and keyboard handling."
  2. Form cleanup: "Rewrite this signup form so labels and error messages meet WCAG AA."
  3. CI prep: "List the issues axe-core and Lighthouse would flag on this page and fix the critical ones."

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Mindrally/skills/HEAD/accessibility-a11y/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the accessibility-a11y folder from the GitHub repo Mindrally/skills into my ~/.claude/skills/accessibility-a11y/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Mindrally/skills.git /tmp/mindrally-skills && mkdir -p ~/.claude/skills && cp -r /tmp/mindrally-skills/accessibility-a11y ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repository into a temp folder: git clone https://github.com/Mindrally/skills.git /tmp/mindrally-skills
  3. Make sure your skills folder exists: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r /tmp/mindrally-skills/accessibility-a11y ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/accessibility-a11y — you should see SKILL.md.
  6. Restart Claude Code. Since the skill defines no explicit trigger, mention it directly, e.g. "use the accessibility skill to review this component."
View source on GitHub ↗License: Apache-2.0