accessibility

Audit web accessibility against WCAG 2.2 success criteria with actionable fixes.

Updated Aug 8, 2024

Search Tags:#screen reader #keyboard navigation #wcag 2.2 #contrast #web accessibility #a11y audit #aria patterns

Ready to run

npx skills add https://github.com/CAPJackie/x --skill accessibility-capjackie

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/CAPJackie/x/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/CAPJackie/x --skill accessibility-capjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Accessibility guidance helps you identify and fix barriers that prevent people with disabilities from using your website or app, improving usability and compliance.

Core Features & Use Cases

WCAG 2.2-aligned improvements: Covers key success criteria like non-text alternatives, color contrast, keyboard access, focus visibility, and robust ARIA usage.
Audit-ready checklists and testing: Provides both automated testing (Lighthouse, axe) and manual testing steps to verify fixes.
Accessible UI patterns: Includes practical, copy-paste patterns for common issues such as skip links, error announcements, ARIA tabs, and live regions.

Quick Start

Use the accessibility skill to run a WCAG 2.2-focused audit and get prioritized fixes for your site’s keyboard navigation, screen-reader support, and contrast issues.

Frequently Asked Questions about accessibility

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

FAQPage Schema

How do I run a WCAG 2.2 accessibility audit on my website?▼

To run a WCAG 2.2 accessibility audit, you evaluate your web content against success criteria for perceivability, operability, understandability, and robustness, using automated tools like Lighthouse and axe alongside manual testing procedures to identify barriers.

What is the best way to fix keyboard navigation and focus management issues?▼

Fixing keyboard navigation and focus management involves applying accessible HTML semantics and ARIA patterns for focus visibility, ensuring users can operate UI components without a mouse through deterministic pattern guidance.

How do I ensure screen reader compatibility for web content?▼

Screen reader compatibility is achieved by implementing accessible HTML semantics, using ARIA only when necessary for UI patterns like tabs and live regions, and verifying interactions through manual testing procedures.

How do I fix color contrast compliance issues for web accessibility?▼

Fix color contrast compliance by adjusting your UI design to meet WCAG 2.2 contrast success criteria, verifying the adjustments using automated testing tools like Lighthouse and axe to ensure readability.

Do I need ARIA attributes for accessible form labeling and error handling?▼

Accessible form labeling and error handling primarily rely on proper HTML semantics, using ARIA attributes only when necessary to announce errors via live regions and ensure robust user input validation.

Does this approach work with automated testing tools like Lighthouse and axe?▼

Yes, this approach integrates directly with automated testing tools like Lighthouse and axe, providing audit-ready checklists and manual testing steps to verify accessibility fixes for screen readers and keyboard operation.