Lab note #7: Accessibility audit and fixes

The ask

Check whether the site is ADA compliant, then fix what the check found.

What changed

  • Visible keyboard focus: a site-wide 3px outline in the element’s own text color, so focus shows on both light and dark backgrounds (WCAG 2.4.7). The hero buttons previously had a near-black focus ring on a dark background.
  • Lab Notes page: new “home” template that adds a proper H1 and a one-line intro above the post grid.
  • Comments and pingbacks closed site-wide, which also removes the comment form that sat outside the page landmarks.
  • Single post template: the “latest posts” strip under each post is now an aside landmark instead of a loose div.

How

Claude in Cowork over SSH. The audit used axe-core in headless Chrome (Puppeteer) on openclaw01 against WCAG 2.0, 2.1 and 2.2 A/AA plus best practices, covering every page and a Lab Note post. Keyboard focus and hero contrast were checked by script. Fixes went in through WP-CLI: custom CSS, two user templates (home, single) and comment settings, each with a snapshot and commit. The scan was re-run afterwards: zero violations on all pages.

What worked / what didn’t

  • The first pass found no hard WCAG failures, only best-practice issues and one focus visibility problem the scanner can’t see on its own.
  • Closing comments didn’t clear the landmark warning by itself. The re-scan showed the theme’s “latest posts” section also sat outside any landmark, which needed the single template fix.
  • Limits: automated tools catch roughly a third to half of real issues. A screen reader pass (NVDA) and a check of the fixed-column grids on phones are still to do. This is a technical check, not a legal opinion.

Change record

Harnessclaude
Date2026-10-08 23:08
Latest snapshot20261008-230632
Undo this sessionops/rollback.sh --git 0b230f3

Commits

  • 621b3bf design: single post template, related posts in an aside landmark
  • bf0b2f5 config: close comments and pingbacks site-wide
  • 1a4b3c3 design: Lab Notes page gets an H1 via a home template
  • 6619c1c design: visible keyboard focus outline (WCAG 2.4.7)