@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/dist/bundle/uuv-a11y.bundle.js">
   </script>

2. Add script tag to execute

   <script>
     const rgaaChecker = new uuvA11y.RgaaChecker(url, enabledRules);
     const result = await rgaaChecker.validate().toPromise();
     // Print complete result
     console.log(result);
     // Print result summary group by criteria
     console.log(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 car visualisation des noeuds)

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
   
   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 result
     When I visit path "https://e2e-test-quest.github.io/simple-webapp/a11y-test.html"
     Then I should have the following result based on the rgaa reference
     """json
       {
         "status": "error",
         "criteria": {
           "1.1": {
             "status": "error"
           },
           "1.2": {
             "status": "error"
           },
           "1.3": {
             "status": "manual"
           },
           "1.4": {
             "status": "manual"
           },
           "1.5": {
             "status": "manual"
           },
           "1.6": {
             "status": "success"
           },
           "2.1": {
             "status": "error"
           },
           "8.1": {
             "status": "error"
           },
           "8.3": {
             "status": "success"
           },
           "8.4": {
             "status": "manual"
           },
           "8.5": {
             "status": "error"
           },
           "8.6": {
             "status": "manual"
           },
           "8.10": {
             "status": "error"
           },
           "11.1": {
             "status": "success"
           }
         }
       }
     """

3. Then execute your tests :

   npx uuv e2e

License

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

Authors

• @luifr10
• @stanlee974