better-accessibility

Installation
SKILL.md

Accessibility that comes with the craft

Accessibility is not a compliance checkbox bolted on at the end; it is the floor for interface craft. Most of it is free if you use the platform: native elements ship with keyboard support, real labels announce themselves, and a visible focus ring is one CSS rule. Apply these principles when building or reviewing UI code, and match the project's existing styling system (Tailwind vs. plain CSS vs. CSS-in-JS) when applying fixes.

When reviewing, walk the interface as a keyboard-only user first (every flow must complete without a mouse), then as a screen-reader user: does each control announce a name, a role, and its state? When unsure, prefer the platform default over a custom rebuild, and remove ARIA rather than add it.

Rendered-pair contrast measurement and color remediation are covered by the better-colors skill; visual text sizing and iOS input zoom by better-typography; spatial RTL layout by better-layout.

Quick Reference

Category When to Use
Focus & Keyboard Focus rings, skip links, tabindex, focus trapping, APG keyboard patterns
Semantics & ARIA Native elements first, button vs link, landmarks, accessible names, disabled states
Forms Labels, autocomplete, error messaging, input types
Screen Readers Visually hidden content, live regions, toasts, alt text, SVG
Hit Areas Target sizes, expanding hit areas, collision rules
Motion & Zoom prefers-reduced-motion, autoplay and timed UI, 200% zoom, reflow, rem vs px
Installs
1.1K
GitHub Stars
1.1K
First Seen
6 days ago
better-accessibility — jakubkrehel/skills