@uuv/a11y NPM | npm.io

@uuv/a11y

What is @uuv/a11y?

The @uuv library (User centric Usecases Validator) is an accessibility driven solution to facilitate the writing and execution of end-to-end tests that are understandable to any human being.

@uuv/a11y is the part of this solution used to perform automated accessibility checks to guarantee non-regression.

How it works ?

The following references are available :

RGAA

For each criterion of the RGAA, the following algorithm is executed :

Diagram a11Y RGAA

Consult this page to find out which RGAA verifications are implemented in the library

Usage

With UNPKG

Add script tag to import @uuv/a11y in your html page :

<script src="https://unpkg.com/@uuv/a11y/bundle/uuv-a11y.bundle.js">
</script>

Add script tag to execute

<script type="module">
  const rgaaChecker = new uuvA11y.RgaaChecker(window.location.url);
  const result = await rgaaChecker.validate().toPromise();
  // Print complete result
  console.log('result', result);
  // Print result summary group by criteria
  console.log('summary', result.summary());
</script>

Stackblitz example

As a dependency

Import @uuv/a11y npm dependency
```
npm install -D @uuv/a11y
```

Use it in your file

import {
  RgaaChecker,
  A11yResult,
} from "@uuv/a11y";

const currentUrl = "<set your current url>";
const rgaaChecker = new RgaaChecker(currentUrl, enabledRules);
const result: A11yResult = await rgaaChecker.validate().toPromise();
// Print complete result
console.log(result);
// Print result summary group by criteria
console.log(result.summary());

During E2E Testing (recommended usage because it allows DOM nodes to be visualized)

add @uuv/cypress npm dependency :

npm install --save-dev @uuv/cypress

create the file uuv/e2e/a11y.feature in the project root with the following content and replace url https://e2e-test-quest.github.io/simple-webapp/a11y-test.html by yours :

```gherkin
Feature: A11y validation
   
   Scenario: Default RGAA
     When I visit path "https://e2e-test-quest.github.io/simple-webapp/a11y-test.html"
     Then I should not have any rgaa accessibility issue

   Scenario: RGAA with partial result
     When I visit path "https://e2e-test-quest.github.io/simple-webapp/a11y-test.html"
     Then I should have the following partial result based on the rgaa reference
        """json
        {
           "status": "error",
           "criteria": {
              "1.5": {
                 "status": "manual"
              },
              "1.6": {
                 "status": "manual",
                 "tests": {
                    "1.6.5": {
                       "status": "success"
                    }
                 }
              },
              "11.1": {
                 "status": "success",
                 "tests": {
                    "11.1.1": {
                       "status": "success"
                    }
                 }
              }
           }
        }
        """
   ```

You can also see the French example or the complete English example.