npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uuv/a11y

v1.0.0-beta.52

Published

A javascript lib for running a11y validation based on multiple reference(RGAA, etc)

Downloads

587

Readme

@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

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