Accessibility Audit

[DanielCliftonGuardian]

🔍 Accessibility Audit: 342 Stories with Violations

Generated: December 23, 2025
Tool: axe-core 4.10.0 via Storybook a11y addon
Scope: All 1259 Storybook stories

📊 Executive Summary

Metric	Count
Total stories scanned	1259
Stories with violations	342 (27%)
Unique violation types	26

By Severity

Severity	Count	Description
🔴 Critical	6	Severe barriers preventing access
🟠 Serious	11	Significant barriers to access
🟡 Moderate	5	Some barriers to access
🟢 Minor	4	Minor barriers

---

🔴 Critical Issues

1. button-name - Buttons must have discernible text

WCAG: 2.0 A (4.1.2)
Affected: 10 stories
Fix: Add visible text, aria-label, or aria-labelledby to buttons

Affected Components

• Components/Audio Atom (2 stories)
• Components/EditionSwitcherBanner (1 story)
• Components/SignInGate (3 stories)
• Components/marketing/DesignableBanner (4 stories)

2. label - Form elements must have labels

WCAG: 2.0 A (4.1.2)
Affected: 7 stories
Fix: Add <label> elements or aria-label to form inputs

Affected Components

• Components/Audio Atom (2 stories)
• Components/Callout Embed Block Component/Form (3 stories)
• Components/Crosswords (Editions) (2 stories)

3. aria-allowed-attr - Invalid ARIA attributes

WCAG: 2.0 A (4.1.2)
Affected: 1 story
Fix: Remove unsupported ARIA attributes from elements

Affected Components

• Discussion/Abuse Report Form - Dialog

4. image-alt - Images must have alternate text

WCAG: 2.0 A (1.1.1)
Affected: 8 stories
Fix: Add alt attribute to images, or role="presentation" for decorative images

Affected Components

• Components/InteractiveLayoutAtom (1 story)
• Components/SlotBodyEnd/BrazeEpics (7 stories)

5. aria-required-children - Missing required child elements

WCAG: 2.0 A (4.1.2)
Affected: 2 stories
Fix: Ensure ARIA parent roles have required child roles

Affected Components

• Components/Carousel (2 stories)

6. svg-img-alt - SVG images must have accessible text

WCAG: 2.0 A (1.1.1)
Affected: 1 story
Fix: Add <title> or aria-label to SVG elements with role="img"

Affected Components

• Components/Standfirst (1 story)

---

🟠 Serious Issues

Rule	Description	Affected
color-contrast	Insufficient color contrast	240 stories
aria-hidden-focus	Focusable elements hidden from AT	49 stories
link-in-text-block	Links not distinguishable from text	85 stories
aria-prohibited-attr	Invalid ARIA attributes	27 stories
scrollable-region-focusable	Scrollable regions need keyboard access	5 stories
aria-input-field-name	ARIA input fields need names	3 stories
nested-interactive	Nested interactive controls	3 stories
list	Invalid list structure	2 stories
select-name	Select elements need names	2 stories
definition-list	Invalid definition list	1 story
aria-valid-attr-value	Invalid ARIA attribute values	1 story

---

🟡 Moderate Issues

Rule	Description	Affected
landmark-complementary-is-top-level	Aside not at top level	265 stories
landmark-unique	Landmarks need unique labels	75 stories
heading-order	Heading levels should increase by one	38 stories
landmark-no-duplicate-contentinfo	Multiple contentinfo landmarks	1 story
landmark-one-main	Page should have one main landmark	1 story

---

🟢 Minor Issues

Rule	Description	Affected
aria-allowed-role	Role not allowed on element	58 stories
empty-heading	Headings should not be empty	6 stories
region	Content should be in landmarks	2 stories
empty-table-header	Table headers should not be empty	1 story

---

📋 Recommended Priorities

Phase 1: Critical Fixes (Immediate)

• Fix button-name violations (10 stories)
• Fix label violations (7 stories)
• Fix image-alt violations (8 stories)
• Fix aria-allowed-attr violation (1 story)
• Fix aria-required-children violations (2 stories)
• Fix svg-img-alt violation (1 story)

Phase 2: High-Impact Serious Fixes

• Address color-contrast issues (240 stories) - biggest impact
• Fix aria-hidden-focus issues (49 stories)
• Fix link-in-text-block issues (85 stories)

Phase 3: Moderate/Minor Cleanup

• Address landmark structure issues
• Fix heading order issues
• Clean up ARIA role usage

---

🔗 Resources

• WCAG 2.1 Quick Reference
• Storybook a11y Addon Docs

---

🔄 How to Verify Fixes

1. Run Storybook: pnpm storybook
2. Navigate to the affected story
3. Open the "Accessibility" panel
4. Verify no violations are reported