skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

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

Updated Sep 15, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#aria
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill accessibility-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28quality%29/web-accessibility
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill accessibility-peterson-benhame

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 concrete WCAG 2.1 guidance and code patterns to find and fix these accessibility barriers. ## Core Features & Use Cases - WCAG 2.1 Conformance Guidance: Covers all four POUR principles (Perceivable, Operable, Understandable, Robust) with Level A, AA, and AAA success criteria. - Code-Level Fix Patterns: Provides correct HTML, CSS, and JavaScript examples for alt text, focus management, keyboard navigation, form labels, error handling, and ARIA live regions. - Testing Workflow: Includes automated testing commands (Lighthouse, axe-core) and manual checklists for screen readers, zoom, and reduced motion. - Use Case: When a user asks to make a React or HTML page accessible, the Skill guides auditing contrast ratios, adding skip links, fixing form labels, and verifying keyboard operability. ## Quick Start Audit this page for WCAG 2.1 AA compliance and fix any accessibility issues you find.

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

Follow the four POUR principles: make content Perceivable (alt text, captions, contrast), Operable (keyboard access, no traps, visible focus), Understandable (page language, labels, error messages), and Robust (valid HTML, correct ARIA). Target Level AA conformance, which requires 4.5:1 contrast for normal text.

How to test web accessibility with automated tools?▼

Run Lighthouse with the accessibility category via npx lighthouse --only-categories=accessibility, or use the axe-core CLI against a URL. Automated tools catch roughly a third of issues, so supplement with manual keyboard navigation and screen reader testing using VoiceOver or NVDA.

What color contrast ratio is required for WCAG AA?▼

WCAG 2.1 Level AA requires 4.5:1 contrast for normal text, 3:1 for large text (18px or 14px bold and above), and 3:1 for UI components and graphics. Level AAA raises these to 7:1 and 4.5:1 respectively.

When should I use ARIA attributes versus native HTML elements?▼

Prefer native HTML elements like button, input, and nav, which carry built-in semantics and keyboard behavior. Use ARIA only for custom components without native equivalents, such as tab lists, dialogs, or live regions, and always provide accessible names and correct roles.

Why is removing focus outlines an accessibility problem?▼

Removing focus outlines with outline: none leaves keyboard users unable to see which element is focused, violating WCAG criterion 2.4.7 Focus Visible. Instead, use :focus-visible to show outlines only for keyboard navigation, or provide custom focus styles with sufficient contrast.

Related Skills

Explore More Software Engineering Skills→
uzh-bfuzh-bf
41

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced
REVREBELREVREBEL

seo-page

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

Official
Advanced
rampstackcorampstackco
523

accessibility-audit

Identify WCAG 2.1 AA conformance issues and generate remediation plans.

Official
Advanced