accessibility

Audit and fix web accessibility issues against WCAG 2.2 success criteria.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often ship with accessibility barriers—missing alt text, low contrast, keyboard traps, unlabeled forms—that exclude users with disabilities and create legal compliance risk. This Skill provides a structured audit workflow and concrete fix patterns aligned with WCAG 2.2. ## Core Features & Use Cases - Evidence-led audits: Run Lighthouse or axe accessibility audits, inspect the rendered accessibility tree, and trace failures back to the responsible component instead of guessing. - WCAG 2.2 coverage: Organized guidance across the POUR principles, including the new 2.2 criteria such as Focus Not Obscured, Target Size, Dragging Movements, and Accessible Authentication. - Copy-paste fix patterns: Reference implementations for modal focus traps, skip links, form labels, error announcements, ARIA tabs, and live regions. - Use Case: A Lighthouse audit flags missing form labels and low contrast on your checkout page. Use this Skill to localize the failing components, apply the labeled-input and contrast fix patterns, then re-run the audit to verify. ## Quick Start Audit this page for WCAG 2.2 accessibility issues and fix the failing components.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit a web page for WCAG 2.2 accessibility?▼

Run a Lighthouse accessibility audit or axe scan against the rendered page, then inspect the accessibility tree snapshot for names, roles, and landmarks. Use the failed audit nodes to locate the responsible component, fix the source, and re-run the same audit to verify.

How do I make a modal dialog keyboard accessible?▼

Trap focus inside the modal by cycling Tab and Shift+Tab through its focusable elements and closing on Escape. The native HTML <dialog> element handles focus trapping automatically and is preferred when browser support allows.

What color contrast ratio does WCAG require for text?▼

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

Does a Lighthouse accessibility score of 100 mean WCAG conformance?▼

No. Automated tools detect only a subset of accessibility barriers, so a score of 100 is not WCAG conformance. Manual testing with keyboard navigation, screen readers, zoom, and reduced motion is still required.

What is the minimum touch target size in WCAG 2.2?▼

WCAG 2.2 Success Criterion 2.5.8 requires interactive targets to be at least 24 by 24 CSS pixels at Level AA. Exceptions apply to inline text links and targets with equivalent spacing, though 44 by 44 pixels is recommended.