web-accessibility

When to use

• 

  When designing new UI components like modals or dropdowns that must be accessible

• 

  When performing an accessibility audit to fix focus management or ARIA attributes

• 

  When ensuring form implementations are friendly to screen readers and keyboard-only users

How to use

1. 1

   Specify the framework and component type you are building or auditing

2. 2

   Apply semantic HTML tags first to establish a clear structure

3. 3

   Implement keyboard navigation support including focus traps and ESC key handlers

4. 4

   Add ARIA attributes like aria-label or aria-live to provide context for screen readers

Example conversation

case

You

Make this React dropdown menu accessible for screen reader and keyboard users.

Agent

I'll add `role='listbox'` and `aria-haspopup` to your menu. I'm also implementing a keyboard handler so users can navigate options with arrow keys and select items with Enter or Space.

FAQ

Q：How do I fix focus trapped inside a closed modal?

Q：What context should I provide for an accessibility audit?

Q：What deliverables does the agent provide for a11y tasks?

Q：Does this skill automatically fix all contrast and color issues?