Accessibility Testing using Axe

© RapidValue Solutions 2
How to Achieve Accessibility Testing using Axe
You can achieve Accessibility Testing with the help of the following methods/approaches, using
Accessibility Testing engine Axe,
 Axe Browser Extension
 Axe Command Line
 Axe Core Library
Axe Browser Extension
This approach is a pretty straight-forward to perform the Accessibility Testing. Using the Axe browser
extension, you can directly analyse and see the violation details per web page. The Axe browser extension is
available for Google Chrome, Firefox and Edge browser. Following are the direct links to get the browser
extension based on your browser type,
 Google Chrome: https://chrome.google.com/webstore/detail/axe-web-accessibility-
tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US
 Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
 Edge: https://microsoftedge.microsoft.com/addons/detail/axe-web-accessibility-
t/kcenlimkmjjkdfcaleembgmldmnnlfkn
Here, the Accessibility Testing approach using Firefox browser has been shared for you. When you load the
above Axe browser extension in Firefox, you will get a page like this below,

You can add this extension and restart Firefox browser. In the next step, you can load the website that you
need to perform the Accessibility Testing and open the developer tool in the browser (press F12). Go to the
Axe tab and you can see below screen,
Click on the ANALYZE button to begin the test. After few seconds, you will get the result that includes
violation details, issue description, issue information, issue tags. You need to manually go through each and
every violation and share the details with development team to improve the accessibility of your website.

Axe Command Line
Axe Command Line approach is another way to test the accessibility and identify the violations. This can be
achieved with support of NodeJS and node package manager (npm). You must install NodeJS in your
system prior to start this way of accessibility testing. Once NodeJS is installed, one can install Axe-core by
the following command:
npm install axe-cli –g
This installs Axe globally and can be accessed from any folder in the file system. Once installed, to test your
web page, use the following command,
Axe web-page-url --timeout=120 --save results.json --tags wcag2a
The above command will test the page at the specific URL and save the results in a file called results.json.
The value of the time out can be changed. The tags option specifies the rules to be run. There are several
tags supported out of the box by Axe framework. For the above example, you are running the WCAG2.0
rules at level A. You can use the same website that used during Axe browser extension and see the output.
Axe www.rapidvaluesolutions.com --timeout=120 --save results.json --tags wcag2a

A detailed report is saved in file results.json (available in your system user folder). Open this file in a JSON
editor. Drill down to the violations attribute. The details of the Accessibility violations along with
suggestions for fixes will be seen.

Axe Core Library
This is one of the advanced approaches to perform the accessibility testing and identify the violations. In this
approach, you can use Axe core library and automate the accessibility testing in between your functional
regression automation. In the approach, you are using the Selenium dependency of com.deque.html.axe-
core, and analyse method of AxeBuilder class. Once you create Accessibility Testing suite, you can
configure in CI/CD pipelines for continuous testing.
Pre-requisites:
Following are the prerequisites to start Accessibility Testing,
 Install Java SDK 8 and above.
 Install Eclipse or IntelliJ IDEA IDEs.
 Following maven dependencies:
o testng
o selenium-java
o selenium-server
o selenium from the group com.deque.html.axe-core
o jackson-databind
o jackson-dataformat-csv
o poi-ooxml-schemas
o poi-ooxml
o poi

Step-by-step Approach:
Step 1: Create a maven project and add the above dependencies in pom.xml of the project.
Step 2: Create a Java class AccessibilityTestHelper to keep the logic to track violations. Implement
following methods:
 trackViolations – This is a public method that can be used in your test classes to track
the violations. In this method, you use analyze method of AxeBuilder class to identify
the violations. After that, create an excel file if not exist with help of createExcelFile
method. Once the file gets created, writing the violation details (violation id, description,
impact, help, help URL, and WCAG tags) into the file using writeToExcel method. Also,
there is logic to track violations in JSON and text files. The actual implementations are
below:
/**
* Method to track the violations using AxeBuilder support
*
* @author sanojs
* @param driver
* @param pageName
*/
public void trackViolations(WebDriver driver, String pageName) {
Results violationResults;
try {
violationResults = new AxeBuilder().analyze(driver);
if (!new File(System.getProperty("user.dir") +
"Results").exists()) {
(new File(System.getProperty("user.dir") +
"Results")).mkdir();
}
int j = 2;
String filePath = System.getProperty("user.dir") +
"ResultsAccessibilityTestReport.xlsx";
createExcelFile(filePath);
for (int i = 0; i < violationResults.getViolations().size();
i++) {
writeToExcel(filePath, pageName, 1, j,
violationResults.getViolations().get(i).getId());
violationResults.getViolations().get(i).getDescription());
violationResults.getViolations().get(i).getImpact());
violationResults.getViolations().get(i).getHelp());
violationResults.getViolations().get(i).getHelpUrl());
violationResults.getViolations().get(i).getTags().toString());
j++;
}
AxeReporter.writeResultsToJsonFile(
System.getProperty("user.dir") + "Results" +
pageName + "_" + getCurrentDateAndTime(),
violationResults);

AxeReporter.writeResultsToTextFile(
System.getProperty("user.dir") + "Results" +
pageName + "_" + getCurrentDateAndTime(),
violationResults.getViolations());
} catch (Exception e) {
e.printStackTrace();
}
}
 createExcelFile – this is a private method that helps to create an excel file if not exists.
The file will be created at the project level. The actual implementations are below:
/**
* Method to create a new excel file
*
* @author sanojs
* @param filePath
* @return
*/
private XSSFWorkbook createExcelFile(String filePath) {
XSSFWorkbook workbook = null;
try {
File fileName;
FileOutputStream fos = null;
File file = new File(filePath);
if (!file.exists()) {
fileName = new File(filePath);
fos = new FileOutputStream(fileName);
workbook = new XSSFWorkbook();
workbook.createSheet("Instructions");
XSSFSheet sheet = workbook.getSheetAt(0);
Row header = sheet.createRow(0);
header.createCell(0).setCellValue("Accessibility
Testing Report");
XSSFCellStyle style = workbook.createCellStyle();
style.setBorderTop((short) 6);
style.setBorderBottom((short) 2);
style.setBorderRight((short) 2);
XSSFFont font = workbook.createFont();
font.setFontHeightInPoints((short) 15);
font.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
style.setFont(font);
header.getCell(0).setCellStyle(style);
Row row = sheet.getRow(0);
sheet.autoSizeColumn(0);
sheet.autoSizeColumn(1);
row = sheet.getRow(1);
if (row == null)
row = sheet.createRow(1);
Cell cell = row.getCell(0);
if (cell == null)
cell = row.createCell(0);
cell.setCellValue("Please go through following tabs to
know the violations");
workbook.write(fos);
fos.flush();

fos.close();
workbook.close();
}
}
return workbook;
}
 writeToExcel – this is a private method that helps to write the violations into the created
excel file. The actual implementations are below:
/**
* Method to write the violations in a excel report
*
* @author sanojs
* @param sheetName
* @param columnIndex
* @param rowNum
* @param data
* @return
*/
private boolean writeToExcel(String filePath, String sheetName, int
columnIndex, int rowNum, String data) {
InputStream in = null;
XSSFWorkbook wb = null;
Sheet newSheet = null;
FileOutputStream fileOutStream = null;
try {
if (filePath == null || filePath.trim().equals(""))
throw (new Exception());
if (filePath.endsWith(".xlsx") || filePath.endsWith(".xls")) {
in = new FileInputStream(filePath);
wb = new XSSFWorkbook(in);
} else {
}
if (rowNum <= 0)
try {
newSheet = wb.getSheet(sheetName);
if (newSheet != null) {
throw new Exception("Sheet Already exist...");
}
newSheet = wb.createSheet(sheetName);
}
int index = wb.getSheetIndex(newSheet);
if (index == -1)
XSSFCellStyle style = wb.createCellStyle();
style.setBorderTop((short) 6);
style.setBorderBottom((short) 1);
XSSFFont font = wb.createFont();
font.setFontHeightInPoints((short) 15);
font.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
style.setFont(font);
XSSFSheet sheet = wb.getSheetAt(index);

Row header = sheet.createRow(0);
header.createCell(0).setCellValue("Violation ID");
header.createCell(1).setCellValue("Violation Description");
header.createCell(2).setCellValue("Violation Impact");
header.createCell(3).setCellValue("Violation Help");
header.createCell(4).setCellValue("Violation Help URL");
header.createCell(5).setCellValue("Violation Issue Tags");
for (int j = 0; j <= 5; j++)
header.getCell(j).setCellStyle(style);
Row row = sheet.getRow(0);
if (columnIndex < 1)
sheet.autoSizeColumn(columnIndex - 1);
row = sheet.getRow(rowNum - 1);
if (row == null)
row = sheet.createRow(rowNum - 1);
Cell cell = row.getCell(columnIndex - 1);
if (cell == null)
cell = row.createCell(columnIndex - 1);
cell.setCellValue(data);
XSSFFormulaEvaluator.evaluateAllFormulaCells(wb);
fileOutStream = new FileOutputStream(filePath);
wb.write(fileOutStream);
return false;
} finally {
try {
wb.close();
fileOutStream.close();
in.close();
}
}
return true;
}
 getCurrentDateAndTime – This is a private method that helps to generate current
timestamp that used suffix to the JSON and text files. The actual implementations are
below:
/**
* Method to get the current date and time
*
* @author sanojs
* @return
*/
private String getCurrentDateAndTime() {
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
DateFormat timeFormat = new SimpleDateFormat("HH-mm-ss");
Date date = new Date();
String currdate = dateFormat.format(date);
String currtime = timeFormat.format(date);
return currdate + "_" + currtime;
}

Step 3: Create a TestNG class SampleAccessibilityTest with logic to start the driver session and
create a test case, let’s say accessibilityTesting. In the test case, you just need to load the browser
that you need to perform the Accessibility Testing and after that call the method trackViolations.
The actual implementations are below:
@BeforeClass
public void setUp() throws InterruptedException {
try {
ChromeDriverService chromeservices = new ChromeDriverService.Builder()
.usingDriverExecutable(new File("path to your driver
executable")).usingAnyFreePort().build();
driver = new ChromeDriver(chromeservices);
} catch (WebDriverException e) {
}
}
@Test
public void accessibilityTesting() {
try {
driver.get("https://www.rapidvaluesolutions.com/");
new AccessibilityTestHelper().trackViolations(driver, "Home Page");
}
}
Step 4: Execute above test case and see the reports in the format of excel, JSON and text files. These
reports will be generated in Results folder of the project structure. Based on the above
trackViolations method, a sheet Home Page will be created in the excel report to track all the
violations. If you are using trackViolations method for different pages of your web application, it
will create new sheets to track the violations of your different pages. Below is the project structure:

Conclusion
Accessibility Testing is one of the important types of testing that add value to your business and deliver
user friendly applications. Axe Core is a very powerful framework that can help the team to build web
products that are inclusive.
In this article, different ways to test the Accessibility and the automation part have been discussed in full
length. Hope this throws some light on the concept of testing the Accessibility and the implementations.
Please try to utilize this while carrying out and utilizing Accessibility Testing.
By,
Sanoj S
Test Architect

About RapidValue
RapidValue is a global leader in digital product engineering solutions including mobility, omni-channel, IoT, AI, RPA
and cloud to enterprises worldwide. RapidValue offers its digital services to the world’s top brands, Fortune 1000
companies and innovative emerging start-ups. With offices in the United States, the United Kingdom, Germany and
India and operations spread across the Middle-East, Europe and Canada, RapidValue delivers enterprise services
and solutions across various industry verticals.
Disclaimer: This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No
part of it may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the
intended recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report
is strictly prohibited and may be unlawful.
www.rapidvaluesolutions.com/blog
www.rapidvaluesolutions.com
+1 877.643.1850 contactus@rapidvaluesolutions.com
Disclaimer: This document contains information that
is confidential and proprietary to RapidValue
Solutions Inc. No part of it may be used, circulated,
quoted, or reproduced for distribution outside
RapidValue. If you are not the intended recipient of
this report, you are hereby notified that the use,
circulation, quoting, or reproducing of this report is
strictly prohibited and may be unlawful.

Accessibility Testing using Axe

More Related Content

What's hot

Similar to Accessibility Testing using Axe

More from RapidValue

Recently uploaded

Accessibility Testing using Axe