Agent skill · practicalswan
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".
What it needs
About 9k tokens when loaded.
What this skill does
Accessibility (a11y) Comprehensive accessibility guidelines based on WCAG 2.2 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities. Evidence-led audit workflow When a rendered page is available: 1. Run a live Lighthouse Accessibility audit when that capability is available; with Chrome DevTools MCP, use lighthouseaudit. Use mobile navigation mode for a general public page or snapshot mode when reloading would lose authenticated or user-created state. 2. Use failed audit nodes to localize the relevant component or template instead of searching the whole repository for generic patterns. 3. Inspect a rendered accessibility-tree snapshot for names, roles, states, landmarks, and heading structure; with Chrome DevTools MCP, use takesnapshot. Exercise the affected flow with the keyboard. 4. Fix the source, then re-run the same audit and manual interaction. If the live tools are unavailable, use Lighthouse CLI or axe for automated coverage and complete the same manual checks. Automated tools detect only a subset of accessibility barriers: a score of 100 is not WCAG conformance, and a low score does not replace issue-level evidence. WCAG Principles: POUR Principle Description ----------- ------------- Perceivable Content can be perceived through different senses Operable Interface can be operated by all users Understandable Content and interface are understandable Robust Content works with assistive technologies Conformance levels Level Requirement Target ------- ------------- -------- A Minimum accessibility Must pass AA Standard compliance Should pass (legal requirement in many jurisdictions) AAA Enhanced accessibility Nice to have --- Perceivable Text alternatives (1.1) Images require alt text: Icon buttons need accessible names: Visually hidden class: Color contrast (1.4.3, 1.4.6) Text Size AA minimum AAA enhanced ----------- ------------ -------------- Normal text (< 18px / < 14px bold) 4.5:1 7:1 Large text (≥ 18 …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills practicalswan/accessibility