full-stack-design-skills: Skill for Claude Code

Web Accessibility (a11y)

A practical guide to building digital products that work for everyone, regardless of ability.

Accessibility is not an afterthought—it's a foundational design principle. This skill covers the technical standards (WCAG 2.1) and practical patterns for building inclusive web experiences.

Why Accessibility Matters

Legal: WCAG 2.1 compliance is increasingly required (ADA, ATAG, EN 301 549, UK EQA).

Business: ~15% of the global population has a disability. Accessible design benefits everyone (captions help in noisy environments, voice control helps people with mobility issues, clear navigation helps users with cognitive disabilities).

Technical: Accessible patterns are often better for SEO, performance, and maintainability.

---

Core Principles: WCAG 2.1

WCAG (Web Content Accessibility Guidelines) has four principles, abbreviated as POUR:

1. Perceivable

Information must be perceivable—users must be able to see, hear, or otherwise sense it.

Guidelines:

• Text alternatives — Images need alt text
• Captions & transcripts — Audio/video needs text
• Adaptable content — Info not lost when zoomed or reflow
• Distinguishable — Text is readable (4.5:1 contrast, font size ≥12px)

2. Operable

Interfaces must be operable—users must be able to navigate and interact.

Guidelines:

• Keyboard accessible — All functions available via keyboard
• Enough time — Users can pause auto-playing content
• Seizure prevention — No flashing/flickering (3+ times/second)
• Navigable — Clear landmarks, skip links, heading hierarchy

3. Understandable

Content and operation must be understandable.

Guidelines:

• Readable — Clear language, short sentences, defined jargon
• Predictable — Consistent navigation, no surprises
• Input assistance — Form errors are identified and labeled clearly

4. Robust

Code must be robust—compatible with assistive technologies.

Guidelines:

• Valid HTML — Correct use of semantic elements
• ARIA correctly — Only use ARIA when HTML can't do it
• Naming, role, value — Every interactive element has a label (name), is understood (role), and exposes state (value)