Website Accessibility Testing with Ranorex Webtestit


#1

When writing automated tests for your web application, as a tester, you have to consider every aspect of the website, including accessibility. The internet is an increasingly important resource in many aspects of life such as education, employment, government, commerce, health care, and more. It is essential that the internet be accessible in order to provide equal access and equal opportunity to people with diverse abilities. Taken the amount of information distributed across all types of web sites, web accessibility has become a must, not only from a moral and a technical point of view but also from the political and legal perspective. In many places, creating an online experience that meets WCAG accessibility standards is a legal requirement.

Here you can find out more about the Web Accessibility policies and standards.

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Some of the accessibility guidelines include making your website accessible to users with Vision, Physical, Cognitive, Literacy, and Hearing disability.
Testing a web page in order to ensure that every user can easily access the website taking the above-mentioned conditions into consideration is known as Accessibility Testing. Even if you test and catch some of the accessibility problems of the website manually, every time the page gets updated or redesigned, potential new issues will occur. The benefits of automated accessibility testing with Ranorex Webtestit are that you can find and eliminate issues such as:

  • Improper page structure
  • Missing page titles
  • Unclear text content
  • Non-accessible links
  • Poor readability
  • Images without alternative text
  • Video and audio without captions or transcripts

Axe in one of the most commonly used libraries when it comes to making automated accessibility tests, and creating such kind of test with Ranorex Webtestit using the Axe framework in TypeScript projects goes like this:

TypeScript Projects

1. Installing the dependencies
In order to implement the Axe library, you need to add the "axe-webdriverjs dependency to the package.json file of your project. This file is located in the root folder of your project and can be found in the project tree. Open the file and add the "axe-webdriverjs": "^2.2.0" to your project’s dependencies.

2. Creating the methods
Now we will create the axe.ts helper file, and create the analyzeAccessibility() that basically checks the issues on the web page. and theformatAccessibilityViolations() method makes it easier to confirm if there are any accessibility problems on the web page by formatting and them in the log and the report. The whole helper file containing the methods should look something like this:

import axe from 'axe-webdriverjs';
import { ExtendedWebDriver } from 'webdriver-js-extender';

// Analyze the accesibility issues
export async function analyzeAccessibility(driver: ExtendedWebDriver): Promise<any> {
  return new Promise((resolve) => {
    axe(driver).analyze((results) => resolve(results));
  });
}

// Format the accesibility issues
export async function formatAccessibilityViolations(violations) {
  const messages = violations.map((violation) =>
    `- ${violation.help} (${violation.nodes.length} elements affected)
      Help: ${violation.helpUrl}`,
    );
 return `${violations.length} violations found: ${messages.join()}`;
}

Now you can use these methods in your Page object files, or whenever you need to, simply by calling the analyzeAccessibility() method from the axe helper file, and In our example, we will call this method inside the ItemsOverviewPo file where all the elements that need to be checked are located.

public async getAccessibilityViolations() {
  const results = await analyzeAccessibility(browser.driver);

  return results;
}

3. Executing the test
After you have created a new Test file, instantiate the Page Object file and entered the URL of the web page. Use the .getAccessibilityViolations() method to test for the accessibility issues and assert them by calling the formatAccessibilityViolations() method.

4. Analyzing the report
After you have executed the test, if there are some accessibility issues on the tested web page, the test will fail, and you can see the error description together with the page screenshot in the test report and the log.
In this case, we have discovered three accessibility violations regarding elements color contrast, labels and zooming, and scaling.

Java Projects

  1. Installing the dependencies
    In order to implement the Axe library, you need to add the axe-selenium dependency to the pom.xml file of your project. This file is located in the root folder of your project and can be found in the project tree. Open the file and add the axe-selenium to your project’s dependencies.
    Next, you need to download the axe.min.js and include it in your project, in our example we will place it in the resources/axe folder.

  2. Creating the methods
    Now we will create the AxeHelper.java file, include the downloaded axe-min.js resource file and create the getAccessibilityViolations() method. This method invokes the .analyze() function which basically checks the accessibility issues on the web page. The whole helper file containing the methods should look something like this:

package uitest.helpers;

import java.net.URL;
import com.deque.axe.AXE;
import org.json.JSONObject;
import org.openqa.selenium.WebDriver;

public class AxeHelper {
    private static final URL axeScriptUrl = AxeHelper.class.getResource("/axe/axe.min.js");

    public JSONObject getAccessibilityViolations(WebDriver driver) {
        JSONObject responseJSON = new AXE.Builder(driver, axeScriptUrl).analyze();

        return responseJSON;
    }
}

Now you can use this method in your Page object files, or whenever you need to, simply by calling the getAccessibilityViolations() method from the helper file, and In our example, we will call this method inside the ItemsOverviewPo file where all the elements that need to be checked are located.

public JSONObject checkAccessibility() {
    return new AxeHelper().getAccessibilityViolations(this.driver);
}
  1. Executing the test
    Now that we have our dependencies and helper file in place, instantiate the Page Object file in your test, and call the checkAccessibility() method to analyze the accessibility issues. Create the violations array that can be used to assert the accessibility issues:

  2. Analyzing the report
    After you have executed the test, if there are some accessibility issues on the tested web page, the test will fail, and you can see the error description together with the page screenshot in the test report and the log.
    In this case, we have discovered three accessibility violations regarding elements color contrast, labels and zooming, and scaling.