← Back to Blog

The accessibility + UX audit tools I built after Lighthouse stayed polite

The accessibility + UX audit tools I built after Lighthouse stayed polite

Lighthouse scored jwatte.com 97 on accessibility. I still found five real issues and built tools to surface them automatically. This is what they check and why they matter.

1. Redundant Alt Text Audit

If alt="The W-2 Trap" sits next to <h3>The W-2 Trap</h3>, screen readers announce the same content twice. Lighthouse caught it once on jwatte.com; axe-core has a rule for it; but no standalone tool visualized the pattern across a page.

The audit parses every <img>, reads text in the nearest 2-3 ancestor elements, and flags alt attributes that duplicate that nearby text. Distinguishes missing-alt (WCAG 1.1.1 fail) from empty-alt (correct for decorative images) from redundant-alt.

2. Identical Link Text Audit

Six "Buy on Amazon" buttons going to six different book ASINs. Screen readers have no way to tell them apart. WCAG 2.4.4 fail.

The audit groups every <a href> by visible text (or aria-label if present) and flags groups where the same text leads to ≥2 different URLs. Fix pattern: keep the visible "Buy on Amazon" for design; add aria-label="Buy The W-2 Trap on Amazon" for screen readers.

3. User Preference Media Queries Audit

prefers-color-scheme: dark, prefers-reduced-motion, prefers-contrast, forced-colors (Windows High Contrast), prefers-reduced-data. Lighthouse doesn't check support for any of them. Users on Windows High Contrast see your form controls disappear if you haven't set system colors.

The audit scans your CSS for each media query family, flags missing <meta name="color-scheme">, and checks for a manual theme toggle with localStorage persistence.

4. Non-Composited Animation Audit

Lighthouse flagged "57 animated elements" on jwatte.com but didn't tell me which properties were the problem. Each transition: color or transition: box-shadow is a main-thread repaint per frame.

The audit parses CSS, extracts every transition and animation declaration, and flags ones targeting non-GPU properties (color, background, border, box-shadow, top/left/right/bottom, width, height, margin, padding). Produces a specific rewrite recipe per offender.

5. Intrusive Interstitial Audit

Google penalizes intrusive interstitials on mobile since 2017. The penalty applies to fixed/fullscreen overlays, cookie walls that block content, forced newsletter popups, and — increasingly — age gates.

The audit detects class patterns (modal, popup, overlay, interstitial, newsletter, cookie-wall, age-gate), fixed-position elements with high z-index, open <dialog> / role=dialog on page load, and the presence of 12 known popup libraries (OptinMonster, Sumo, Privy, Justuno, Klaviyo, HelloBar, Poptin, WisePops, etc).

6. Form Conversion Audit

Every extra field drops conversion ~7% on mobile. The audit counts form fields, flags unlabeled inputs (WCAG 1.3.1 fail), missing autocomplete hints (browser/password-manager prefill), required fields on phone/company/job-title (usually unnecessary), and placeholder-only labels.

7. Responsive Image Audit

Accessibility-adjacent: a 2 MB hero image on a 3G mobile connection makes the page unusable for users with slow networks. This is a WCAG 2.4.1 "bypass blocks" adjacent — not technically a violation but practically an accessibility barrier.

The audit compares natural vs displayed dimensions, flags images shipped ≥2× the rendered width, and estimates the waste in KB.

8. Existing accessibility tools still working

9. View Transitions API and prefers-reduced-motion pair

For multi-page sites adding View Transitions, the audit reminds you to wrap every transition in @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0ms !important; } }. Otherwise the UX is broken for users who set reduced motion in OS accessibility settings.

How to use this stack

  1. Run Mega SEO Analyzer v2 — its dimensions include accessibility-relevant checks (contrast, schema, hygiene).
  2. When the accessibility surface flags, run the specialists above.
  3. Generate a 30/60/90 plan via SEO Roadmap Generator — choose your business type to weight priorities.

Related reading

Fact-check notes and sources

This post is informational, not accessibility-consulting or legal advice. Mentions of Google, Lighthouse, Microsoft, OptinMonster, Sumo, Privy, Justuno, Klaviyo, HelloBar, Poptin, WisePops, axe-core, and similar products are nominative fair use. No affiliation is implied. ADA / Section 508 compliance requires a manual audit by a qualified professional.

← Back to Blog

Accessibility Options

Text Size
High Contrast
Reduce Motion
Reading Guide
Link Highlighting
Accessibility Statement

J.A. Watte is committed to ensuring digital accessibility for people with disabilities. This site conforms to WCAG 2.1 and 2.2 Level AA guidelines.

Measures Taken

  • Semantic HTML with proper heading hierarchy
  • ARIA labels and roles for interactive components
  • Color contrast ratios meeting WCAG AA (4.5:1)
  • Full keyboard navigation support
  • Skip navigation link
  • Visible focus indicators (3:1 contrast)
  • 44px minimum touch/click targets
  • Dark/light theme with system preference detection
  • Responsive design for all devices
  • Reduced motion support (CSS + toggle)
  • Text size customization (14px–20px)
  • Print stylesheet

Feedback

Contact: jwatte.com/contact

Full Accessibility StatementPrivacy Policy

Last updated: April 2026