Better Accessibility: A Skill for Craft-First A11y

Where this fits

You're mid-sprint on a modal component, and the product manager drops a Slack: "The screen reader test failed on the checkout form." Or you're reviewing a PR and notice a custom dropdown that's a <div> with onclick. You need to fix it now, not after a full WCAG audit. This skill gives your agent the exact playbook for accessibility engineering—from focus traps to aria-live—and applies it in your project's own styling idiom, so the fix lands cleanly.

Why agents benefit

• Detects the full a11y surface: The skill triggers on more than just "make this accessible"—it catches mentions of focus rings, tabindex, screen readers, prefers-reduced-motion, and even toast durations, so your agent knows when to step in.
• Produces idiomatic fixes: It instructs the agent to use your existing styling system (CSS modules, Tailwind, styled-components) rather than dropping in a second, alien stylesheet. That means the code review passes.
• Covers the hard parts: It handles focus traps, ARIA live regions, form error announcements, and disabled button semantics—the areas where even senior devs stumble.
• Reviews with intent: When you ask for a UI review, the agent can audit for keyboard navigation, hit areas, and hover-on-touch issues, not just visual polish.
• Respects motion and timing: It knows about prefers-reduced-motion and autoplay/toast durations, so the fix aligns with user preferences and platform conventions.

Practical scenarios

Fixing a non-accessible modal

Your agent receives: "The modal doesn't trap focus and the close button is invisible to screen readers." It applies the skill: adds a focus trap, sets role="dialog" and aria-modal="true", and ensures the close button has a proper aria-label. The fix uses the project's existing button component.

Reviewing a custom dropdown menu

You ask the agent to review a new Select widget. It checks for keyboard support (arrow keys, Enter, Escape), aria-expanded state, and a visible focus ring. It flags missing aria-activedescendant and suggests a semantic <select> fallback if appropriate.

Making a form announce errors

A user reports that form validation errors aren't read aloud. The agent adds aria-live="assertive" to the error summary, links each input to its error via aria-describedby, and ensures the focus moves to the first invalid field on submit.

Add it to your agent workflow

Install the skill with a single command:

npx skills add boraoztunc/skills --skill better-accessibility

Then, in your agent prompt, just mention the context: "Review the checkout form for accessibility issues. Use the better-accessibility skill." The agent will apply the skill's guidelines and produce fixes that match your codebase.

Compare before adopting

Before you commit, evaluate the skill on a few dimensions:

• Quality signals: Does the README show concrete examples and edge cases? Does it reference WCAG criteria? A skill that just lists checkboxes is less useful.
• Maintenance freshness: Check the GitHub repo for recent commits and issue responses. A stale skill may miss new ARIA patterns or browser changes.
• Alternatives: There are other a11y skills out there—compare trigger coverage and depth. This one is strong on keyboard and screen-reader specifics.
• Workflow fit: Does it integrate with your agent's existing tooling? The install command is clean, but verify it doesn't conflict with other skills you use.

Why it is worth tracking

This skill has 289 stars and is authored by boraoztunc, which signals community trust. It's actively maintained and covers a broad trigger set, making it a reliable companion for any UI work. Track it now because accessibility is a growing requirement in agent-generated code—clients and reviewers expect it. When your agent can handle a11y out of the box, you save hours of manual remediation. For a deeper look, see the skill page on OpenAgentSkill. Evaluate it on your next modal or form review, and you'll likely keep it.