Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
118 lines (79 sloc) 5.06 KB

Chrome Extension Examples

These examples show how to run the rulesets using a Chrome Extension.

Prerequisites

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.

Running Rulesets Against a Website

Step 1: View Setup

Open the Google Chrome browser. Navigate to the url you wish to test. For example, go to https://www.google.com.

Step 2: Open the Chrome Developer Console

Follow these steps:

  • Right click, select Inspect.
  • Click on the Console Tab.

Step 3: Invoke the Ruleset Runner

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.

Modifications

Include in Your Project

The Chrome Extension follows the General Steps for Running Rulesets. For each of these steps, we add some additional comments.

Configure Parameters

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.

Run Rulesets

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.

Process Results

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.

Additional Information

Firefox Extension

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": "sizu@ebay.com",
      "strict_min_version": "42.0"
    }
  }

Chrome Extension Development

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

Headings Parser

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".

MIND Patterns

The Ruleset Runner Dialog was created using the MIND Patterns. More specifically, several patterns are used:

You can’t perform that action at this time.