Why Overlays Failed, What axe-core Misses, and the Architecture of a <12KB Zero-PII Telemetry Ring Buffer

joshua brightwell — Tue, 10 Nov 2026 14:00:00 +0000

For nearly a decade, engineering teams have treated web accessibility as a compliance tax. You either waited for an enterprise auditor to deliver a 400-page PDF full of cryptic WCAG violations (1.3.1, 4.1.2) that stalled sprint velocity, or marketing injected a 1-line third-party "accessibility overlay" script claiming automated 1-click legal immunity.

In 2026, that entire paradigm collapsed.

Following the FTC’s $1M enforcement action against deceptive overlay claims, ongoing European Accessibility Act (EAA) enforcement across the EU, and data revealing that over 28% of all digital ADA federal lawsuits targeted websites with an active overlay installed, frontend engineering is finally confronting reality:

You cannot patch a fundamentally broken DOM tree from the client side after page load.

According to the annual WebAIM Million audit, over 95% of top homepages still fail basic WCAG criteria, while e-commerce studies (such as the Click-Away Pound) demonstrate that 71% of disabled users immediately abandon websites with interaction barriers.

In researching our 2026 State of Accessible Market Growth report, we investigated why traditional tooling failed—and how we architected an in-memory <12kb circular ring buffer to replace heavy, privacy-invasive session recorders.

1. The "40/60 Split": Why Static Linters Only Scratch the Surface

Static DOM linters and Abstract Syntax Tree (AST) analyzers like axe-core, eslint-plugin-jsx-a11y, and Lighthouse are essential baselines. However, research from Deque and accessibility auditors establishes that automated static testing catches only ~30% to 40% of WCAG barriers.

Static linters are strictly syntactic:

Missing alt attributes on static <img> elements
Hex color contrast ratios falling below 4.5:1
<input> fields without associated <label> elements or id attributes
Duplicate HTML id attributes in static templates

The remaining 60% of failures are entirely experiential. They cannot be computed from static markup alone because they manifest exclusively during stateful user interaction:

The Real-World Culprits

Dynamic Focus Traps: In our lab simulations across modern SPA modals and slide-out sheets, over 70% failed to trap keyboard focus. A user presses Tab, cycles past the modal's primary action, and suddenly begins focusing invisible links in the obscured background DOM.
Motor Precision Failures: Action buttons that appear fine on desktop often render with physical touch targets smaller than 44×44px on mobile, triggering severe misclick spikes under simulated hand tremor physics.
Screen Reader Announcement Silence: When an async form fails validation via client-side fetch, the UI updates with visual red text, but without an aria-live="polite" or role="alert" region, non-visual users hear total silence and are stranded on failed submissions.

// ❌ axe-core passes this because all attributes are syntactically valid!
// But experientially, it is completely broken:
export function BrokenModal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  // 1. Focus is not moved into the modal on mount.
  // 2. Tab key leaks into background elements.
  // 3. Pressing 'Escape' does nothing.
  // 4. Closing the modal dumps focus to document.body instead of the trigger node.
  return (
    <div className="fixed inset-0 bg-black/50">
      <div className="bg-white p-6 rounded-lg">
        {children}
        <div onClick={onClose} className="cursor-pointer text-blue-500">
          Close
        </div>
      </div>
    </div>
  );
}

Static linters are blind to interactive state transitions. Runtime overlays execute too late. The solution requires shift-left pre-commit checks coupled with real interaction telemetry.

2. The Dual-Engine: Why Accessibility Tree = AI Agent Tree

One unexpected finding from modern web migrations is that remediating source code to WCAG 2.1 AA standards consistently produces double-digit lifts in organic SEO visibility and AI Answer Engine citations (Perplexity, SearchGPT, Claude, Gemini).

Why? Because human assistive technology and autonomous LLM browsing agents navigate web applications using the exact same underlying data structure: the browser's Accessibility Tree.

[ Assistive Tech (Screen Readers) ]     [ Autonomous LLM Agents (WebMCP / Tools) ]
               ▲                                              ▲
               │                                              │
               └──────────────[ Semantic DOM ]────────────────┘
                                      │
                     • Explicit Landmark Roles (<nav>, <main>)
                     • Deterministic Heading Depth (H1 ➔ H2 ➔ H3)
                     • Accessible Interactive Nodes (<button>, <a>)
                     • Native Form Association & Live Regions

When an engineering team replaces a custom <div onClick> with a semantic <button type="submit"> and establishes clear landmark hierarchy (<main>, <header aria-label="Primary">):

Screen readers accurately announce the control's role, state, and accessible name to human users.
Headless LLM crawlers immediately resolve entity relationships without costly token-heavy visual OCR or coordinate guessing. Information gain increases, layout noise drops, and the application becomes natively navigable for agentic protocols like WebMCP (window.navigator.modelContext).

Clean, semantic markup isn't just compliance—it is foundational search and AI infrastructure.

3. Inverting Session Replay: The <12KB Zero-PII Ring Buffer

To measure experiential friction in production without compromising user privacy or adding CPU drag, we had to reject traditional session replay tools (FullStory, LogRocket, Hotjar).

The Problem with Traditional Telemetry

Bandwidth & CPU Drag: Continuously streaming 100% of DOM mutations to cloud storage burns mobile battery and bloats client memory.
Privacy Liabilities: Even with regex masking, streaming raw DOM trees during financial checkout or healthcare onboarding creates immense GDPR, HIPAA, and CCPA exposure.
Low Signal-to-Noise Ratio: Product teams sit on 10,000 hours of video recordings, 99.8% of which show completely frictionless sessions that no developer ever watches.

The Waypoint Architecture

Instead of streaming everything to the cloud, we inverted the pipeline using an in-memory circular ring buffer:

[ User Browses Page ] ──▶ [ In-Memory Circular Ring Buffer (<12KB) ]
                                    │
                                    │ Keeps rolling 60-second window
                                    │ Oldest DOM events silently overwritten
                                    │
         ┌──────────────────────────┴──────────────────────────┐
         ▼                                                     ▼
[ Smooth Navigation ]                                [ Barrier Trigger Fires ]
Buffer silently prunes.                              • 4+ Tab Navigation Cycle
Zero network packets sent.                           • Rage clicks on non-interactive <div>
Zero cloud storage cost.                             • Unannounced Async Error
                                                               │
                                                               ▼
                                               [ Client-Side Zero-PII Scrubber ]
                                               Strips all text nodes & input values
                                                               │
                                                               ▼
                                               [ Dispatches 60s DOM Skeleton ]
                                               Generates actionable TSX PR fix

How the Buffer Works in Practice

Here is a simplified architectural view of how the in-memory circular buffer is implemented:

interface InteractionEvent {
  timestamp: number;
  type: 'keydown' | 'click' | 'focusin' | 'error';
  targetSelector: string;
  role?: string;
}

export class EphemeralSessionBuffer {
  private readonly maxWindowMs = 60_000; // 60-second sliding window
  private readonly maxEvents = 150;      // Hard memory limit (<12kb footprint)
  private events: InteractionEvent[] = [];

  public record(event: Omit<InteractionEvent, 'timestamp'>): void {
    const now = Date.now();
    this.events.push({ ...event, timestamp: now });

    // Prune events outside the 60s window or exceeding memory cap
    this.prune(now);

    // Evaluate purely experiential friction triggers in real-time
    this.detectFriction();
  }

  private prune(now: number): void {
    const cutoff = now - this.maxWindowMs;
    this.events = this.events
      .filter(e => e.timestamp >= cutoff)
      .slice(-this.maxEvents);
  }

  private detectFriction(): void {
    // 1. Detect Keyboard Focus Traps (e.g., 4+ consecutive tabs cycling same container)
    const recentTabs = this.events.slice(-6).filter(e => e.type === 'keydown');
    if (this.isFocusLooping(recentTabs)) {
      this.triggerSnapshot('FOCUS_TRAP_DETECTED');
      return;
    }

    // 2. Detect Rage Clicks on Dead/Non-interactive Markup
    const recentClicks = this.events.slice(-4).filter(e => e.type === 'click');
    if (this.isRageClickOnDeadElement(recentClicks)) {
      this.triggerSnapshot('DEAD_CLICK_BARRIER');
      return;
    }
  }

  private triggerSnapshot(reason: string): void {
    // Zero-PII sanitization runs entirely on the client before network dispatch:
    // Strips all innerText, values, email regex patterns, and personal data.
    const structuralSkeleton = this.captureSanitizedDomSkeleton();

    // Dispatches only the micro-snapshot of the failure
    navigator.sendBeacon('/api/telemetry/friction', JSON.stringify({
      reason,
      skeleton: structuralSkeleton,
      events: this.events
    }));
  }
}

The Benefits:

Zero Server Load for Happy Paths: If the user experiences no barriers, zero bytes are sent over the network.
Guaranteed Zero-PII: The DOM tree is reduced strictly to a structural skeleton (tag names, ARIA attributes, layout bounding boxes) before it leaves the client. No form inputs, credit card fields, or user text ever touch a network packet.
Deterministic Signal: When an alert fires in your dashboard, it isn't an obscure WCAG warning—it's a verifiable reproduction script showing the exact interaction loop that locked out a user.

4. Shift Left: Catching the 40% in Pre-Commit in <250ms

While experiential telemetry monitors runtime friction, the baseline syntactic 40% should never reach a pull request in the first place.

We packaged our AST pre-commit validation engine into an open-source CLI that runs inside Husky or Git hooks in under 250 milliseconds:

npx @waypointstudio/shield-hook init

This installs a zero-dependency Git hook that scans your staged JSX/TSX/HTML components, blocks missing ARIA labels and empty buttons, and stops non-semantic markup from ever polluting your main branch.

Conclusion & Full Report

Accessibility is not a defensive compliance burden or an overlay widget you buy to ward off legal threats.

When you shift accessibility left into developer terminals and measure real experiential friction through lightweight, privacy-preserving telemetry, you convert accessibility from a legal chore into a durable engine for user retention, clean code, and AI search performance.

👉 Read the complete benchmark data, case studies, and architecture deep-dive in our full report:

The 2026 State of Accessible Market Growth

What does your team's accessibility workflow look like today? Are you relying on static linters, periodic audits, or runtime telemetry? Let's discuss in the comments below!

DEV Community: joshua brightwell