Observable Signals Reference | The Aberio Report

1. Signal Detection

Monitored Signals

Six behavioral signals monitored during 90-second test session:

K (Keyboard Ping-Pong)

Measurement: Tab direction reversals within 5-second windows
Threshold: 3+ reversals

Gk (Keyboard Gravity)

Measurement: Focus duration per element
Threshold: >3 seconds on non-interactive elements

Gp (Pointer Gravity)

Measurement: Hover duration before click
Threshold: >2 seconds with micro-movements

U (Unexpected Context)

Measurement: Focus position delta, URL changes
Threshold: >500px focus jump without user action

N (Navigation)

Measurement: DOM structure for landmarks, headings, skip links
Threshold: Missing semantic navigation elements

V (WCAG Violations)

Measurement: WCAG 2.1/2.2 rule checks via HTML parser
Threshold: Level A/AA violations

2. Validation Engine

Parser

DOMParser with accessibility tree walker
Analyzes full DOM structure
Checks: ARIA validity, form labels, heading hierarchy, alt text, contrast, focus

WCAG Rules

50+ checks including:

1.3.1 Info and Relationships
2.4.1 Bypass Blocks
2.4.6 Headings and Labels
3.2.2 On Input
4.1.2 Name, Role, Value

Violation Format

{
  "ruleId": "wcag-2.4.6",
  "severity": "error",
  "element": "<button>...</button>",
  "xpath": "/html/body/main/div[2]/button",
  "message": "Button missing accessible name",
  "wcagLevel": "A"
}

3. Report Generation

File Structure

Self-contained HTML file (2-5 MB) containing:

Monaco Editor (inline)
Test session data (JSON)
Element tree
WCAG violations
Original page snapshot (base64)

Download

Client-side generation via Blob API
No server upload
Filename: aberio-report-[timestamp].html

4. Access Tree

Structure

Root: <html>
Nested DOM hierarchy
Per-node annotations: signal counts, WCAG issues, confidence score

Node Display

[tag] [id/class]
├─ Signals: K:2 Gk:1 V:3
├─ WCAG: 3 errors
└─ Confidence: 72%

Interaction

Click → highlight in Monaco
Hover → show signal detail
Expand/collapse → navigate tree

5. Monaco Editor

Configuration

Language: HTML
Theme: Pneumatic Dark
Features: syntax highlighting, line numbers, find/replace, code folding

Highlighting

Click tree node → scroll to line, highlight with yellow background

Editing

Direct HTML modification
Manual version save
Storage: IndexedDB (local)

6. Fix Generation

Rules

27 fix templates for common patterns:

Example:

Missing alt → <img src="x" alt="description">
Missing button label → <button aria-label="text">
Missing form label → <label for="id">Text</label><input id="id">

Process

Parse violations
Match to template
Generate suggestion
Display in panel
User applies or ignores

7. Diff Tracking

Calculation

Original HTML stored in memory
Current HTML compared on change
Line-by-line + character-level deltas
XPath tracking for element identity

Format

{
  "changes": [{
    "type": "modify",
    "xpath": "/html/body/main/div[2]/button",
    "before": "<button>...</button>",
    "after": "<button aria-label=\"x\">...</button>",
    "line": 42
  }]
}

Script Export

Generate JavaScript for deployment:

// Aberio Change Script
document.querySelectorAll('button')[1].setAttribute('aria-label', 'Submit');

Outputs

Locked HTML report (full audit trail)
Change script (JavaScript only)
Diff JSON (raw data)

Architecture

Seven components:

1. Signal Detection

6 behavioral signal types

2. WCAG Validation

HTML parser, 50+ rules

3. Report Generation

Standalone HTML

4. Access Tree

DOM visualization

5. Monaco Editor

Code editing

6. Fix Suggestions

27 templates

7. Diff Tracking

Change detection + export

Aberio Technical Specifications