DigitalWonderlab.AccessibilityToolkit 1.10.46

Accessibility Toolkit for Umbraco

An Umbraco backoffice package that adds comprehensive WCAG 2.1 accessibility checking to your content workflow. Combines 37 server-side HTML checks with axe-core powered visual analysis — covering colour contrast, ARIA names, landmark structure, and more. Editors can run checks on individual pages or audit entire site sections, with instant scored reports, scan history, and CSV exports.

Screenshots

Page Scan	Scan History

Scan Report	Site Audit History

Printable Report

Features

Page-Level Checks

• Accessibility tab on every content page in the workspace
• 37 server-side WCAG checks across Level A, AA, and AAA
• Score gauge (0-100) with colour-coded rating
• Issues grouped by Content / Code / Design with impact badges (critical/serious/moderate/minor)
• Expandable detail rows showing element snippets, selectors, and fix recommendations
• axe-core visual checks run automatically — ARIA names, colour contrast, landmark structure, and 30+ additional rules detected against the live rendered DOM
• Element preview snippets generated for visual issues using browser canvas
• Category filtering and impact sorting
• Severity filtering (critical/serious/moderate/minor)
• Score delta indicator compared with previous run
• CSV export for offline review and reporting
• Printable reports with executive summary, category breakdown, and per-issue detail
• Scan history per page showing scores over time

Site Audits

• Site audit tool — pick a content node and scan it plus all descendants in one go
• Summary cards showing pages scanned, average score, and total issues
• Collapsible page list — summary shown up front, per-page details expandable
• Audit history — all past audits stored with full results, re-exportable as CSV at any time
• Delete individual audit records or scan history entries

Dashboard

• Accessibility Toolkit dashboard in the Content section
• Recent Reports — paginated table of all recent page-level scans
• Audit History — table of past site audits with sparkline trend chart, re-export, and delete
• Site Audit form with content node picker and WCAG level selector (visual checks run automatically when enabled)
• FAQ and Help & Services tabs for guidance and expert support
• Settings with visible license status panel, collapsible exclusions, and data management

Visual Checks

• Browser-based analysis powered by axe-core running against the live rendered DOM in a sandboxed iframe
• Detects issues that static HTML analysis cannot: computed colour contrast, missing ARIA names, landmark structure, and more
• 30+ additional rules covering WCAG A, AA, and AAA criteria complementing the 37 server-side checks
• Runs automatically as part of every scan — no separate step or infrastructure required
• Falls back gracefully if axe is unavailable (offline/intranet): colour contrast checks still run via DOM walking
• Element preview snippets are captured inline for visual context in reports
• Site audits use the selected content node picker only (no manual GUID entry)

Compatibility

• Umbraco 17+
• .NET 10.0
• Compatible with Umbraco Cloud, Azure App Service, and all standard hosting environments
• No server-side dependencies — no headless browsers, no server-side binaries, no additional infrastructure required
• Visual checks load axe-core from cdnjs at runtime in the editor's browser; falls back gracefully if unavailable

Installation

Install via NuGet:

dotnet add package DigitalWonderlab.AccessibilityToolkit

Or search for DigitalWonderlab.AccessibilityToolkit in the NuGet Package Manager.

No additional configuration required. The package registers itself automatically via an Umbraco composer and creates its database tables on startup. Install, restart, and start scanning — nothing else to set up.

Usage

Individual Page Check

1. Navigate to any content page in the Umbraco backoffice
2. Click the Accessibility tab in the content workspace
3. Select a WCAG level (A, AA, or AAA)
4. Click Run Check
5. Review the score, impact summary, and issues
6. Click Export CSV to download the report

Site Audit

1. Go to the Content section and open the Accessibility Toolkit dashboard
2. Click Pick Content Node to select a root node
3. Select a WCAG level
4. Click Run Audit
5. Review the summary cards and expand the page list for per-page results
6. Click Export CSV to download the full audit report

Re-Exporting Past Audits and Page Runs

Past audits are stored with their full results. In the Audit History table on the dashboard, click Export on any row to regenerate the CSV.

Page-level run history (in the content workspace Accessibility tab) also includes Export and CSV actions per history row.

WCAG Checks Included (37 checks)

Level A (24 checks)

Level AA (7 checks)

Level AAA (6 checks)

Configuration

No configuration is required. The package works out of the box with all features enabled.

Telemetry

The package collects anonymous usage telemetry to help improve the product. This is opt-out via the Settings tab on the dashboard.

No page URLs, page content, or personally identifiable information is collected. Telemetry events include scan and audit outcomes (scores, durations, pass/fail) with an anonymised site hash.

Audit Exclusions

You can exclude specific document types and individual pages from site audits via the Settings tab on the dashboard. Excluded items are stored in the database and persist across restarts.

How It Works

The tool fetches the published HTML of each page server-side using HttpClient, parses it with HtmlAgilityPack, and runs 37 rule-based checks against the DOM. After the server-side analysis, visual checks run client-side: the page is loaded in a sandboxed iframe in the editor's browser, axe-core is injected to run 30+ additional accessibility rules against the live rendered DOM, and a colour contrast analyser walks the computed styles. Issues from both stages are combined, deduplicated, and scored. Results are stored in the database (dwAccessibilityResults for per-page scans, dwAccessibilityAudits for full site audits) so history and re-exports are always available.

Issues / Suggestions

To report an issue or suggest a feature, please use the GitHub issue tracker: https://github.com/dwlkev/DigitalWonderlab.AccessibilityToolkit/issues