skills.rest
achyutkneupane
achyutkneupaneCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility

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

Updated Nov 29, 2025
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#aria
One-click install
npx skills add https://github.com/achyutkneupane/Blog-Kit --skill accessibility-achyutkneupane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/achyutkneupane/Blog-Kit/tree/main/.ai/skills/accessibility
Command: npx skills add https://github.com/achyutkneupane/Blog-Kit --skill accessibility-achyutkneupane

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 color contrast, keyboard traps, and incorrect ARIA usage. This Skill provides a structured WCAG 2.2 audit framework with copy-paste-ready code patterns to find and fix accessibility issues. ## Core Features & Use Cases - WCAG 2.2 Audit Framework: Covers all POUR principles (Perceivable, Operable, Understandable, Robust) with conformance levels A, AA, and AAA, including the new 2.2 criteria like target size, dragging movements, and accessible authentication. - Ready-to-Use Code Patterns: Provides markup and JavaScript for modal focus traps, skip links, form labels, error announcements, ARIA tabs, and live regions. - Testing Guidance: Includes automated testing commands (Lighthouse, axe-core) and a manual checklist covering keyboard navigation, screen readers, zoom, and reduced motion. - Use Case: Before launching a new web page, run an accessibility audit to catch critical issues like missing form labels, insufficient contrast, and keyboard traps, then apply the provided patterns to fix them. ## Quick Start Audit my web page for WCAG 2.2 accessibility issues and suggest fixes for any violations found.

Frequently Asked Questions about accessibility

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

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

Audit your site against the four POUR principles: Perceivable, Operable, Understandable, and Robust. Fix critical issues first, such as missing form labels, missing alt text, insufficient color contrast, keyboard traps, and missing focus indicators, then verify with automated tools like Lighthouse and axe-core.

How do I test web accessibility with screen readers?▼

Test with VoiceOver on Mac (Command + F5 to start) or NVDA on Windows (Ctrl + Alt + N to start). Navigate using arrow keys or VO keys, check heading and link lists, and verify that dynamic content changes are announced through aria-live regions.

What color contrast ratio is required for WCAG AA?▼

WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px or 14px bold and above). UI components and graphical objects need at least 3:1 contrast against adjacent colors, including focus indicators.

Should I use ARIA roles or native HTML elements?▼

Prefer native HTML elements like button, input, and dialog because they provide keyboard handling, focus management, and assistive technology semantics automatically. Only add ARIA roles and states when no native element exists for the required interaction pattern.

What changed in WCAG 2.2 compared to 2.1?▼

WCAG 2.2 removed criterion 4.1.1 Parsing and added nine new criteria, including Focus Not Obscured, Dragging Movements, Target Size minimum of 24 by 24 CSS pixels, Consistent Help, Redundant Entry, and Accessible Authentication at AA and AAA levels.

Why is my div with onclick not keyboard accessible?▼

A div with onclick is not focusable and cannot be activated with Enter or Space, so keyboard users cannot reach it. Replace it with a native button element, or if unavoidable, add role="button", tabindex="0", and keydown handlers for Enter and Space.

Related Skills

Explore More Software Engineering Skills→
vudovnvudovn
8.1k

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability issues.

Community
Intermediate
Community-AccessCommunity-Access
387

lighthouse-bridge

Parse Lighthouse CI reports and track accessibility score regressions.

Official
Advanced
wearemssatoshiwearemssatoshi

web-quality-audit

Audit website performance, accessibility, SEO, and best practices with Lighthouse standards.

Community
Intermediate
trailofbitstrailofbits
6.5k

claude-in-chrome-troubleshooting

Diagnose and fix Claude MCP Chrome extension connectivity issues.

Official
Intermediate