accessibility
Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy".
- Installs
- 145
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill accessibility- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads accessibility automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Web Accessibility (WCAG 2.2 AA)
Build for everyone — accessibility is a requirement, not a feature.
Contrast Ratios (WCAG AA)
| Element | Minimum Ratio |
|---|---|
| Normal text (< 18pt) | 4.5:1 |
| Large text (>= 18pt or 14pt bold) | 3:1 |
| UI components and focus indicators | 3:1 |
WCAG 2.2 New AA Criteria
| Criterion | Requirement |
|---|---|
| Target Size Minimum (2.5.8) | Interactive targets at least 24x24 CSS pixels |
| Focus Not Obscured Minimum (2.4.11) | Focused element at least partially visible, not hidden by sticky headers or overlays |
| Focus Appearance (2.4.13) | Focus indicator has minimum area (2px perimeter) and 3:1 contrast change |
| Dragging Movements (2.5.7) | Provide single-pointer alternative for any drag interaction |
| Redundant Entry (3.3.7) | Do not require re-entering previously provided information |
| Consistent Help (3.2.6) | Help mechanisms (chat, phone, FAQ) appear in same relative order across pages |
| Accessible Authentication (3.3.8) | No cognitive function test for login (allow paste, autofill, or alternatives) |
Essential Keyboard Patterns
| Key | Action |
|---|---|
| Tab / Shift+Tab | Navigate between focusable elements |
| Enter / Space | Activate buttons and links |
| Arrow keys | Navigate within widgets (tabs, menus) |
| Escape | Close dialogs and menus |
| Home / End | Jump to first/last item in widget |
Element Selection
| Need | Element |
|---|---|
| Navigates to page | <a href="..."> |
| Submits form | <button type="submit"> |
| Opens dialog | <button aria-haspopup="dialog"> |
| Other action | <button type="button"> |
| Self-contained article | <article> |
| Navigation links | <nav> |
| Supplementary info | <aside> |
Common ARIA Attributes
| Attribute | Purpose |
|---|---|
aria-label | Name when no visible label exists |
aria-labelledby | Reference existing text as label |
aria-describedby | Additional description (hints, errors) |
aria-live | Announce dynamic updates (polite or assertive) |
aria-expanded | Collapsible/expandable state |
aria-hidden="true" | Hide decorative elements from screen readers |
aria-invalid | Mark form fields with errors |
aria-required="true" | Mark required fields |
aria-busy | Indicate loading state |
WCAG 2.2 AA Checklist Summary
| Principle | Key Requirements |
|---|---|
| Perceivable | Alt text on images, contrast >= 4.5:1, color not sole indicator, text resizable to 200%, captions on video, prefers-reduced-motion support |
| Operable | Keyboard accessible, visible focus not obscured, focus appearance meets minimum, targets >= 24px, skip links, dragging alternatives |
| Understandable | <html lang="en">, consistent navigation, consistent help placement, form labels, error identification, no redundant entry, accessible auth |
| Robust | Valid HTML, name/role/value on all UI components, aria-live for status messages (SC 4.1.1 Parsing is obsolete in WCAG 2.2) |
Anti-Patterns
| Anti-Pattern | Fix |
|---|---|
<div onClick> instead of <button> | Use semantic HTML elements |
outline: none without replacement | Use :focus-visible with visible outline |
| Placeholder as label | Use <label> element |
tabindex > 0 | Use DOM order or tabindex="0" / tabindex="-1" |
| Color-only state indicators | Add icon and text label |
| Skipped heading levels | Use sequential h1-h6, style with CSS |
role="button" on <button> | Remove redundant ARIA |
aria-hidden on interactive elements | Never hide interactive content |
| Fixed font sizes (px) | Use rem units |
| No focus trap in modal dialogs | Trap focus, close on Escape |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Adding aria-label to elements that already have visible text | Use aria-labelledby to reference existing visible text instead |
Using aria-live="assertive" for non-urgent updates | Use aria-live="polite" for most dynamic content; reserve assertive for errors and alerts |
Setting alt="" on informative images | Provide descriptive alt text; only use empty alt on purely decorative images |
| Adding keyboard handlers to non-focusable elements | Use native interactive elements or add tabindex="0" plus role and key handlers |
| Testing only with automated tools like axe | Automated scans catch ~30% of issues; always supplement with keyboard-only and screen reader testing |
Screen Reader and Browser Pairings
| Screen Reader | Browser | Platform |
|---|---|---|
| JAWS | Chrome | Windows |
| NVDA | Chrome | Windows (free) |
| NVDA | Firefox | Windows (free) |
| VoiceOver | Safari | macOS / iOS |
| TalkBack | Chrome | Android |
| Narrator | Edge | Windows (built-in) |
Testing Quick Guide
| Method | Tool | Effort |
|---|---|---|
| Keyboard-only | Hide mouse, Tab through page | 5 min |
| Screen reader | JAWS + Chrome or NVDA + Chrome/Firefox | 10 min |
| Screen reader | VoiceOver + Safari (macOS) | 10 min |
| Automated scan | axe DevTools browser extension | 2 min |
| Lighthouse | Chrome F12 > Lighthouse > Accessibility | 2 min |
| Unit tests | jest-axe (Jest) or vitest-axe (Vitest) | Ongoing |
Delegation
When working on accessibility, delegate to:
design-system— Color tokens and contrast verificationreact-patterns— Component patterns and hookstesting— jest-axe integration and test patterns
Resources
References
- Semantic HTML and Structure — Document landmarks, heading hierarchy, element selection, skip links
- Focus Management — Focus indicators, focus not obscured, dialog focus traps, SPA route focus, focus-visible patterns
- ARIA Patterns — Accessible tabs, live regions, data tables with ARIA attributes
- Forms and Validation — Label association, error announcement, redundant entry, accessible authentication
- Color and Media — Contrast requirements, reduced motion, dragging alternatives, video captions, alt text
- Testing — Keyboard testing, screen reader pairings, axe DevTools, jest-axe and vitest-axe unit tests
FAQ
What does the accessibility skill do?
Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy".
How do I install accessibility?
Run npx skills add https://github.com/oakoss/agent-skills --skill accessibility in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/accessibility/ (personal) or .claude/skills/accessibility/ (project).
Which AI agents can use accessibility?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is accessibility safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains accessibility?
It is published by oakoss in oakoss/agent-skills. It has 145 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Application security covering threat modeling (STRIDE), OWASP Top 10 (2025), OWASP API Security Top 10 (2023), secure coding review, authentication/authorization patterns, input validation, encryption, security headers, supply chain security, compliance (GDPR/HIPAA/SOC2/PCI-DSS), and security monitoring. Use when reviewing code for vulnerabilities, implementing auth patterns, securing APIs, configuring security headers, hardening supply chain, preventing injection attacks, or preparing for compliance audits.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Drizzle ORM for type-safe SQL with PostgreSQL, MySQL, and SQLite. Use when defining schemas, writing queries, managing relations, running migrations, or using drizzle-kit. Use for drizzle, orm, schema, query, migration, pgTable, relations, drizzle-kit, drizzle-zod.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.