a11y

Solid

Frontend accessibility audit (WCAG): semantic HTML, keyboard access, focus management, contrast, ARIA, screen readers.

AI & Automation 22 stars 4 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
45
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Accessibility (a11y) <!-- routing-eval reads this line; it lives in the BODY so the always-on skill LISTING stays inside Claude Code's budget (1% of the context window) — an overflowing listing gets descriptions truncated or dropped, which strips the very keywords a match depends on. --> Trigger phrases: "a11y", "accessibility", "WCAG", "screen reader", "keyboard navigation", "contrast", "ARIA" Goal: make the interface usable by **everyone**, including keyboard, screen reader, and low vision. Baseline target: **WCAG 2.1 AA**. Stack-agnostic (web/React/RN); do a web search when needed for framework-specific APIs. ## Checklist - [ ] **Semantic HTML**: `button`/`a`/`nav`/`main`/`h1..h6` correct; no `div`-buttons - [ ] **Keyboard**: every interaction reachable via Tab, sensible order, visible **focus ring** - [ ] **Focus management**: focus moves on modal/route change, focus trap correct - [ ] **Contrast**: text ≥ 4.5:1, large text ≥ 3:1 - [ ] **Alt text**: `alt` on meaningful images; `alt=""` on decorative images - [ ] **Forms**: every input has a `label`; error message programmatically linked (`aria-describedby`) - [ ] **ARIA**: only when needed; wrong ARIA is worse than no ARIA; role/name/state correct - [ ] **Motion/animation**: respect `prefers-reduced-motion` - [ ] **Language**: `<html lang>` correct (coordinate with i18n) ## How 1. **Start with semantics** — the right element solves 80%. Use `button` instead of `role="button"`+`div`. 2. **Navigate with the ...

Details

Author
byerlikaya
Repository
byerlikaya/claude-starter-kit
Created
1 months ago
Last Updated
yesterday
Language
Shell
License
MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

accessibility

Use when building or reviewing web UI — auditing or fixing accessibility (a11y) against WCAG 2.2 / ARIA. Covers semantic HTML, alt text, accessible names, labels, keyboard focus order, color contrast, and reduced motion, with Rails/Hotwire and React patterns. Pairs with the a11y-reminder hook.

0 Updated today
mickzijdel
AI & Automation Solid

a11y-check

Accessibility audit against WCAG 2.1 AA. Checks semantic HTML, ARIA, keyboard navigation, color contrast, screen reader compatibility.

44 Updated today
haabe
Web & Frontend Solid

loom-accessibility

Web accessibility patterns, WCAG compliance, and inclusive design. Use when implementing accessible UI, keyboard navigation, screen reader support, focus management, semantic HTML, ARIA patterns, or auditing for compliance.

53 Updated today
cosmix