Accessibility Reporter for Umbraco helps you to make your website accessible.
$ dotnet add package Umbraco.Community.AccessibilityReporter
Accessibility Reporter for Umbraco is a content app and dashboard that helps you test the accessibility of your website against common accessibility standards, including the Web Content Accessibility Guidelines (WCAG), Section 508 and best practices, directly in Umbraco.
You want to help make your Umbraco website more accessible by testing it against WCAG success criteria.
It runs an accessibility audit against the current published version of the page that you are editing and displays a report in a tab called 'Accessibility'. The tests are run in an iframe directly in Umbraco or optionally using an Azure function.
You can install Accessibility Reporter using Nuget https://www.nuget.org/packages/Umbraco.Community.AccessibilityReporter. Once installed when you build your project the files needed for Accessibility Reporter will be copied into your App_Plugins folder. That's it!
You can run Accessibility Reporter without adding any configuration options, as it has some sensible defaults. However, you can configure how it runs by adding an AccessibilityReporter section to your appsettings.json file.
https://github.com/mattbegent/azure-function-accessibility-reporter and deploying it to Azure.wcag2a only. A full list of supported tags can be found in the axe-core documentation. If not set Accessibility Reporter defaults to WCAG A and AA tests."AccessibilityReporter": {
"ApiUrl": "https://api.example.com/api/audit",
"TestBaseUrl": "https://example.com",
"TestsToRun": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22aa"
],
"UserGroups": [
"admin",
"editor",
"writer"
],
"ExcludedDocTypes": [
"excludedPage"
],
"RunTestsAutomatically": false,
"MaxPages": 20
}
All options are completely optional and if you don't set them, they default to the following:
"AccessibilityReporter": {
"ApiUrl": "",
"TestBaseUrl": "",
"TestsToRun": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22aa",
"best-practice"
],
"UserGroups": [
"admin",
"administrators",
"editor",
"editors",
"writer",
"writers",
"translator",
"translators",
"sensitiveData",
"sensitive data"
],
"RunTestsAutomatically": true,
"IncludeIfNoTemplate": false,
"MaxPages": 50
}
If you use Umbraco in a headless way and you do not have a way of previewing the published page within Umbraco, you will have to setup an azure function in order to get Accessibility Reporter working. This is due to cross domain security restrictions within iframes.
To do this deploying the following azure function https://github.com/mattbegent/azure-function-accessibility-reporter and update your websites appsettings.json file. Here is an example:
"AccessibilityReporter": {
"ApiUrl": "https://api.example.com/api/audit/", // your azure function
"TestBaseUrl": "https://www.example.com", // base url of your website
"RunTestsAutomatically": false, // as running in a function costs a small amount you might not to run automatically
"IncludeIfNoTemplate": true // headless content probably doesn't have a template
}
It's worth noting that if you are using Accessibility Reporter in this way the tests will take much longer than if you run Umbraco in a non headless way.
The accessibility report runs on the current published page URL you are editing.
Automated accessibility testing is no substitute for manual testing and testing using real users. In a UK government blog article they created a test page with 143 accessibility issues on it and the best automated tool only discovered 37% of the issues. However, automated accessibility testing does help to find common issues and technical failures.
Copyright © Matt Begent.
All source code is licensed under the Mozilla Public License.
axe-core is licensed under the Mozilla Public License 2.0.
Chart.js is licensed under the MIT License.
SheetJS Community Edition is licensed under the Apache 2.0.
patternomaly is licensed under the MIT License.