Measuring Page Accessibility

Accessibility is an important issue, and with increasing demand to support applications that are fully accessible, LukeBrowser now also supports the generation of accessibility scores and reports. This allows developers to test their applications for accessibility before they are audited or are released.

Copy link to this section

Obtaining accessibility scores

LukeBrowser currently supports generating an accessibility score through LukeBrowser#accessibilityScore, which utilizes axeDevTools behind the scenes to create a list of audit fails. LukeBrowser then takes those audit fails, and based on the scoring system of Lighthouse v7, LukeBrowser returns back a score between 0-100. LukeBrowser also supports asserting a score threshold through LukeAsyncQueueNode#assertAccessibility.

Below is an example of what a user might write in their tests to make sure their pages are accessible. In this scenario, the user wants to make sure their application scores above 80.

// Open the application page
luke.goto('http://my-application-page.com');

// Call the accessibility score function and assert that the result be above 80
luke.accessibilityScore().assertAccessibility(80);

Assuming you are using Jango, to actually view your score rather than just asserting a threshold, you can do this:

// Open the application page
luke.goto('http://my-application-page.com');

// Call the accessibility score function and inspect the result
luke.accessibilityScore().inspectResult();

This will allow you to view your result in your web console.

Copy link to this section

Obtaining accessibility reports

While it's helpful to know the accessibility score of your application, it's even better to know how to improve the accessibility of your page. The way LukeBrowser allows users to know what to do to improve their page is through accessibility reports, generated through LukeBrowser#reportAccessibility. LukeBrowser utilizes a third-party npm package called axe-html-reporter to turn the accessibility audit fails into a HTML report.

These reports allow you to see what accessibility audit fails your page commits, what Axe rule ID it corresponds with, and what the impact level is. You can also see what Accessibility Standard the audit fail falls under. The report will also let you know the source of the audit fail on your page, the actions you need to take to fix them, and a link to learn more about the audit fail itself. Overall, the report should have all the information you need to make your application meet accessibility standards.

How does a user actually generate the report then? An example might be:

// Open the application page
luke.goto('http://my-application-page.com');

// Generate the accessibility report
luke.reportAccessibility();

The report is generated and downloaded to the path specified at LukeCoreConfig#reportPath. Running the function on Luke Playground will also open a new tab with the HTML contents of the report. Please make sure to enable pop-ups on your Chrome instance for the Luke Playground page, otherwise the report will be blocked from showing up in your new tab. An alternative is to just find the file directly under the path specified by LukeCoreConfig#reportPath.

An additional feature LukeBrowser includes is the automatic generation of the report upon assertion failure. If the accessibility test assertion fails on CI, you can find the report within the logs collected by Jenkins.

Copy link to this section

Template for accessibility tests

If you are looking for a template regarding browser accessibility tests, you may find this useful:

var filename = 'test_accessibility';

LukeBrowser.runJasmine(filename, function (suiteName) {
  describe(suiteName, function () {
    beforeAll(function () {
      // Setup Luke
      this.client = LukeBrowser.init();

      // Open the application
      this.client.goto('http://my-application-page.com');
    });


    describe('do some stuff', function () {
      // Do normal testing proceduress here, such as navigation or other assertions
      ...
    });

    describe('measure page accessibility score', function () {
      // Now actually generate the accessibility score for the current state of the page
      it('should have accessibility score within threshold', function () {
        this.client.accessibilityScore().assertAccessibility(50);
      });
    });

    describe('generate accessibility report', function () {
      // Generates the accessibility report for the current state of the page
      it('should generate our accessibility report', function () {
        this.client.reportAccessibility();
      });
    });
  });
});