Accessibility Plugin

The plugin provides functionality to perform accessibility validations using HTML Code Sniffer or Axe Core engines.

Installation

  1. Copy the below line to dependencies section of the project build.gradle file

    Please make sure to use the same version for all VIVIDUS dependencies.
    Example 1. build.gradle
    implementation(group: 'org.vividus', name: 'vividus-plugin-accessibility')

  2. If the project was imported to the IDE before adding new dependency, re-generate the configuration files for the used IDE and then refresh the project in the used IDE.

Properties

Property Name Default Description

accessibility.engine

HTML_CS

Engine to use, either HTML_CS or AXE_CORE.

accessibility.report-violations-as-assertions

false

If false the step will report only the number of violations detected during accessibility check.

If true the step will report each violation individually using the following format:

  • [button-name] Ensures buttons have discernible text - AxeCore

  • [WCAG2AAA.Principle3.Guideline3_2.3_2_1.G107] Check that a change of context does not occur when this input field receives focus. - HTML CS

Steps

Validate site accessibility

When I perform accessibility scan:$options

Deprecated syntax (will be removed in VIVIDUS 0.7.0):

Then I test accessibility:$options

The step can be used to test accessibility using the following engines:

Axe Core

Axe Core is a powerful and accurate accessibility toolkit can get you to 80% issue coverage, or more, during development. It supports a wide range of standards such as WCAG 2.0, WCAG 2.1, WCAG 2.2, Section 508, ACT and so on.

Example 2. Configure Axe Core engine
accessibility.engine=AXE_CORE

Accessibility test options:

  • $options - The accessibility validation options. Where:

    • standard - The tag of accessibility standard to check a page against, the list of available tags can be found here. Aside from tags provided by Axe Code, VIVIDUS provides own standards:

      • WCAG2xA - includes wcag2a, wcag21a.

      • WCAG2xAA - includes tags from WCAG2xA and wcag2aa, wcag21aa, wcag22aa.

      • WCAG2xAAA - includes tags from WCAG2xAA and wcag2aaa.

    • elementsToCheck - The comma-separated list of locators of elements to verify.

    • elementsToIgnore - The comma-separated list of locators of elements to ignore.

    • violationsToIgnore - The comma-separated list of violations to ignore.

    • violationsToCheck - The comma-separated list of violations to check.

Example 3. Check page against WCAG 2.2 Level AA
Given I am on page with URL `https://vividus-test-site-a92k.onrender.com/`
When I perform accessibility scan:
|standard|
|WCAG22AA|
Example 4. Check video elements against no-autoplay-audio and video-caption rules
Given I am on page with URL `https://vividus-test-site-a92k.onrender.com/`
When I perform accessibility scan:
|violationsToCheck              |elementsToCheck|
|no-autoplay-audio,video-caption|tagName(video) |

HTML CS

The HTML Code Sniffer supports checks against WCAG2 and Section 508 standards.

Example 5. Configure HTML CS engine
accessibility.engine=HTML_CS

Accessibility test options:

  • $options - The accessibility validation options. Where:

    • standard - The accessibility stanadard to verify against. One of WCAG2A, WCAG2AA, WCAG2AAA, Section 508

    • level - The violation level used to check. One of:

      • ERROR - only errors will be validated,

      • WARNING - error and warning will be validated,

      • NOTICE - all the levels will be valiadted.

    • elementsToCheck - The comma-separated list of locators of elements to verify

    • elementsToIgnore - The comma-separated list of locators of elements to ignore

    • violationsToIgnore - The violations codes which should be ignored

    • violationsToCheck - The violations codes which should be checked

If violation code will be set as checked and ignored then it will be checked and not ignored
The step based on the contextual approach and when it’s necessary it could be used to validate the accessibility of the context element only.
Example 6. Check accessibility
Given I am on page with URL `https://vividus-test-site-a92k.onrender.com/`
When I change context to element located by `xpath(//body)`
When I perform accessibility scan:
|standard|level |elementsToIgnore                                 |elementsToCheck|violationsToIgnore                                                                     |
|WCAG2AAA|NOTICE|By.id(ignore), By.cssSelector(#errors > h1 > img)|               |WCAG2AAA.Principle1.Guideline1_3.1_3_1.H42.2,WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30|
|WCAG2AAA|NOTICE|By.xpath(//*)                                    |               |                                                                                       |