accessibility

Apply WCAG 2.2 accessibility guidelines to web interfaces and content.

Updated Apr 22, 2022

Search Tags:#accessibility #a11y #wcag #pattern #aria #web-standards

Ready to run

npx skills add https://github.com/fjavidcr/pasapalabra-js --skill accessibility-fjavidcr

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide provides WCAG 2.2–aligned accessibility guidelines and practical patterns to audit and improve usability for diverse users, helping teams ship inclusive interfaces faster.

Core Features & Use Cases

Comprehensive POUR framework (Perceivable, Operable, Understandable, Robust) for organizing accessibility work.
Practical patterns, checklists, and references for keyboard navigation, ARIA usage, skip links, focus management, color contrast, and screen reader compatibility.
Use Case: Teams can audit existing pages and embed accessible components into new UI workstreams to meet legal and user expectations.

Quick Start

Ask me to audit a webpage for WCAG 2.2 compliance and implement the recommended a11y patterns.

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.2 compliant?▼

To make a web interface WCAG 2.2 compliant, audit your content against the POUR framework and apply practical patterns for keyboard navigation, ARIA usage, color contrast, semantic HTML, and screen reader support to ensure usability for diverse users.

What are the best ARIA patterns for single-page application accessibility?▼

The best ARIA patterns for single-page application accessibility involve using skip links, managing focus correctly, and implementing live regions for dynamic updates. These patterns ensure screen reader compatibility and keyboard operability during page transitions.

When do I need to use semantic HTML for accessible forms?▼

You need to use semantic HTML for accessible forms when capturing user inputs to ensure proper labeling and error identification. Semantic HTML provides built-in keyboard navigation and screen reader support, reducing the need for excessive ARIA attributes.

Does WCAG 2.2 require skip links for keyboard navigation?▼

Yes, WCAG 2.2 requires skip links to bypass repetitive content for keyboard navigation. Skip links allow keyboard-only users to jump directly to main content, satisfying operable requirements and improving overall page usability.

How do I handle live regions for screen reader compatibility?▼

Handle live regions for screen reader compatibility by applying ARIA live region attributes to dynamic content areas. This ensures screen readers announce content updates without requiring page reloads, keeping users informed of single-page application changes.