These examples show how to run the rulesets using a Chrome Extension.
We assume the Chrome Extension is installed. Visit the Accessibility Ruleset Runner Chrome Extension in the Chrome Web Store and click "Add to Chrome" to install.
The Chrome Extension can also be manually installed. First, download the Github code. Then, follow the instructions listed in Chrome Extension Development.
Open the Google Chrome browser. Navigate to the url you wish to test. For example, go to https://www.google.com.
Follow these steps:
- Right click, select Inspect.
- Click on the Console Tab.
The following steps are used to run the Rulesets:
- Right click, select "Accessibility", select "Ruleset Runner", select "Add Overlays".
- In the Ruleset Runner Dialog, click Run.
The output should match the Ruleset Runner Output.
The Chrome Extension follows the General Steps for Running Rulesets. For each of these steps, we add some additional comments.
The Ruleset Runner Dialog can be modified to include additional parameters. It includes some default code to highlight the fact that some parameters values might change based on other parameter values. For instance, the report location might automatically be updated based on the Report Title or JIRA Project Name.
Results from the Custom Ruleset and the aXe Ruleset are combined into a single JSON object. Here, the aXe results are filtered in preparation for a POST call. This step can be modified to change how the rulesets are executed.
Some default code is included to highlight various element failures. The default code will add an overlay along with a red outline for elements that are visible. This code can be expanded with additional features. For instance, one might add links to rule descriptions, WCAG 2.0 guidelines or even other reports.
To remove the Accessibility Ruleset Runner overlays, right click, select "Accessibility", select "Ruleset Runner", select "Remove Overlays".
Also, some default code is included to demonstrate how to upload the results to a server via a POST call.
A Firefox Extension can be created by modifying the manifest file. In the manifest file, modify the JSON to add an "applications" object as a sibling to the "background" and "icons" objects. Include an appropriate email address for the Firefox Extension.
,
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "42.0"
}
}
Chrome Extensions may be actively developed and then manually installed by:
- Open the Google Chrome Browser
- Navigate to chrome://extensions
- With Developer mode selected, click Load unpacked
- Navigate to the src folder which should contain the manifest.json file
- Click select folder
When a Chrome Extension is ready to be published:
- Select the content and manifest.json files
- Create a zip file containing these two files (in Windows, right click, Send to, Compressed zipped folder)
- Upload this zip file using the Chrome Web Store Developer Dashboard
The chrome extension also features a Headings Parser to help build consistency in the page layout across multiple webpages. Here are some things to consider requiring for standardization:
- title
- language attribute
- H1
- header
- footer
- Skip to main content anchor
- Additional landmarks and headings
To run the Headings Parser, right click, select "Accessibility", select "Headings Parser", select "Add Overlays".
To remove the Headings Parser overlays, right click, select "Accessibility", select "Headings Parser", select "Remove Overlays".
The Ruleset Runner Dialog was created using the MIND Patterns. More specifically, several patterns are used: