@uuv/a11y

Automated a11y validation

@uuv/a11y is a solution for automated accessibility validations

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 :

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

Usage

With UNPKG

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

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

2. 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

1. Import @uuv/a11y npm dependency

   npm install -D @uuv/a11y

2. 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)

1. add @uuv/cypress npm dependency :

   npm install --save-dev @uuv/cypress

   2. 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 :

      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.
2. Then execute your tests :

   npx uuv e2e

Want to contribute ?

Your help is welcome, see the Contributors guide.

License

This project is licensed under the terms of the MIT license.

Authors

• @luifr10
• @stanlee974