Accessibility Agent Skill
WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.
homepage: https://yepapi.com/skills/accessibility
metadata:
tags: [accessibility, a11y, wcag, aria]
---
# Accessibility
## Rules
- Semantic HTML: use `<button>`, `<nav>`, `<main>`, `<article>` — not `<div onClick>`
- ARIA attributes only when semantic HTML can't express the pattern
- Keyboard navigation: every interactive element must be reachable and operable via keyboard
- Focus management: modals trap focus, route changes move focus to content
- Color contrast: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Alt text on all images — empty `alt=""` for decorative images
- Form labels: every input has a visible `<label>` linked via `htmlFor`
- Skip navigation link as first focusable element
- Screen reader testing: test with VoiceOver (Mac) or NVDA (Windows)Install
Why Use the Accessibility Skill?
Without this skill, your AI guesses at accessibility patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Accessibility skill installed. Your AI knows the context and writes code that fits.
"Audit this page for WCAG 2.1 AA compliance and fix all accessibility issues"
"Add proper ARIA labels, keyboard navigation, and screen reader support to this form"
"Create an accessible modal dialog with focus trapping and escape key handling"
Accessibility skill — FAQ
It enforces WCAG 2.1 AA standards including semantic HTML, keyboard navigation, ARIA attributes, and screen reader support. Your AI generates accessible markup by default instead of adding it as an afterthought.
Run `npx skills add YepAPI/skills --skill accessibility` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
It targets WCAG 2.1 AA, which is the standard most organizations are required to meet. It covers semantic HTML, keyboard navigation, screen readers, and color contrast requirements.