accessibility

Audit web interfaces for WCAG 2.1 Level AA compliance.

3|Updated Nov 14, 2025
One-click install
npx skills add https://github.com/evolv3ai/claude-skills-archive --skill accessibility-evolv3ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/evolv3ai/claude-skills-archive/tree/main/skills/accessibility
Command: npx skills add https://github.com/evolv3ai/claude-skills-archive --skill accessibility-evolv3ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and rules (resource) and agents (resource) components.

What problem does it solve?

This Skill ensures your web interfaces are usable by everyone, regardless of ability, by adhering to WCAG 2.1 Level AA standards, preventing common accessibility issues.

Core Features & Use Cases

  • Semantic HTML Guidance: Choose the right element for every purpose.
  • ARIA Implementation: Correctly apply ARIA roles, states, and properties.
  • Focus Management: Ensure keyboard navigability and visible focus indicators.
  • Color Contrast: Meet 4.5:1 text and 3:1 UI component contrast ratios.
  • Form Accessibility: Implement accessible labels, validation, and error handling.
  • Screen Reader Support: Ensure content is announced correctly by assistive technologies.
  • Use Case: When building a new component like a modal dialog or a tabbed interface, use this skill to ensure it's fully accessible from the start, or use the a11y-auditor agent to scan an existing page for violations.

Quick Start

Use the accessibility skill to audit the current page for WCAG 2.1 AA compliance.

Frequently Asked Questions about accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my web interface WCAG 2.1 AA compliant?

To make your web interface WCAG 2.1 AA compliant, use semantic HTML, implement ARIA roles correctly, ensure keyboard navigation with visible focus indicators, and verify color contrast ratios meet 4.5:1 for text.

What is the correct way to implement ARIA roles for screen reader compatibility?

Correct ARIA implementation for screen reader compatibility involves applying appropriate ARIA roles, states, and properties to semantic HTML elements, ensuring content is announced accurately by assistive technologies without overriding native semantics improperly.

How do I fix missing focus indicators for keyboard navigation?

Fix missing focus indicators for keyboard navigation by applying CSS focus styles that provide a highly visible outline, ensuring users can track their position when tabbing through interactive UI components.

What are the WCAG 2.1 AA color contrast requirements for UI components?

WCAG 2.1 AA color contrast requirements mandate a 4.5:1 ratio for text against its background and a 3:1 ratio for UI components, ensuring visual accessibility for users with low vision.

Can I audit an existing web page for accessibility violations?

Yes, you can audit an existing web page for accessibility violations by running an a11y-auditor agent to scan for WCAG 2.1 AA issues like insufficient contrast, missing focus management, and improper ARIA usage.

How do I implement accessible form validation and error handling?

Implement accessible form validation and error handling by using explicit labels, associating error messages with inputs using ARIA, and ensuring screen readers announce validation feedback immediately upon submission.