[self-care:accessibility-checker] Accessibility Audit - 2026-09-11

The Astro documentation site is largely accessible across the eight sampled pages I audited in light and dark themes, but I reproduced one WCAG 2.2 AA failure in dark mode on the Dashboard data model page. Seven Mermaid edge labels in the entity map render at 4.43:1 contrast (`#ccc` text on `#585858`), which falls just below the required 4.5:1 threshold and makes relationship labels harder to read for low-vision users.

**Action:** Assign this issue to Copilot to adjust the dark-theme Mermaid edge-label palette on the Dashboard data model diagram, and accept the fix when the affected labels pass at least 4.5:1 contrast in rendered browser evidence without regressing the light theme.

**Audit:** 8 pages · light and dark · 0 blocker · 1 serious · 0 advisory

### Critical Findings
- **Serious — Mermaid edge labels on `(127.0.0.1/redacted) fail contrast in dark mode** (WCAG 1.4.3). Axe reproduced seven failing label nodes in the entity map at 1280×900 with foreground `#cccccc` on background `#585858`, measured at 4.43:1 instead of the required 4.5:1; increase the dark-mode label foreground or background contrast for Mermaid edge labels so every rendered relationship label clears AA.

### Recommended Next Action
Update the Mermaid dark-theme token or local CSS that styles edge-label text/background in the Dashboard data model diagram. This is the highest-return first fix because it resolves the only reproduced conformance failure, is narrowly scoped, and can be verified quickly with a repeat browser audit on the same page in dark mode.

Agent prompt

Adjust the documentation site's Mermaid dark-theme styling so edge labels in the Dashboard data model diagram on `/dashboard-data-model/` meet WCAG 2.2 AA text contrast. Preserve the current light theme appearance, keep the diagram semantics unchanged, and change only the dark-mode label foreground/background styling needed to push every edge label to at least 4.5:1 contrast. Verify completion by serving the built docs with `npm run docs:preview -- --host 127.0.0.1 --port (port)` and collecting rendered browser evidence in dark mode that the previously failing selectors no longer trigger axe `color-contrast` violations.

All Findings and Evidence

### Serious
1. **Insufficient contrast on Mermaid relationship labels in dark mode**
- **Affected pages:** `(127.0.0.1/redacted)
- **Affected schemes/viewports:** dark mode at 1280×900
- **WCAG:** 1.4.3 Contrast (Minimum) · Level AA
- **Selectors:**
- `foreignobject[width="89"] > .labelBkg > .edgeLabel > p`
- `foreignobject[width="101"] > .labelBkg > .edgeLabel > p`
- `.label[data-id="L_repository_run_0"] > foreignobject[width="111"][height="24"] > .labelBkg > .edgeLabel > p`
- `foreignobject[width="109"] > .labelBkg > .edgeLabel > p`
- `foreignobject[width="114"] > .labelBkg > .edgeLabel > p`
- `.label[data-id="L_run_session_0"] > foreignobject[width="111"][height="24"] > .labelBkg > .edgeLabel > p`
- `foreignobject[width="104"] > .labelBkg > .edgeLabel > p`
- **Reproduced evidence:** axe-core 4.13.0 reported each failing node as `Element has insufficient color contrast of 4.43 (foreground color: #cccccc, background color: #585858, font size: 16px, font weight: normal). Expected contrast ratio of 4.5:1`.
- **User impact:** low-vision users and users reading in dim environments may struggle to distinguish relationship labels in the diagram, especially because the failure is repeated across multiple edges in the same visualization.
- **Remediation:** increase the label text contrast in dark mode, darken the label background, or both; re-test the rendered diagram in dark mode until every edge label reaches at least 4.5:1.

### Blocker
None.

### Advisory
None.

Coverage and Audit Notes

### Audited URLs
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900
- `(127.0.0.1/redacted) — light/dark — 1280×900 and reflow spot-check at 320×900

### Checks completed
- Confirmed the served base path from Astro config: `/gh-aw-cao/`.
- Launched the prepared preview server with `npm run docs:preview -- --host 127.0.0.1 --port 36301` and verified `(127.0.0.1/redacted) responded before browsing.
- Ran axe-core against WCAG 2.0/2.1/2.2 A and AA tags on every audited page in light and dark mode.
- Manually spot-checked keyboard tab order, skip link behavior, focus visibility, landmark/heading structure, image/SVG exposure, reduced-motion media emulation, and 320px reflow in the rendered browser.

### Reproduced clean checks outside the recorded issue
- Skip link was present and working on all sampled pages.
- No horizontal overflow was reproduced at 320 CSS pixels on the sampled pages.
- No keyboard trap was reproduced in the sampled tab sequences.
- No additional axe WCAG A/AA violations were reproduced outside the dark-mode Mermaid label contrast failure above.

### Notes and limitations
- This was a representative sample of eight generated pages rather than an exhaustive crawl of the full documentation site.
- Motion review was limited to reduced-motion emulation and visible behavior in the sampled pages; no separate animation stress test was needed because no additional motion-dependent barrier was reproduced.
- One structural smell was observed on `/dashboard-overview/` (two visible `h1` elements), but I did not report it because it was not reproduced as a WCAG failure with user-impact evidence in this run.

### Supporting logs
- Preview readiness URL: `(127.0.0.1/redacted) → HTTP 200
- Browser preflight logs reviewed:
- `.playwright/preflight-chrome.log`
- `.playwright/preflight-node.log`

### Control Plane
- Correlation ID: 34552396891-555
- Central repository: githubnext/gh-aw-cao
- Control plane run: https://github.com/githubnext/gh-aw-cao/actions/runs/34552396891

**References:** [§34552662356](https://github.com/githubnext/gh-aw-cao/actions/runs/34552662356)

> Generated by [♿ SelfCare / Accessibility](https://github.com/githubnext/gh-aw-cao/actions/runs/34552662356) · pi · gpt54 · 31.2 AIC · ⊞ 10.6K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fgh-aw-cao+is%3Aissue+%22gh-aw-workflow-call-id%3A+githubnext%2Fgh-aw-cao%2Fself-care-accessibility-checker%22&type=issues)
> - [x] expires on Sep 25, 2026, 2:03 AM UTC

Start with the Mermaid styling used by the documentation page at /dashboard-data-model/ and locate the dark-theme token or local CSS for edge-label text and backgrounds. Serve the built docs with npm run docs:preview -- --host 127.0.0.1 --port (port), then run the same dark-mode browser audit and confirm all affected labels pass axe color-contrast at 4.5:1 without changing the light theme.

Written by the indexing model from the issue text.