Skill Wiki
accessibility
Domain inferred from 65 atoms across the corpora.
Atom counts by kind
| Kind | Count |
|---|---|
| rule | 12 |
| check | 11 |
| anti-pattern | 9 |
| counter-example | 9 |
| constraint | 7 |
| example | 3 |
| metric | 2 |
| tool | 2 |
| value | 2 |
| fact | 2 |
| feedback | 1 |
| method | 1 |
| provocation | 1 |
| template | 1 |
| term | 1 |
| source | 1 |
Sample atoms
Accessibility After Thought
Treating accessibility as a final-step audit pass: design and build the UI based purely on visual mockups, then add `aria-label`, `role`, and `tabindex` afterwards to silence the audit warnings.…
Breaking Keyboard Flow
Re-implementing a `<button>`, `<a>`, `<input>`, or `<select>` as a custom `<div>` for styling reasons, without restoring the native keyboard semantics.…
Click To Open Only
Building drawers, dropdowns, modals, or accordions that respond exclusively to `onClick` mouse events — with no keyboard activation (Enter/Space), no escape-to-close, no focus trap, no ARIA disclosure semantics.…
Color Only Meaning
Communicating state — error vs success vs warning, valid vs invalid, online vs offline, required vs optional — through color alone, with no icon, label, or text differentiation.…
Hover Only Interaction
Building tooltips, hover cards, mega-menus, or row-action buttons that only appear on `:hover` or `mouseenter`, with no equivalent for keyboard focus or touch tap.…
Invisible Focus
A broader category than @community/anti-pattern-outline-suppression: the focus ring exists in CSS but is effectively invisible — too low contrast (1.…
Outline Suppression
The practice of suppressing browser-default focus outlines globally via CSS resets (`* { outline: none }` or `a:focus { outline: 0 }`) without providing custom focus indicators.…
Text In Image
Rasterizing important headlines, CTAs, prices, or product names directly into a JPG/PNG hero image instead of marking them up as HTML text. The text cannot be selected, copied, translated, screen-readered, or scaled.…
Tiny Touch Targets
Buttons, icon links, and tap targets sized below the WCAG 2.2 AA minimum of 24×24 CSS pixels — typically 16×16 or 20×20 icon-only buttons.…
Check Aria Label Required
Validates that interactive elements have an accessible name (computed via ARIA spec: aria-labelledby → aria-label → associated label → text → title).…
Check Color Contrast Aaa
Evaluates contrast against WCAG 2.2 SC 1.4.6 Level AAA: 7:1 for normal text, 4.5:1 for large text (≥18pt or ≥14pt bold). Stricter than AA — recommended for prose-heavy products and a11y-first brands.
Check Contrast Aa
Evaluates whether the contrast ratio between foreground text color and background color meets WCAG 2.2 SC 1.4.3 Level AA. Large text (≥ 18pt regular or ≥ 14pt bold) requires 3:1; normal text requires 4.5:1.