Skip to content

fix(a11y): resolve pre-existing color-contrast and link-name violations found by live smoke tests #1835

Description

@davidsneighbour

Context

Discovered while implementing #1699 (live-site Playwright smoke tests). The new src/test/live/accessibility.spec.ts test runs axe-core (WCAG 2.1 AA) against /, /blog/, /connect/, and /find/ on production, and found real, pre-existing violations. The color-contrast rule is disabled in that test (and the one known link-name node is excluded) specifically to unblock #1699 without silently hiding these — this issue tracks fixing them for real.

Findings (production, kollitsch.dev)

color-contrast (serious) — all 4 pages:

  • /: 22 nodes
  • /blog/: 26 nodes
  • /connect/: 9 nodes
  • /find/: 11 nodes

Known contributors include the large decorative "KOLLITSCH.dev*" watermark heading (very low contrast by design — may be legitimately exempt as decorative/non-text, needs a design decision recorded in DESIGN.md either way) and several real link-contrast issues in the footer (RSS/Atom/JSON feed links, the Static.Quest web-ring links) at ~3.05:1 against a 4.5:1 requirement.

link-name (serious) — /blog/:
One node: the cover-image overlay link for the post /blog/2025/language-kuchisabishii/ renders aria-label="". Root cause: PostImage.astro sets aria-label={cover.alt}, and that post's frontmatter (src/content/blog/2025/language-kuchisabishii/index.md) has no cover.alt and an empty cover.title (content.config.ts's schema requires cover.title to be set before cover.alt is allowed, so a proper fix needs both fields populated with real photo details).

Suggested approach

  1. Decide (and document in DESIGN.md) whether the watermark heading is intentionally exempt from contrast requirements as decorative/non-text content; if not, raise its contrast.
  2. Fix footer link contrast (RSS/Atom/JSON/web-ring links) to meet 4.5:1 in both light and dark mode.
  3. Add a real cover.title/cover.alt pair to language-kuchisabishii/index.md (needs the actual photo source/credit, which this triage didn't have).
  4. Once fixed, remove the disableRules(['color-contrast']) call and the .exclude(...) for that post's link in src/test/live/accessibility.spec.ts so the live smoke test enforces the full WCAG 2.1 AA ruleset again.

Validation

npx playwright test --config ./playwright.live.config.ts --tsconfig ./tsconfig.playwright.json accessibility.spec.ts should pass with no rule exclusions.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    type:bugBugfixes in the codebase when something is not working correctly.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions