Manual WCAG 2.2 AA Audit

We audited our own homepage by hand. Here's everything we found — and fixed.

Automated scanners (including our own free checker) catch maybe a third of real accessibility issues. The rest — keyboard target sizes, motion that never stops, focus hidden behind a sticky header — only show up when a person actually goes through the page. So we did that, on our own site, and published the results the same way we publish everything else.

Scope: zenmasterworks.com homepage, audited against WCAG 2.2 Level AA. Verified July 9, 2026. Full findings from the original pass, plus the fix applied to each one.

Findings & Fixes

Three real issues, all closed

Blocking WCAG 2.5.8 · Target Size (Minimum) · AA

Top nav links and dropdown toggles were smaller than the 24×24px minimum

Desktop nav links had no padding at all — their clickable area was just the raw text. The "Blueprints" and "More" dropdown toggles were the same: padding:0.

Before

Nav links and dropdown toggles measured roughly 18–20px tall — under the required minimum.

.nav-more-btn{ padding:0; }
After

Every nav link and toggle now measures 37–45px tall, comfortably clearing 24px, verified by direct measurement.

.nav-more-btn{ padding:10px 4px; }
Bug WCAG 2.2.2 · Pause, Stop, Hide · A

The hero background video had no way to stop it

The video auto-plays and loops indefinitely. It's muted and already skipped entirely for anyone with reduced-motion enabled — but the standard requires a visible control regardless of that OS-level setting.

Before

No pause control existed anywhere on the page. The only way to stop the video was the reduced-motion setting.

After

A pause/play button now appears once the video starts, bottom-right of the hero, with a proper aria-pressed state and label that updates on click.

Bug WCAG 2.4.11 · Focus Not Obscured (Minimum) · AA

The sticky header could hide the section you just jumped to

In-page anchor links (Work, Blog, FAQ, etc.) scrolled their target flush to the top of the viewport — right where the sticky, semi-opaque header sits. A keyboard user tabbing into that section could land on a link hidden behind it.

Before

No scroll offset existed. Section tops could render directly underneath the 103px-tall sticky header.

After

Every section now reserves headroom equal to the header's height, so nothing lands hidden behind it.

section[id]{ scroll-margin-top:118px; }
Also Checked

What was already right

No raw <img> tags — zero alt-text risk by design
Clean, sequential heading order — one h1, no skipped levels
Working skip link, correct lang attribute
No aria-haspopup misuse on dropdown buttons
Global :focus-visible outline, never stripped
prefers-reduced-motion respected in three separate places
A previously-documented brand-orange contrast failure (2.75:1) confirmed still fixed
No duplicate IDs, no positive tabindex anywhere
3/3
Findings closed & verified

Every fix was re-measured after the change — not just eyeballed. Nav target sizes, the video pause state, and the scroll offset were all tested against real rendered output before this page was published.

Get This For Your Site

Want the same audit run on your website?

A real person goes through your site the way a screen reader or keyboard-only user actually would — not just a scanner. You get a severity-ranked report like the one above: what's broken, why it matters, and exactly how we'd fix it.

Starting at $499

One page audited in full — multi-page and full-site scopes quoted after a quick look at your site.

Request Your Audit →
  • Hand-reviewed, not just scanned
  • Severity-ranked findings
  • Fixes verified, not assumed