skills.rest
trutoman
trutomanCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines and ARIA patterns.

1|Updated Jun 30, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#aria
One-click install
npx skills add https://github.com/trutoman/Conjuros --skill accessibility-trutoman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/trutoman/Conjuros/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/trutoman/Conjuros --skill accessibility-trutoman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often exclude users with disabilities due to missing alt text, poor keyboard support, low contrast, and incorrect ARIA usage. This Skill provides concrete WCAG 2.2 guidance and copy-paste-ready code patterns to find and fix these issues. ## Core Features & Use Cases - WCAG 2.2 Coverage: Organized by the POUR principles (Perceivable, Operable, Understandable, Robust) with all new 2.2 criteria like target size, dragging movements, and accessible authentication. - Ready-Made Code Patterns: Reference implementations for modal focus traps, skip links, form labels, error handling, ARIA tabs, and live regions. - Testing Guidance: Automated testing commands (Lighthouse, axe-core) plus a manual checklist covering keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a React app, run an a11y audit to catch missing form labels, insufficient color contrast, and keyboard traps, then apply the provided patterns to fix each issue. ## Quick Start Audit this page for WCAG 2.2 accessibility issues and suggest fixes for any problems found.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a website WCAG 2.2 compliant?▼

WCAG 2.2 compliance requires meeting success criteria across four principles: Perceivable, Operable, Understandable, and Robust. Key steps include adding alt text to images, ensuring 4.5:1 color contrast, supporting full keyboard navigation, labeling all form inputs, and testing with screen readers and automated tools like axe-core.

How to test web accessibility with automated tools?▼

Run Lighthouse with the accessibility category via npx lighthouse, or use the axe-core CLI against your URL. Automated tools catch roughly a third of issues, so supplement with manual keyboard navigation, screen reader testing, and 200% zoom checks.

What is the minimum color contrast ratio for WCAG AA?▼

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text (18px or 14px bold and above). UI components and graphical objects need 3:1 against adjacent colors. AAA raises these to 7:1 and 4.5:1 respectively.

Does WCAG 2.2 require keyboard accessible drag and drop?▼

Yes, criterion 2.5.7 Dragging Movements requires a single-pointer alternative for any drag-based action, such as up/down buttons for reordering lists. This applies to sortable lists, sliders, map panning, and similar drag-based widgets.

When should I use ARIA instead of native HTML elements?▼

Prefer native HTML elements like button, input, and dialog because they include built-in accessibility behavior. Use ARIA roles and states only when no native equivalent exists, such as tablists or custom live region notifications.

Why is my focus indicator failing accessibility audits?▼

Focus indicators fail when outlines are removed with outline: none without a replacement, or when contrast against the background is insufficient. Use :focus-visible with a visible outline or box-shadow, and ensure focused elements are not hidden behind sticky headers.

Related Skills

Explore More Software Engineering Skills→
civictechdccivictechdc
1

accessibility-compliance

Audit web and mobile UI components for WCAG 2.2 accessibility conformance.

Official
Advanced
Community-AccessCommunity-Access
387

lighthouse-bridge

Parse Lighthouse CI reports and track accessibility score regressions.

Official
Advanced
REVREBELREVREBEL

seo-page

Audit a single web page's on-page SEO, schema markup, and core web vitals.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate