```
## Color Contrast
```css
/* Minimum contrast ratios (WCAG AA) */
/* Normal text: 4.5:1 */
/* Large text (18pt+ or 14pt bold): 3:1 */
/* UI components: 3:1 */
.good-contrast {
/* Passes AAA (7:1) */
color: #1a1a1a;
background-color: #ffffff;
}
.acceptable-contrast {
/* Passes AA (4.5:1) */
color: #333333;
background-color: #ffffff;
}
.large-text {
/* Passes AA for large text (3:1) */
color: #555555;
background-color: #ffffff;
font-size: 18px;
}
/* Don't rely on color alone */
.status {
padding: 4px 8px;
border-radius: 4px;
}
.status.success {
background-color: #d4edda;
color: #155724;
}
.status.error {
background-color: #f8d7da;
color: #721c24;
}
/* Add icon to reinforce color meaning */
.status.success::before {
content: "✓ ";
}
.status.error::before {
content: "✕ ";
}
```
## Screen Reader Support
```html
View detailed description
Full description of the infographic content...
Quarterly Sales Report
Quarter
Revenue
Expenses
Q1
$100,000
$80,000
```
## Form Accessibility
```html
```
## Testing Accessibility
```python
# Automated accessibility testing with axe-core
import pytest
class TestAccessibility:
def test_homepage_accessibility(self, page):
"""Test homepage with axe-core."""
page.goto('/')
# Run axe-core
violations = page.evaluate('''() => {
const axe = window.axe;
return axe.run(document, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa']
}
});
}''')
assert len(violations['violations']) == 0, \
f"Accessibility violations: {violations['violations']}"
def test_keyboard_navigation(self, page):
"""Test keyboard navigation works."""
page.goto('/')
# Press Tab multiple times
page.keyboard.press('Tab')
focused = page.evaluate('document.activeElement.tagName')
# First focusable element should be first link
assert focused in ['A', 'BUTTON', 'INPUT']
def test_color_contrast(self, page):
"""Test color contrast requirements."""
page.goto('/')
violations = page.evaluate('''() => {
const axe = window.axe;
const results = axe.run(document, {
checks: ['color-contrast']
});
return results.violations;
}''')
assert len(violations) == 0
# Manual testing checklist
ACCESSIBILITY_CHECKLIST = """
[] All images have alt text
[] Form inputs have associated labels
[] Headings follow proper hierarchy (h1 > h2 > h3)
[] Color is not the only means of conveying information
[] Focus order is logical
[] Keyboard navigation works throughout
[] Skip links are present
[] ARIA landmarks are used correctly
[] Form errors are announced
[] Error messages are specific
[] Page has language attribute
[] Content is readable at 200% zoom
[] No keyboard traps
[] Focus is not lost when modal closes
"""
```
