Dashboard Charts and Metrics Guide

This guide explains how to read and interpret the analyzer's primary metric cards, interactive charts, panels, and drilldown systems. It directly accounts for the updated WCAG Support Coverage panel, strict WCAG-only charting boundaries, friendlier human rule labels, companion modules, and paginated searches.

---

How to read the dashboard overall

The interface is structurally structured to help you diagnose four core aspects of your digital estate's accessibility health:

1. Volume: How much total issue volume currently exists?
2. Concentration: Where physically are those issues clustered?
3. Systemicity: How much of the problem footprint is systemic and reusable?
4. Action: Which specific fixes will eliminate the most errors simultaneously?

The top metric blocks render an immediate snapshot, chart modules illustrate pattern patterns, wide grid panels validate the loaded source files, and interactive drilldowns let you audit the exact code flaws hiding behind a chart bar or data row.

Companion pages around the dashboard

The dashboard functions as the hub of a modular web ecosystem. These integrated companion subpages allow you to jump instantly from aggregate numbers down into direct, visual page-level evidence:

• Website Screenshots: Per-page visual capture tracking the appearance of scanned templates.
• Virtual Screenreader: Simulated screenreader text streams to help evaluate real screen reading hierarchies and programmatic control flows.
• Tab Map: A comprehensive visual gallery tracing keyboard focus coordinates and interactive element paths.
• Contrast Report: Granular contrast engine evaluations rendering raw text/background color pairs flagged as invalid.

💡 Note: These programmatic views do not replace expert manual evaluations, but they make it significantly easier to audit and verify what the high-level dashboard is summarizing.

---

Top metric cards

The top of the workspace groups high-level summaries into functional buckets to limit data overwhelm:

• Violations (Volume): Total processed findings discovered across the active scan run[cite: 9].
• Pages Affected (Spread): Total count of unique, normalized page objects containing at least one issue.
• WCAG Criteria Affected (Compliance): Total count of distinct WCAG success criteria currently triggered.
• Shared Pattern Impact (Systemicity): The exact percentage of total issue volume tied to global components or reusable patterns.
• Opportunity Score (Remediation): Estimated percentage of bugs that can be cleared by resolving your top opportunities.
• Accessibility Debt Index (Burden): A weighted estate friction score combining repetition, page spread, and systemicity metrics.
• Cross-Tool Overlap (Confidence): Categorized counters dividing findings into verified (flagged by multiple engines), likely, and single classes.
• Evidence Confidence (Trust): A high-level metric summarizing the programmatic strength of your automated evidence.
• WCAG Levels (Tiers): Total issue breakdowns sorted by standard regulatory compliance lines: A, AA, and AAA.
• Legacy Frames (Heritage): Tracking frame and iframe elements alongside the specific page templates they impact.
• Shared Source Rate (Architecture): Percentage of findings explicitly stemming from shared design elements or structural styles.
• Top 5 Page Concentration (Hotspots): Total share of issue volume residing within your five most broken page configurations.

---

Main chart and table panels

Tool Agreement Profile

Illustrates how frequently your testing engines agree on issue rows, overlap within the same engine family, or stand completely alone. This functions strictly as a data corroboration tool, not an absolute source of truth.

💡 Reading Rule: Cross-family multi-tool agreements take priority over intrafamily loops[cite: 9]. If sibling engines overlap but a distinct tool family matches them, the item registers under cross-family agreement.

WCAG Support Coverage

A reference matrix tracking the high-level testing breadth of your active scanner configurations. Treat this as a guide to your stack's potential capability, not an ironclad guarantee that a specific run tested every rule.

Top Problem Types

Rolls localized component issues up into wide, highly actionable functional buckets to establish an immediate problem-space footprint:

• Media: Non-text items, missing alt text rules, or faulty decorative element configurations.
• Navigation: Links, menus, aria landmarks, route structures, and wayfinding mechanics[cite: 9].
• Content: Reading clarity, instructions, text naming, and textual alternatives.
• Structure: Header hierarchies, semantic layout tags, document lists, and structural logic.
• Forms: Form inputs, data labels, inline validation states, and helper instructions[cite: 9].
• Interactive: Native controls, custom buttons, focus states, and keyboard management bugs.
• Other: Complex items failing clear classification or containing highly mixed source variables.

Component Heatmap

Pinpoints exactly which inferred user interface components are triggering the highest volume of errors[cite: 9]. Labels are automatically humanized on the charts, while backend lookups maintain raw component keys[cite: 9]. Treat these as intelligent troubleshooting clues rather than a flawless UI directory.

WCAG Rule Breakdown

Renders a refined compliance view displaying only valid WCAG success criteria. Raw developer tool IDs and messy engine debug strings are stripped out.

Issues per Page

Highlights your most heavily broken page URLs so you can instantly separate isolated page-specific bugs from site-wide template errors.

Fix Once, Benefit Many

A prioritized shortlist ranking the exact repeated patterns most worth fixing first. This acts as the most action-focused, execution-ready view on the entire dashboard.

---

Drilldown behavior

Clicking an interactive chart element or priority task row automatically flies out the targeted drilldown workspace for that filtered data subset.

• 🔍 Live Search: Filters matching text strings instantly across the active drilldown row rows.
• 📄 **Workspace Sizing:** Lets you pick 10, 25, 50, or 100 visible items per page.
• 🔀 **Pagination Controls:** Provides clean page indexing to explore deep technical lists without slowing down the application browser.

Standard attributes rendered in this table view include: human rule label, page URL, component group, issue scope tier, matching pattern, tool source, DOM selector track, unique fingerprint, and code message[cite: 9].

---

Interpreting overlap and coverage carefully

• Cross-Family Matching: Multi-tool family overlaps indicate incredibly high consensus and evidence confidence.
• Intrafamily Matching: Single-engine overlaps are highly vulnerable to localized deduplication strictness and DOM selector parsing algorithms.

---

Suggested dashboard reading order

1. Verify the Dataset: Evaluate the Page Inventory Check panel first to guarantee data matching across files.
2. Locate the Footprint: Review **Top Problem Types** and the **Component Heatmap** to see where bugs cluster.
3. Isolate Compliance: Scan the **WCAG Rule Breakdown** to extract numbers for official compliance tracking.
4. Assess Consensus: Check the **Tool Agreement Profile** to evaluate how your active engines match up.
5. Build the Sprint: Launch the **Fix Once, Benefit Many** module to extract your top remediation tasks.
6. Inspect the Code: Click deep into bars or data lines to use paginated drilldowns for technical rows.
7. Audit Visual Evidence: Transition to the integrated companion views to cross-examine metrics against screenshots, focus maps, virtual screenreader data, or raw contrast sheets.