Internal reference — technical audit, for planning
Technical Audit
Homepage concept mockups (index.html, variation-2.html, variation-3.html) · run via /impeccable audit, tracked through harden and adapt passes
Technical-code audit, not a design critique — checks what's measurable and verifiable in the implementation across five dimensions. This page tracks findings and their resolution status so the team can see what's fixed, what's deliberately deferred, and what's still open before this leaves the mockup stage for WordPress theme files.
Current score: 17/20 — Good
| # | Dimension | Score | Status |
|---|---|---|---|
| 1 | Accessibility | 4/4 | Both P2s and the touch-target P3 fixed; one P3 deliberately deferred |
| 2 | Performance | 2/4 | Unchanged — Tailwind CDN + un-subset fonts, deferred to WordPress build |
| 3 | Theming | 3/4 | Unchanged — strong token discipline, minor defensible exceptions |
| 4 | Responsive Design | 4/4 | Both tablet-width findings from the adapt pass fixed |
| 5 | Implementation Integrity | 4/4 | Unchanged — coherent, no drift |
Original score at first audit: 15/20. Performance is the one dimension holding this back from Excellent (18-20), and it's an intentional deferral, not an oversight — see below.
Findings
Label / aria-label mismatch on grid search
variation-3.html's search bar had a visible label ("Looking for something specific?") that didn't match its aria-label — screen-reader and sighted users heard/saw different text for the same field (WCAG 2.5.3). Fixed by dropping the conflicting aria-label.
Decorative icons not marked aria-hidden
17 of 18 inline SVG icons per file lacked aria-hidden="true" (only the hero-art SVG had it). Swept all three files — 17 + 16 + 16 icons fixed.
Touch targets under 44×44px
.search-icon-btn was 40×40px, .lang-switch was ~36-40px tall. Cleared the WCAG AA minimum (24×24) but missed the 44×44 best-practice target. Bumped both to 44px.
Quicklinks grid lost its priority-sizing at tablet width
The asymmetric priority grid (the whole point of the "structured board" concept) only applied at lg: (1024px). Between 640-1023px it fell back to a uniform 2-column grid — exactly the "same-size cards" pattern this design exists to avoid. Moved the breakpoint to md: (768px).
Header nav wrapped into ragged rows at tablet width
Primary nav appeared at md: (768px) but didn't have room until ~1024px, wrapping into 2-3 uneven rows. Extended the hamburger-menu breakpoint to lg: so tablets get the compact menu, matching mobile.
Search inputs rely on aria-label instead of a visible label
Technically compliant (aria-label satisfies WCAG 4.1.2), but placeholder-only fields are a known rough edge for users with cognitive/memory difficulties once the hint text disappears. Low priority given these are unambiguous search fields in context — revisit with /impeccable clarify if this goes to production as-is.
Tailwind Play CDN + un-subset Google Fonts
Tailwind's own docs say the CDN build isn't for production (runtime JIT cost on every load); full Google Fonts families conflict with prompt.md's own <120KB self-hosted-subset constraint. Expected at this static-mockup stage — resolve when converting to WordPress theme files, not before.
RTL / CJK support, live-data error and empty states
RTL/CJK: PRODUCT.md lists the published language list as unconfirmed, and the current font stack (Vollkorn + IBM Plex Sans) doesn't cover Arabic/Hebrew/CJK regardless. API errors, pagination, and empty states for news/records: there's no backend or data layer yet at this static-mockup stage — designing for data that isn't wired up would mean inventing behavior, not hardening real behavior.
Recommended next steps
- Carry the same self-hosted-fonts / non-CDN-Tailwind conversion into the WordPress build — don't ship this mockup's <head> as-is.
- Confirm the published language list (open in PRODUCT.md) before deciding whether RTL/CJK support is needed at all.
- Revisit the aria-label-only search fields with /impeccable clarify once real search functionality exists.
- Re-run /impeccable audit after the WordPress theme conversion — this report reflects the static-mockup stage only.