agentsclimarketplace

Web a11y authoring

Skill klovaaxel/web-a11y-agent-skills/skills/web-a11y-authoring

Framework-agnostic web accessibility skills and Cursor subagents for AI coding agents.

Install
npx -y skills add klovaaxel/web-a11y-agent-skills --skill web-a11y-authoring

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Builds accessible pages and components with semantic HTML, correct names/roles/states, keyboard support, focus management, links, images, SVG, media, and native controls first. Use when implementing or refactoring frontend UI.

SKILL.md

2.4 KB, as published. Nobody here has run it

Web A11y Authoring

Core Rules

For concrete markup patterns, see PATTERNS.md.

  1. Prefer native HTML controls before ARIA or custom widgets.
  2. Use links for navigation and buttons for actions.
  3. Ensure every interactive control has a clear accessible name.
  4. Keep DOM order aligned with reading and interaction order.
  5. Preserve visible focus and keyboard operation for every interaction.
  6. Use ARIA only to supplement semantics that cannot be expressed natively.
  7. Classify images, icons, and SVG as decorative, informative, or functional.
  8. Communicate unusual link behavior before activation.

Authoring Checklist

Authoring checklist

- [ ] Page has meaningful title, language, landmarks, and heading structure
- [ ] Controls expose role, name, state, and value correctly
- [ ] Interactions work with keyboard alone
- [ ] Focus is visible, logical, and intentionally managed
- [ ] Hidden content is not accidentally focusable or announced
- [ ] Native control behavior is preserved under custom styling
- [ ] Links describe destination/action, including downloads and context changes
- [ ] Images, SVG, and icons have appropriate text alternatives or are hidden correctly
- [ ] Audio/video has controls and alternatives such as captions or transcripts when needed

Common Patterns

  • Toggle button: native button with synchronized state such as aria-pressed.
  • Disclosure: button with synchronized aria-expanded and hidden content state.
  • Dialog: intentional initial focus, contained interaction while open, focus restored on close.
  • Icon-only control: visible or programmatic accessible name that describes the action.
  • Download/file link: link text includes action, target, file type, and size when useful.
  • Functional image/SVG: accessible name describes the action or destination.
  • Decorative image/SVG: removed from the accessibility tree without hiding useful text.
  • Media: avoid disruptive autoplay, provide controls, and include captions/transcripts when content requires them.

Output

Describe semantic choices, ARIA states used, non-text content decisions, keyboard behavior, and manual test plan.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.