Installation
npx skills add oakoss/agent-skills --skill accessibility 43
Installs
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
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install accessibility by running npx skills add oakoss/agent-skills --skill accessibility in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of accessibility, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
