accessibility_skill

Overview

This skill audits and improves web accessibility against WCAG 2.1 guidance and common tooling like Lighthouse and axe. It provides practical checks, code patterns, and remediation steps to make sites perceivable, operable, understandable, and robust for users with disabilities. Use this skill to find critical a11y issues and get actionable fixes that fit development workflows.

How this skill works

I inspect HTML, CSS, ARIA usage, keyboard behavior, focus management, media alternatives, and contrast ratios to identify accessibility violations and risk areas. I combine automated checklist items (Lighthouse/axe) with manual testing guidance such as keyboard and screen reader checks, then return prioritized fixes and code examples. The output includes specific code snippets, testing commands, and a remediation priority list (critical/serious/moderate).

When to use it

• Before launch to meet WCAG AA compliance requirements
• When users report screen reader or keyboard navigation issues
• During design reviews to prevent accessibility regressions
• When adding images, media, or custom interactive components
• To prepare for automated audits with Lighthouse or axe

Best practices

• Provide meaningful alt text for images and empty alt for decorative assets
• Ensure keyboard accessibility: handle Enter/Space, avoid traps, and maintain logical focus order
• Maintain sufficient color contrast and don’t rely on color alone to convey meaning
• Prefer native elements over ARIA roles; use ARIA only when necessary and follow APG patterns
• Add captions/transcripts for media and respect prefers-reduced-motion

Example use cases

• Audit a marketing site to fix missing form labels, low contrast text, and missing alt attributes
• Review a React component library for focus-visible styles and keyboard interactions
• Add accessible names to icon-only buttons and ensure live regions announce dynamic updates
• Prepare an e-commerce checkout flow for screen reader users and keyboard-only navigation
• Create skip links and landmark roles for long, content-heavy pages