Accessibility testing using axe

Run Accessibility tests on your website using BrowserStack Automate and axe library

This document provides you with the step by step process to verify if your website follows the WCAG and other guidelines (as supported by axe-core library), ensuring your website is accessible to all types of users on the Internet. Axe is a fast and light-weight accessibility testing tool that checks the entire document against rules and generates a report with all violations, passes etc.

Accessibility testing on BrowserStack using axe-core library

Pre-requisites

Download the axe.min.js file from here and save it in your local system. It will be used in the test script shown below.

Run your first Accessibility test on Automate

The following script opens the file that you downloaded in the pre-requisite step and injects the axe.min.js script in the DOM of the website under test. Thereafter, using a Javascript Executor, the accessibility checks are invoked using axe. The generated report is then saved in a JSON file as per the PATH provided by you in the script.

Note: You can also write assertions in your script based on the violations in the report.json and mark your test passed or failed based on that.
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
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;

public class accessibilityTest{
	public static final String AUTOMATE_USERNAME = "YOUR_USERNAME";
	public static final String AUTOMATE_ACCESS_KEY = "YOUR_ACCESS_KEY";
	public static final String URL = "https://" + AUTOMATE_USERNAME + ":" + AUTOMATE_ACCESS_KEY + "@hub-cloud.browserstack.com/wd/hub";
	public static void main(String[] args) throws Exception {
		 DesiredCapabilities caps = new DesiredCapabilities();
		 caps.setCapability("os_version", "10");
		 caps.setCapability("browser", "chrome");
		 caps.setCapability("browser_version", "latest");
		 caps.setCapability("os", "Windows");
		 caps.setCapability("name", "Accessibility Test - Google"); // test name
		 caps.setCapability("build", "Java Accessibility Test Sample Build"); // CI/CD job or build name
		 WebDriver driver = new RemoteWebDriver(new URL(URL), caps);
		 driver.get("https://www.google.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();
	}
}
const webdriver = require('selenium-webdriver');
const fs = require('fs')

// Input capabilities
const capabilities = {
  'browserName': 'chrome',
  'browserVersion': 'latest',
  'os': 'windows',
  'os_version': '10',
  'build': 'Accessibility Test Sample Build',
  'name': 'Accessibility test - Google'
}
async function runAccessibilityTest () {
  let driver = new webdriver.Builder()
    .usingServer('http://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get("http://www.google.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();
using System;
using System.IO;
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)
        {
            RemoteWebDriver driver;
            OpenQA.Selenium.Chrome.ChromeOptions capability = new OpenQA.Selenium.Chrome.ChromeOptions();
            capability.AddAdditionalCapability("os_version", "10", true);
            capability.AddAdditionalCapability("browser", "Chrome", true);
            capability.AddAdditionalCapability("browser_version", "latest", true);
            capability.AddAdditionalCapability("os", "Windows", true);
            capability.AddAdditionalCapability("name", "Accessibility Test - Google", true); // test name
            capability.AddAdditionalCapability("build", "C-sharp Accessibility Test Sample Build", true); // CI/CD job or build name
            capability.AddAdditionalCapability("browserstack.user", "YOUR_USERNAME", true);
            capability.AddAdditionalCapability("browserstack.key", "YOUR_ACCESS_KEY", true);
            driver = new RemoteWebDriver(
                new Uri("https://hub-cloud.browserstack.com/wd/hub/"), capability
                );
            driver.Navigate().GoToUrl("https://www.google.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();
        }
    }
}
<?php
  require_once('vendor/autoload.php');
  use Facebook\WebDriver\Remote\RemoteWebDriver;
  use Facebook\WebDriver\WebDriverBy;
  $caps = array(
    "os_version" => "10",
    "browser" => "Chrome",
    "browser_version" => "latest",
    "os" => "Windows",
    "name" => "Accessibility testing", // test name
    "build" => "Accessibility Testing Sample Build" // CI/CD job or build name
  );
  $web_driver = RemoteWebDriver::create(
    "https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub",
    $caps
  );
  $web_driver->get("https://www.google.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");
  // $reportJSON = json_encode($result);
  fwrite($file,json_encode($result, JSON_PRETTY_PRINT));
  fclose($file);
  $web_driver->quit();
?>
from selenium import webdriver
desired_cap = {
        "browser": "chrome",
        "browser_version": "latest",
        "os": "windows",
        "os_version": "10",
        'build': 'Python Accessibility Test Build',
        'name': 'Axe-core testing microsoft'
        }
driver = webdriver.Remote(
    desired_capabilities=desired_cap,
    command_executor='https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub'
    )
driver.get("https://www.microsoft.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()
require	'rubygems'
require	'selenium-webdriver'

#Input Capabilities
caps = Selenium::WebDriver::Remote::Capabilities.new
caps["os"] = "Windows"
caps["os_version"] = "10"
caps["browser"] = "chrome"
caps["browser_version"] = "latest"
caps["build"] = "Sample Accessibility Test Build"
caps["name"] = "Accessibility test - Google"
caps["javascriptEnabled"] = "true"

driver = Selenium::WebDriver.for(:remote,
	:url => "http://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub",
	:desired_capabilities => caps)

	# Searching for 'BrowserStack' on google.com
	driver.navigate.to "http://www.google.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

Pre-requisites

You need the JSON module to run and save the report in JSON format. Follow the steps below the install the module if you have not already done so:

Download the JSON module (JSON-4.02.tar.gz or any later version) and run the steps:

$tar xvfz JSON-4.02.tar.gz
$cd JSON-4.02
$perl Makefile.PL
$make
$make install

Now, you can run the perl script given below to run Accessibility tests on BrowserStack:

use Selenium::Remote::Driver;
use JSON;  # Including this requires the pre-requisite steps
# Input capabilities
my $extraCaps = {
  'browserName'=> 'chrome',
  'browserVersion'=> 'latest',
  'os'=> 'windows',
  'os_version'=>'10',
  'build'=>'Accessibility Test Sample Build',
  'name'=>'Accessibility test - Google'
};
my $login = "YOUR_USERNAME";
my $key = "YOUR_ACCESS_KEY";
my $host = "$login:$key\@hub-cloud.browserstack.com";
my $driver = new Selenium::Remote::Driver('remote_server_addr' => $host,
  'port' => '80', 'extra_capabilities' => $extraCaps);

$driver->get('http://www.google.com');

my $file_content = "";
open(FH, '<', 'path/to/axe.min.js') or die $!;
while(<FH>){
   $file_content = $file_content.$_;
}
close(FH);

$driver->execute_script($file_content);
$json = JSON->new->allow_nonref;
$json = encode_json($driver->execute_script('let result; await axe.run().then((r)=> {result=r}); return result;'));

open my $fh, ">", "path/to/report.json";
print $fh $json;
close $fh;

$driver->quit();

After running the test

On successful execution of the above script, a report.json file will be generated as per the PATH provided by you in the script. The report.json JSON file contains the accessibility test information as shown below:

{
		testEngine: {}
		passes: []
		inapplicable: []
		url: “<URL of the website under test>”
		timestamp: “time when the json result is generated”
		testRunner: {}
		toolOptions: {}
		testEnvironment: {}
		violations: {}
		incomplete: {}
}

Following are few of the information present in the JSON file:

  1. violations (json): These results indicate what elements failed in the rules.
  2. passes (array): These results indicate what elements passed the rules.
  3. incomplete (json): It contains results which were aborted and require further testing. This can happen either because of technical restrictions to what the rule can test or because a javascript error occurred.
  4. inapplicable (array): These results indicate which rules did not run because no matching content was found on the page. For example, with no video, those rules won’t run.

Each object returned in these arrays have some properties, which can be found here

Protip: You can also conduct Accessibility testing of your websites on browsers where High Contrast Mode is enabled, by setting BrowserStack’s custom capability browserstack.high_contrast to true. To know more, click here.

We're sorry to hear that. Please share your feedback so we can do better






Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better






Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to automation expert