Features
Start a free trial

Acessibility testing

Automated Accessibility Testing allows you to test if your website follows the Web Content Accessibility Guidelines (WCAG) rules and other guidelines, to ensure your website is accessible to all types of users.

We will be using Axe for this, which offers a framework to test your HTML pages for accessibility issues.

Installation

To get started, download the latest axe.min.js file and save it on the machine where you'll be starting your tests from.

We will inject this script in the next step during our automated tests on TestingBot.

Example

The following example will start a browser in the TestingBot browser grid, navigate to a website and inject the accessibility script into the page.

We will then retrieve the results from the accessibility test from inside our automated test. The results will be saved in a JSON file for inspection.

Copy code
#!/usr/bin/env ruby

require 'rubygems'
require 'selenium-webdriver'

caps = Selenium::WebDriver::Remote::Capabilities.new
caps["browserName"] = "chrome"
caps["version"] = "latest"
caps["platform"] = :WINDOWS
caps["name"] = "Accessibility Test"

client = Selenium::WebDriver::Remote::Http::Default.new
client.timeout = 120

driver = Selenium::WebDriver.for(
	:remote,
	:url => "https://API_KEY:API_SECRET@hub.testingbot.com/wd/hub",
	:desired_capabilities => caps,
	:http_client => client)
driver.navigate.to "https://testingbot.com"
axe_script = open('path/to/axe.min.js', 'r')
driver.execute_script(axe_script.read())
axe_script.close()
result = driver.execute_script('let result; await axe.run().then((r)=> {result=r}); return result;')
file = open("path/to/report.json", "w")
file.write(result)
file.close()
driver.quit
Copy code
import org.openqa.selenium.By;
import org.openqa.selenium.Platform;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import java.io.File;
import java.io.FileWriter;
import java.net.URL;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import java.net.URL;

public class AccessibilityTest {

  public static final String KEY = "KEY";
  public static final String SECRET = "SECRET";
  public static final String URL = "http://" + KEY + ":" + SECRET + "@hub.testingbot.com/wd/hub";

  public static void main(String[] args) throws Exception {

	DesiredCapabilities caps = new DesiredCapabilities();
	caps.setCapability("browserName", "chrome");
	caps.setCapability("version", "latest-1");
	caps.setCapability("platform", "WIN10");
	caps.setCapability("name", "Accessibility Test");

	WebDriver driver = new RemoteWebDriver(new URL(URL), caps);
	driver.get("https://testingbot.com");

	JavascriptExecutor jse = (JavascriptExecutor)driver;
	 Path path = Paths.get("path/to/axe.min.js");

	 String content = new String(Files.readAllBytes(path));
	 jse.executeScript(content);

	 File output = new File("path/to/report.json");
	 FileWriter writer = new FileWriter(output);
	 String result = (String) jse.executeScript("let result; await axe.run().then((r)=> {result=r}); return JSON.stringify(result);");
	 writer.write(result);
	 writer.flush();
	 writer.close();

	driver.quit();
  }
}
Copy code
<?php

    require_once('vendor/autoload.php');
    use Facebook\WebDriver\Remote\RemoteWebDriver;
    use Facebook\WebDriver\WebDriverBy;

    $web_driver = RemoteWebDriver::create(
    "https://api_key:api_secret@hub.testingbot.com/wd/hub",
        array("platform"=>"WIN10", "browserName"=>"chrome", "version" => "latest", "name" => "Accessibility Test"), 120000
    );
    $web_driver->get("https://testingbot.com");
    $axe_script = fopen("path/to/axe.min.js", "r");
    $web_driver->executeScript(fread($axe_script,filesize("path/to/axe.min.js")));
    fclose($axe_script);
    $result = $web_driver->executeScript('let result; await axe.run().then((r)=> {result=r}); return result;');
    $file = fopen("path/to/report.json", "w");
    fwrite($file, json_encode($result, JSON_PRETTY_PRINT));
    fclose($file);
    $web_driver->quit();
?>
Copy code
from selenium import webdriver
desired_cap = {
	'platform': 'WIN10', 
	'browserName': 'chrome', 
	'version': 'latest-1',
	'name': 'Accessibility Testing'
}
driver = webdriver.Remote(
    desired_capabilities=desired_cap,
    command_executor='http://key:secret@hub.testingbot.com/wd/hub',
    )
driver.get("https://testingbot.com")
axe_script = open('path/to/axe.min.js', 'r')
driver.execute_script(axe_script.read())
axe_script.close()
result = driver.execute_script('let result; await axe.run().then((r)=> {result=r}); return result;')
file = open("path/to/report.json", "w")
file.write(str(result))
file.close()
driver.quit()
Copy code
const webdriver = require('selenium-webdriver');
const fs = require('fs')

const testingbotKey = "api_key";
const testingbotSecret = "api_secret";

const capabilities = {
    'browserName': 'firefox',
    'platform': 'WIN10',
    'version': 'latest',
    'client_key': testingbotKey,
    'client_secret': testingbotSecret,
    'name': 'Accessibility Test'
};

async function runAccessibilityTest () {
  let driver = new webdriver.Builder()
    .usingServer('https://' + testingbotKey + ':' + testingbotSecret + '@hub.testingbot.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get("https://testingbot.com");
  const data = await fs.readFileSync('path/to/axe.min.js', 'utf8')
  await driver.executeScript(data.toString());
  let result = await driver.executeScript('let result; await axe.run().then((r)=> {result=r}); return result;');
  await fs.writeFileSync('path/to/report.json', JSON.stringify(result));
  await driver.quit();
}
runAccessibilityTest();
Copy code
using System;
using OpenQA.Selenium;
using OpenQA.Selenium.Remote;

namespace SeleniumTest {
  class Program {
    static readonly string axe = @"/path/to/axe.min.js";
    static readonly string report = @"/path/where/you/want/to/save/report.json";

    static void Main(string[] args) {
      IWebDriver driver;
      DesiredCapabilities capability = DesiredCapabilities.Chrome();
      capability.SetCapability("key", "key");
      capability.SetCapability("secret", "secret");
      capability.SetCapability("version", "latest-1");
      driver = new RemoteWebDriver(
        new Uri("https://hub.testingbot.com/wd/hub/"), capability
      );
      driver.Navigate().GoToUrl("https://testingbot.com");
      if (File.Exists(axe)) {
        string axeCode = File.ReadAllText(axe);
        driver.ExecuteScript(axeCode);
        string result = (string)driver.ExecuteScript("let result; await axe.run().then((r)=> {result=r}); return JSON.stringify(result);");
        File.WriteAllText(report, result);
      }

      driver.Quit();
    }
  }
}

You could write assertions to pass/fail your test depending on the accessibility issues found.

Results

After running the example test, you will find a report.json file with the results of the accessibility test.

The file will contain the following structure:

Copy code
{
		testEngine: {…}
		passes: […]
		inapplicable: []
		url: "..."
		timestamp: "time when the result was generated"
		testRunner: {…}
		toolOptions: {…}
		testEnvironment: {…}
		violations: {…}
		incomplete: {…}
}
  • violations includes the rules that were violated and need to be fixed.
  • passes the rules that have passed successfully.
  • incomplete incomplete results, either due to an error or aborted test
  • inapplicable no matching content was found for these rules.

You can find more documentation about Axe on the Axe Documentation.

Other Frameworks

Below is a list of frameworks that offer accessibility testing and are able to run on TestingBot: