The four WCAG principles (POUR)
Perceivable
- • Images have alt text
- • Videos have captions
- • Audio has transcripts
- • Color isn't the only way to convey info
Operable
- • All functions work with keyboard
- • No keyboard traps
- • Skip links to main content
- • Focus visible on all elements
Understandable
- • Language declared in HTML
- • Navigation is consistent
- • Error messages are clear
- • Labels describe form fields
Robust
- • Valid HTML
- • ARIA used correctly
- • Works with screen readers
- • Doesn't break with zoom
Alt text for journalism
News photo alt text decision tree
Include:
- WHO is in the image (if identifiable and relevant)
- WHAT is happening (the action or situation)
- WHERE (if location matters to story)
Avoid:
- • Repeating caption text verbatim
- • Starting with "Image of" or "Photo of"
- • Purely decorative descriptions
Examples
Photo: Protesters holding signs outside courthouse
Bad: "Protesters"
Good: "Approximately 50 protesters hold signs reading 'Justice Now' outside the federal courthouse in downtown Seattle"
Photo: Headshot of interview subject
Bad: "Photo"
Good: "Dr. Sarah Chen, epidemiologist at Johns Hopkins"
Accessible data visualization
Chart accessibility checklist
-
Text alternative describing the key insight
-
Data table available (visible or linked)
-
Colors have sufficient contrast
-
Patterns/textures supplement color coding
-
Labels directly on chart (not legend-only)
-
Title describes what chart shows
Color-blind safe palettes
Paul Tol's color schemes - tested for accessibility:
Bright palette
Categorical palette
Contrast requirements (WCAG 2.1)
| Element type | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+) | 3:1 | 4.5:1 |
| UI components | 3:1 | — |
Video and audio accessibility
Caption requirements
- • 99%+ accuracy
- • Synchronized within 1 second
- • Speaker identification for multiple speakers
- • Sound effects described [applause]
- • Can be toggled on/off
Audio description
- • Key visual info not in dialogue
- • Actions crucial to understanding
- • Text on screen not read aloud
- • Identifying info for speakers
Manual testing checklist
Keyboard navigation
- Tab through entire page
- Can reach all interactive elements
- Focus order makes sense
- No keyboard traps
- Skip link works
Zoom testing
- 200% zoom, no horizontal scroll
- 400% zoom, content still usable
- Text spacing adjustments don't break layout
Color testing
- Works in grayscale
- Links distinguishable from text
Legal requirements
United States
- Section 508: Federal agencies
- ADA: Increasingly applied to websites
- State laws: Many have additional requirements
European Union
- European Accessibility Act: From 2025
- EN 301 549: Technical standard
Best practice
WCAG 2.1 AA is the global standard. Meet this and you'll likely satisfy most legal requirements.
What's included
Code patterns
- Accessible chart HTML pattern
- Skip link implementation (JS)
- Modal keyboard trap prevention
- Accessible form field pattern
- Error message handling
Python utilities
- Alt text prompt generator
- Color contrast validator
- Color-blind safe palettes
- Axe-core audit runner (Playwright)
Installation
# Clone the repository
git clone https://github.com/jamditis/claude-skills-journalism.git
# Copy the skill to your Claude config
cp -r claude-skills-journalism/accessibility-compliance ~/.claude/skills/
Or download just this skill from the GitHub repository.
Make your content accessible
Ensure your journalism reaches all readers, including those using assistive technologies.
View on GitHub