# Web Accessibility Practices

> Use when implementing web accessibility (WCAG) standards.

- Skill: `loopyluci/web-accessibility-practices` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/web-accessibility-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/web-accessibility-practices/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/web-accessibility-practices

---


# Web Accessibility Practices

Implementing web accessibility (WCAG) standards — from semantic HTML and ARIA through keyboard navigation, color contrast, screen reader compatibility, and testing.

## When to Use

- Ensuring web content is accessible to users with disabilities
- Meeting WCAG 2.1 AA compliance requirements
- Improving SEO through semantic HTML
- Building inclusive web applications

## Accessibility Principles

```python
A11Y_PRINCIPLES = {
    'perceivable': 'Content available to senses — alt text, captions, adaptable presentation',
    'operable': 'Interface works for all input methods — keyboard, voice, switch',
    'understandable': 'Content and interface are clear — readable text, predictable behavior',
    'robust': 'Compatible with current and future assistive technologies',
}

def check_color_contrast(foreground: str, background: str, size: str = 'normal') -> float:
    """Calculate WCAG contrast ratio (minimum 4.5:1 for normal text)."""
    def hex_to_luminance(hex_color):
        rgb = [int(hex_color[i:i+2], 16) / 255.0 for i in (1, 3, 5)]
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]
    
    l1 = hex_to_luminance(foreground) + 0.05
    l2 = hex_to_luminance(background) + 0.05
    ratio = max(l1, l2) / min(l1, l2)
    passed = ratio >= (4.5 if size == 'normal' else 3.0)
    return {'ratio': round(ratio, 2), 'passed': passed}
```

## Verification Checklist

- [ ] All images have alt text (decorative images: alt="")
- [ ] Color contrast passes WCAG AA (4.5:1 normal, 3:1 large text)
- [ ] All interactive elements reachable by keyboard
- [ ] Focus indicators visible (not default browser outline only)
- [ ] ARIA landmarks used (main, nav, banner, complementary)
- [ ] Form inputs have associated labels
- [ ] Page headers in hierarchical order (h1 → h2 → h3)
- [ ] Tested with screen reader (VoiceOver, NVDA, JAWS)