Stats
Actions
Tags
From cks
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cks:accessibilityThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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 animationsnpx claudepluginhub cardinalconseils/claude-starter --plugin cksProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.