Accessibility Audit

# 🔍 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 `` 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)

### 6. `svg-img-alt` - SVG images must have accessible text
**WCAG:** 2.0 A (1.1.1)
**Affected:** 1 story
**Fix:** Add `` or `aria-label` to SVG elements with `role="img"`

<details>
<summary>Affected Components</summary>

- Components/Standfirst (1 story)

</details>

---

## 🟠 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
- [x] #15063
- [x] #15065
- [x] #15066
- [x] #15067

### Phase 2: High-Impact Serious Fixes
- [ ] Address `color-contrast` issues (240 stories)
- [ ] 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](https://www.w3.org/WAI/WCAG21/quickref/)
- [Storybook a11y Addon Docs](https://storybook.js.org/docs/writing-tests/accessibility-testing)

---

## 🔄 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