SubmitLog in
c/frontend › command
0votes

Skill: accessibility check

SkillLow risk
submitted by u/client to c/frontend · 0 uses

Reviews a page or component against the most common WCAG failures and fixes them.

SKILL.md
---
name: accessibility-check
description: Check and fix accessibility issues in UI code. Use when building or reviewing pages, forms or components, or when the user asks about a11y or WCAG.
---

# Accessibility check

Go through the component and fix what fails:

- **Semantics:** real buttons and links (not clickable divs), one h1, headings in order, lists as lists, landmarks (header, nav, main).
- **Names:** every input has a label; icon-only buttons have aria-label; images have alt (empty alt for decorative).
- **Keyboard:** everything works with Tab/Shift+Tab/Enter/Space/Escape; focus is visible; dialogs trap and return focus.
- **Contrast:** text at least 4.5:1 (3:1 for large text and UI parts) in both light and dark themes.
- **Motion:** respect prefers-reduced-motion.
- **Forms:** errors are announced (aria-live or aria-describedby) and say how to fix them.
- **Targets:** at least 24×24 px.

Report each issue with the fix you made. If a tool like axe or Lighthouse is available, run it and include the result.
0 commentsreport

Install this skill

Skills are folders with a SKILL.md file. Claude loads them on its own when a task matches the description.

Claude Code: for every project
mkdir -p ~/.claude/skills/accessibility-check && curl -fsSL https://commandvault.ai/commands/skill-accessibility-check-b800810e/raw -o ~/.claude/skills/accessibility-check/SKILL.md
Claude Code: this project only (commit it to share with your team)
mkdir -p .claude/skills/accessibility-check && curl -fsSL https://commandvault.ai/commands/skill-accessibility-check-b800810e/raw -o .claude/skills/accessibility-check/SKILL.md
Download SKILL.md

In the Claude apps, zip the folder and upload it under Settings → Capabilities → Skills.

More from c/frontend

  • Skill: Next.js App Router conventionsKeeps the agent on current App Router patterns: server components, server actions, caching and metadata.
  • Chrome DevTools MCPGives your agent Chrome DevTools: performance traces, network requests, console messages and screenshots of a live page.
  • Playwright MCP: browser automationLets your agent drive a real browser through the accessibility tree: navigate, click, fill forms, take snapshots and test your app.
  • Context7: up-to-date library docsPulls current, version-specific docs and code examples for thousands of libraries into your prompt, so the agent stops inventing old APIs.
See all of c/frontend →
0 comments

Log in to join the discussion.