Web accessibility essentials (WCAG 2.1 AA) for production applications. Use when: building UI components, reviewing designs, adding forms, implementing navigation, checking color contrast, or preparing for production launch. Covers the 80/20 of accessibility that catches most issues.
From cksnpx claudepluginhub cardinalconseils/claude-starter --plugin cksThis skill is limited to using the following tools:
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Accessibility (a11y) ensures your application works for everyone — including the 15% of people with disabilities, keyboard power users, people with temporary injuries, and users in situational impairments (bright sunlight, one hand occupied). The 80/20 rule applies: semantic HTML and keyboard support catch most issues.
Use the correct elements — they provide accessibility for free.
<button> not <div onClick> — buttons announce as clickable, handle Enter/Space<nav>, <main>, <header>, <footer> — landmarks for screen reader navigation<h1> through <h6> in order — never skip levels, never use for styling<label> with for attribute — links label to input for click-to-focus<ul>/<ol> for lists — screen readers announce "list of N items"All interactive elements must be operable by keyboard alone.
tabindex="0")outline: none without replacement)alt="" (empty alt, not missing alt)aria-label (e.g., aria-label="Close")aria-live="polite" for non-urgent and aria-live="assertive" for urgentaria-hidden="true"<label> (placeholder is not a label — it disappears on focus)aria-describedbyUse ARIA only when semantic HTML cannot express the widget. Incorrect ARIA is worse than no ARIA.
role — defines what an element is (e.g., role="dialog")aria-label / aria-labelledby — names an elementaria-expanded, aria-selected, aria-checked — communicates statearia-live — announces dynamic changesprefers-reduced-motion media query| Rationalization | Reality |
|---|---|
| "We'll add accessibility later" | Retrofitting a11y costs 10x more than building it in. Semantic HTML from day one is free. |
| "Our users don't need it" | 15% of people have a disability. Plus, a11y improves UX for everyone. |
| "ARIA fixes everything" | Incorrect ARIA is worse than no ARIA. Semantic HTML first, ARIA as last resort. |
| "It passes automated testing" | Automated tools catch only 30-40% of a11y issues. Manual keyboard testing is essential. |
| "We don't have time" | Using <button> instead of <div onClick> takes the same amount of time. |
<div> or <span> used as buttons or linksoutline: none without a replacement focus styleprefers-reduced-motion respected for animations