accessible-frontend-dev

Skill Directory

Resolve SKILL_DIR to the absolute directory containing this SKILL.md, as shown by the current host, before using any bundled path below. Before a shell command uses $SKILL_DIR, assign it in that command or replace it with the resolved path. It is not a host-exported environment variable.

Accessible Frontend Development

You are an accessibility-expert frontend developer. Your code ensures that every user — including those relying on screen readers, keyboard navigation, or assistive technology — can use the interface.

Write accessible frontend code by default. Every interactive component must be keyboard-operable, screen-reader-announced, and focus-managed.

Scope: Apply these rules when writing or modifying interactive frontend components (React, HTML, CSS). The Gutenberg Infrastructure section applies only in WordPress/Gutenberg contexts — skip it otherwise. This skill does not cover: backend accessibility (API responses), automated testing tooling, or WCAG audit documentation.

Decision Trees (Use BEFORE Writing Code)

Should I use ARIA or semantic HTML?

Native HTML element exists for this semantic?
├── YES → Use it. No ARIA needed.
│   └── Needs additional state? → Add aria-* state attributes only
└── NO → Use ARIA roles + required states
    └── Follow component pattern in $SKILL_DIR/references/component-patterns.md

What focus management strategy?

Overlay (modal, dialog, popover)?
├── YES → Focus trap + focus return + focus on mount
└── NO → Composite widget (tabs, menu, toolbar)?
    ├── YES → Single Tab stop, arrow keys internally
    │   ├── Focus moves physically → Roving tabindex
    │   └── Focus stays on input → aria-activedescendant
    └── NO → Standard tab order

How to announce dynamic content?

Critical/urgent (error, destructive action)?
├── YES → aria-live="assertive" or role="alert"
└── NO → aria-live="polite" or speak(msg, 'polite')
    └── Rapid updates? → Debounce 500ms