📋 Issue Type
Accessibility / WCAG Compliance
🎯 Objective
Conduct comprehensive WCAG 2.1 AA accessibility audit of news articles and fix identified issues to ensure full compliance and improve experience for users with disabilities.
📊 Current State
Accessibility Status: Unknown, needs audit
Potential Issues:
- Color contrast ratios (text/background)
- Keyboard navigation completeness
- Screen reader compatibility
- Focus indicators visibility
- ARIA labels for interactive elements
- Heading hierarchy (h1 → h2 → h3)
- Link text clarity ("click here" vs. descriptive)
- Language attribute correctness (lang="en" vs. lang="sv")
- Alt text for images
🚀 Desired State
WCAG 2.1 AA Compliance:
- ✅ All color contrast ratios ≥ 4.5:1 (normal text)
- ✅ All color contrast ratios ≥ 3:1 (large text)
- ✅ Complete keyboard navigation (Tab, Enter, Esc)
- ✅ Screen reader compatible (NVDA, JAWS, VoiceOver tested)
- ✅ Visible focus indicators
- ✅ Proper ARIA labels
- ✅ Semantic HTML structure
- ✅ Descriptive link text
- ✅ Correct language attributes per version
🔧 Implementation Approach
Step 1: Automated Accessibility Audit
# Install axe-core
npm install -D @axe-core/cli
# Run audit
npx axe news/2026-02-18-committee-reports-en.html --save audit-report.json
# Lighthouse accessibility audit
npx lighthouse https://riksdagsmonitor.com/news/2026-02-18-committee-reports-en.html --only-categories=accessibility --output html
Step 2: Manual Testing
**Keyboard Navigation Test**:
1. Tab through all interactive elements
2. Verify focus indicators visible
3. Test Esc key functionality
4. Test Enter/Space on buttons/links
**Screen Reader Test**:
1. Test with NVDA (Windows)
2. Test with VoiceOver (Mac)
3. Verify ARIA labels read correctly
4. Check heading navigation (H key)
**Color Contrast Test**:
1. Use WebAIM Contrast Checker
2. Check all text/background combinations
3. Verify focus indicators meet 3:1 ratio
Step 3: Fix Common Issues
Issue: Low Color Contrast
/* Before: 3.2:1 (fails) */
.article-meta { color: #888; background: #fff; }
/* After: 4.6:1 (passes) */
.article-meta { color: #666; background: #fff; }Issue: Missing ARIA Labels
<!-- Before -->
<a href="...">Document</a>
<!-- After -->
<a href="..." aria-label="Committee Report HD01SkU19">Document HD01SkU19</a>
Issue: Incorrect Language Attribute
<!-- Before (Swedish article with English lang) -->
<html lang="en">
<!-- After -->
<html lang="sv">
Step 4: Validate Fixes
# Re-run automated audit
npx axe news/2026-02-18-committee-reports-en.html
# Verify zero critical/serious issues
✅ Acceptance Criteria
📚 References
🤖 Recommended Agent
quality-engineer or frontend-specialist
📝 Notes
Legal Compliance: WCAG 2.1 AA compliance is legally required in EU for public sector websites. Sweden's accessibility law (2019:937) mandates compliance.
User Impact: 15-20% of users have disabilities that benefit from accessibility improvements. Improved accessibility also helps elderly users and mobile users.
Timeline: 3-4 days (audit + fixes + validation)
📋 Issue Type
Accessibility / WCAG Compliance
🎯 Objective
Conduct comprehensive WCAG 2.1 AA accessibility audit of news articles and fix identified issues to ensure full compliance and improve experience for users with disabilities.
📊 Current State
Accessibility Status: Unknown, needs audit
Potential Issues:
🚀 Desired State
WCAG 2.1 AA Compliance:
🔧 Implementation Approach
Step 1: Automated Accessibility Audit
Step 2: Manual Testing
Step 3: Fix Common Issues
Issue: Low Color Contrast
Issue: Missing ARIA Labels
Issue: Incorrect Language Attribute
Step 4: Validate Fixes
✅ Acceptance Criteria
📚 References
news/2026-02-*-*.html.github/ACCESSIBILITY.md(if exists)🤖 Recommended Agent
quality-engineer or frontend-specialist
📝 Notes
Legal Compliance: WCAG 2.1 AA compliance is legally required in EU for public sector websites. Sweden's accessibility law (2019:937) mandates compliance.
User Impact: 15-20% of users have disabilities that benefit from accessibility improvements. Improved accessibility also helps elderly users and mobile users.
Timeline: 3-4 days (audit + fixes + validation)