WE
web-accessibility
Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.
Install
mkdir -p .claude/skills/web-accessibility && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16289" && unzip -o skill.zip -d .claude/skills/web-accessibility && rm skill.zipInstalls to .claude/skills/web-accessibility
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.140 chars✓ has a “when” trigger
About this skill
Web Accessibility Skill
Ensures the MapRecruit interface is accessible to all users, including those using assistive technologies.
When to use this skill
- When building new React components.
- When auditing existing UI for accessibility regressions.
- When creating complex interactive elements (modals, dropdowns, calendars).
How to use it
1. Semantic Structure
- Use
<nav>,<main>,<section>, and Proper Header hierarchy (h1-h6). - Ensure all interactive elements use the correct tags (e.g.,
<button>for actions,<a>for navigation).
2. Visual & Interactive
- Contrast: Maintain a minimum contrast ratio of 4.5:1 for text.
- Focus States: Never hide focus rings (
outline-none) unless you are providing a clear alternative focus indicator. - Tap Targets: Ensure all buttons and links are at least 44x44px for touch accessibility.
3. ARIA Compliance
- Use
aria-labeloraria-labelledbyfor icons or elements without visible text. - Manage focus for modals: return focus to the trigger element when the modal is closed.