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

@quailjs/quail

v3.1.0

Published

Accessibility testing in the browser and on the server.

Downloads

2

Readme

Build Status

Quail: Accessibility Information Library

The project website is quailjs.io.

Quail is a Node module and a jQuery plugin that lets you easily check HTML for adherence to accessibility standards. It comes with over 200 tests which implement Open Accessibility Tests and comes with WCAG 1.0, WCAG 2.0, and Section 508 guidelines.

Developers can build their own guidelines, or easily build a custom guideline that integrates with their project. While the project supports checking entire HTML pages, integration with a CMS to check partial HTML content is probably the most popular use case.

Notice for developers working in the 2.2.x version.

Please base your changes on the master-2.2.x branch.

Requirements

You will need the following installed on your system to run Quail.

  1. Node.js
  2. Grunt & Grunt CLI
  3. Bower
  4. Java JDK (To run Selenium Server)
  5. Karma

Using Quail

Setup

Run the following commands to build Quail.

git clone https://github.com/quailjs/quail.git
cd quail
npm install
bower install
grunt build

Using Quail from the command line

To see the Quail CLI API, run the following. You can also add the Quail bin directory to your PATH if you are so inclined.

./bin/quail --help

Once the command is set up, you can run the following to test any addressable web page.

./bin/quail eval http://placekitten.com

Write the results as a JSON object out to file in an existing directory.

./bin/quail evaluate http://placekitten.com -o ./analyses

You can also pass configurations to the evaluator.

./bin/quail evaluate http://placekitten.com -c ~/path/to/myconfig.json -o ./analyses

This is the default set of configurations. Your configurations will replace the defaults.

{
  "phantomjs": {
    "resourceTimeout": 5000
  },
  "blacklists": {
    "domains": [
      "fbstatic.com",
      "facebook.com",
      "twitter.com",
      "google-analytics.com",
      "googleadservices.com",
      "googlesyndication.com",
      "perfectaudience.com",
      "typekit.com",
      "sharethis.com",
      "doubleclick.com",
      "optimizely.com",
      "gigya.com"
    ],
    "mimetypes": [
      "application/x-shockwave-flash",
      "application/(ms)?(word|powerpoint|excel)"
    ],
    "headers": []
  }
}

The phantomjs configurations affect the PhantomJS runtime.

The blacklists block resource resource requests from PhantomJS by the resource's domain, its mime type or a header name in the request. Currently the only header value that can be blocked is the value of Accept (mime type).

To work on an existing assessment in a browser (so that breakpoints can be set in the console), run the following.

./bin/quail dev aMustHaveTitle

The following is experimental, which means it probably won't work. You can generate a new assessment with this command.

./bin/quail gen someNewAssessment

Testing

Core unit tests in Karma

./node_modules/karma/bin/karma start ./config/karma-unit.conf.js

Testing assessments in Selenium

All assessments. This takes about 10 minutes to run.

node ./test/assessmentSpecs/testRunner.js

An individual assessment. This takes about 2 seconds to run.

node ./test/assessmentSpecs/testRunner.js -I aMustHaveTitle

In a specific browser.

_BROWSER=chrome node ./test/assessmentSpecs/testRunner.js

Documentation

Full documentation is available via readthedocs.org.

Contributing

Pull requests should be made against the master branch.

We are currently looking for the following types of contritions.

  1. Help with our current Milestone objectives.
  2. JavaScript enthusiasts who want a chance to build out:
  3. A dependency injection load pattern: Replace our load-order-depending spinup with an Inversion of Control pattern
  4. A pub/sub pattern: Refactor the custom event bubbling code in the core Classes (e.g. TestCollection) to use a real event pub/sub library
  5. Improve an NPM package, better build and test scripts, etc: Improve the Quail NPM package

Credits

References

HTML Test Suite for WCAG 2.0, Sorted by Guideline

Legal

QUAIL is covered under the MIT License, and is copyright (c) 2015 by Jesse Beach. Current license is at http://quailjs.org/license.