skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

better-accessibility

Reviews and fixes UI code for keyboard, ARIA, forms, and screen-reader accessibility.

Updated Aug 2, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#wcag#focus management#aria
One-click install
npx skills add https://github.com/leonardoacosta/agents --skill better-accessibility-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-accessibility
Source: https://github.com/leonardoacosta/agents/tree/main/skills/better-accessibility
Command: npx skills add https://github.com/leonardoacosta/agents --skill better-accessibility-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces frequently ship with invisible focus rings, unlabeled controls, broken keyboard navigation, and silent dynamic updates, locking out keyboard and screen-reader users. This Skill provides concrete principles, code patterns, and a structured review format for building and auditing accessible product interfaces. ## Core Features & Use Cases - Focus and Keyboard Support: Implements :focus-visible rings, skip links, roving tabindex, focus trapping with inert, and ARIA APG keyboard patterns for dialogs, tabs, menus, and comboboxes. - Semantics, Forms, and Screen Readers: Enforces native elements over ARIA, accessible names, labeled form fields with autocomplete, inline error announcements via aria-describedby, live regions, and purpose-based alt text. - Hit Areas, Motion, and Zoom: Applies WCAG 2.5.8 target sizes, pseudo-element hit-area expansion, prefers-reduced-motion opt-in animation, and 200% zoom / 320px reflow resilience. - Use Case: When a user asks to "make this modal accessible" or reports that a form is unusable with a keyboard, the Skill walks the interface as a keyboard-only and screen-reader user, then reports findings in a severity-ranked table with before/after fixes and a verdict. ## Quick Start Review this component for accessibility issues and fix any keyboard navigation, focus ring, and ARIA problems you find.

Frequently Asked Questions about better-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a modal dialog keyboard accessible?▼

Use native `<dialog>` with `showModal()` for a free focus trap, inert background, and Escape handling. Otherwise set `inert` on background content, move focus inside on open, trap Tab within the dialog, and return focus to the trigger on close.

How do I style focus rings without breaking accessibility?▼

Style `:focus-visible` instead of `:focus` so keyboard users see a ring while mouse clicks do not. Never use `outline: none` without a verified replacement, and check the full indicator against every adjacent color including forced-colors mode.

When should I use aria-label versus visible text on buttons?▼

Prefer visible text or `aria-labelledby` over `aria-label`, since invisible labels drift out of sync and translate inconsistently. Icon-only buttons always need an explicit `aria-label`, and the visible label must appear inside the accessible name per WCAG 2.5.3.

What is the minimum touch target size for WCAG compliance?▼

WCAG 2.5.8 Level AA requires a 24×24 CSS-pixel target or a defined spacing, inline, or equivalent-control exception. Aim for 44×44px on touch and 40×40px on desktop, extending small elements with a pseudo-element on the wrapping label or button.

Why is my live region toast not announced by screen readers?▼

Polite regions inserted into the DOM together with their content are announced inconsistently. Render a stable empty `role="status"` region first, then update its text, and reserve `role="alert"` for urgent errors not tied to a control.

Should I use disabled or aria-disabled on a submit button?▼

Keep submit enabled, validate on submit, and focus the first invalid field. Use native `disabled` only when a control is genuinely unavailable; use `aria-disabled="true"` when the control must stay focusable, then block activation in code and style the state explicitly.

Related Skills

Explore More Software Engineering Skills→
FredoAiFredoAi

chakra-ui-refactor

Reviews and converts UI code to idiomatic Chakra UI v3 components.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
curiositechcuriositech
181

color-contrast-auditor

Audit color contrast against WCAG 2.1 and suggest accessible hex alternatives.

Official
Intermediate
yourlabptyourlabpt

constraint-driven-development

Establishes enforceable project quality constraints in a CONSTRAINTS.md file with thresholds and checks.

Community
Advanced