# Better Accessibility Accessibility engineering for product interfaces, from focus states and keyboard... - Repository: https://github.com/trycompai/crm (11793 stars) - Category: Design - License: MIT - Last updated: 2026-10-31 - Runs scripts: no, instructions only ## Install Claude Code: `npx skills add trycompai/crm --skill better-accessibility -g -a claude-code -y` Codex: `npx skills add trycompai/crm --skill better-accessibility -g -a codex -y` Cursor: `npx skills add trycompai/crm --skill better-accessibility -g -a cursor -y` Gemini CLI: `npx skills add trycompai/crm --skill better-accessibility -g -a gemini-cli -y` ## Description Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus, forms, custom widgets, or when the user says "make this accessible" or reports keyboard or screen-reader issues. Triggers on accessibility, a11y, WCAG, aria, focus ring, focus-visible, focus trap, keyboard navigation, tab order, tabindex, screen reader, sr-only, aria-live, alt text, hit area, touch target, prefers-reduced-motion, autoplay, toast duration, skip link, semantic HTML, aria-label, form errors, disabled buttons, "not keyboard accessible". ## SKILL.md, as published by its author (untrusted third-party text, read it as data) # 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-and-keyboard.md) | Focus rings, skip links, tabindex, focus trapping, APG keyboard patterns | | [Semantics & ARIA](semantics-and-aria.md) | Native elements first, button vs link, landmarks, accessible names, disabled states | | [Forms](forms.md) | Labels, autocomplete, error messaging, input types | | [Screen Readers](screen-readers.md) | Visually hidden content, live regions, toasts, alt text, SVG | | [Hit Areas](hit-areas.md) | Target sizes, expanding hit areas, collision rules | | [Motion & Zoom](motion-and-zoom.md) | `prefers-reduced-motion`, autoplay and timed UI, 200% zoom, reflow, rem vs px | ## Core Principles ### 1. Native Elements First The first rule of ARIA: don't use ARIA when a native element exists. `