accessibility-review

Reviews interfaces against WCAG standards for keyboard, focus, contrast, and screen reader support.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/1arley/volibear --skill accessibility-review-1arley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-review
Source: https://github.com/1arley/volibear/tree/main/.opencode/skills/accessibility-review
Command: npx skills add https://github.com/1arley/volibear --skill accessibility-review-1arley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often ship with accessibility defects—keyboard traps, removed focus rings, missing alt text, low contrast, and unlabeled form fields—that block users who rely on keyboards or screen readers. This Skill gives an agent a structured procedure to audit a UI against WCAG criteria and report concrete, prioritized violations. ## Core Features & Use Cases - Nine-axis audit: Systematically tests keyboard navigation, focus management, screen reader support, semantic HTML, contrast ratios, touch targets, reduced motion, forms, and error communication. - WCAG-referenced findings: Each violation cites the relevant criterion (e.g., WCAG 1.4.3 Contrast Minimum, 2.1.1 Keyboard, 2.4.7 Focus Visible) with a confidence level from CONFIRMED to SPECULATIVE. - False-positive guardrails: Distinguishes real violations from acceptable patterns such as decorative images with empty alt text or focus indicators replaced by equivalent visual cues. - Use Case: Before launching a checkout flow with modals and dynamic error messages, run this review to catch a focus trap that never returns focus to the trigger and error states communicated only by red borders. ## Quick Start Review this screen for accessibility issues against WCAG standards and report each violation with its severity and recommended fix.

Frequently Asked Questions about accessibility-review

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

FAQPage Schema
How do I check a web page for WCAG accessibility violations?▼

Test keyboard navigation by tabbing through every interactive element, verify focus rings are visible and managed in modals, check contrast ratios against 4.5:1 for body text, and confirm images have alt text and inputs have labels. This Skill walks through all nine axes systematically.

What contrast ratio does WCAG require for text?▼

WCAG AA requires at least 4.5:1 for body text, 3:1 for large text, and 3:1 for UI components like borders and icons. For example, gray-400 (#9CA3AF) on white yields only 2.9:1 and fails the criterion.

Is empty alt text on an image an accessibility violation?▼

No, alt="" is correct for purely decorative images so screen readers skip them. It is a violation only when an informative image lacks descriptive alt text, forcing screen readers to announce the filename instead.

Why is removing the focus outline an accessibility problem?▼

Applying outline: none without a replacement leaves keyboard users unable to see where focus is, breaking all keyboard navigation. It is acceptable only if an equivalent indicator such as a border, background, or box-shadow is provided in every state.

What is the minimum touch target size for mobile interfaces?▼

Touch targets should be at least 44x44px, with 48x48px recommended. Evaluate the actual hit area including padding rather than just the visual element, since a 30px icon with sufficient padding can still pass.