skills.rest
fjavidcr
fjavidcrCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/fjavidcr/pasapalabra-js --skill accessibility-fjavidcr
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Gabrielloopes33Gabrielloopes33

accessibility

Audit web accessibility against WCAG 2.1 guidelines for keyboard navigation and screen readers.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
jtgironjtgiron

accessibility

Audit web pages and UI components against WCAG 2.2 accessibility criteria.

Community
Intermediate
Tahona-AITahona-AI

wcag-audit-patterns

Audit website compliance with WCAG 2.2 standards using automated scripts.

Official
Intermediate