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

protractor-accessibility-reporter

v1.0.2

Published

Run accessibility audit using axe-webdriverjs. Export results in CSV.

Downloads

35

Readme

Protractor Accessibility Reporter

protractor-accessibility-reporter will run an accessibility audit using axe-webdriverjs and output the results in the console. The results can also be configured to output as a .csv file to a desired directory.

Installation

To install the package use the following command at root level:

npm install --save protractor-accessibility-reporter

Usage

In your config file you should set your plugin options:

{
 package: 'protractor-accessibility-reporter',
  options: {
   outputCSV: true,
   outputCSVFolder: 'tests/testresults/accessibility',
   exclude: [
    'Ensures the document has only one main landmark and each iframe in the page has at most one main landmark',
    'Ensures all page content is contained by landmarks'
   ]
 }
}

Set outputCSV to false if you do not want to export all results. Add any tests to the exclude array that you do not want to run.

In your test file:

const accessibility = require('protractor-accessibility-reporter')

describe('W3C City Lights', () => {
  it('There should be no violations', async () => {
    await browser.waitForAngularEnabled(false)
    await browser.get('https://www.w3.org/WAI/demos/bad/after/home.html')
    expect(await acessibility.runAxeTest('City Lights Good')).toEqual(0)
  })

  it('There should be violations', async () => {
    await browser.waitForAngularEnabled(false)
    await browser.get('https://www.w3.org/WAI/demos/bad/before/home.html')
    expect(await acessibility.runAxeTest('City Lights Bad')).toBeGreaterThan(0)
  })
})

This will result in the following output:

---------- Accessibility Audit Results - City Lights Good ----------
 PASS: Ensures aria-hidden='true' is not present on the document body. (1 passes, 0 fails, 1 total)
 PASS: Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content (1 passes, 0 fails, 1 total)
 PASS: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds (62 passes, 0 fails, 62 total)
 PASS: Ensures each HTML document contains a non-empty <title> element (1 passes, 0 fails, 1 total)
 PASS: Ensures every id attribute value used in ARIA and in labels is unique (1 passes, 0 fails, 1 total)
 PASS: Ensures every id attribute value is unique (22 passes, 0 fails, 22 total)
 PASS: Ensures headings have discernible text (9 passes, 0 fails, 9 total)
 PASS: Ensures form field does not have multiple label elements (1 passes, 0 fails, 1 total)
 PASS: Ensures the order of headings is semantically correct (9 passes, 0 fails, 9 total)
 PASS: Ensures every HTML document has a lang attribute (1 passes, 0 fails, 1 total)
 PASS: Ensures the lang attribute of the <html> element has a valid value (1 passes, 0 fails, 1 total)
 PASS: Ensures <img> elements have alternate text or a role of none or presentation (9 passes, 0 fails, 9 total)
 PASS: Ensure image alternative is not repeated as text (9 passes, 0 fails, 9 total)
 PASS: Ensures input buttons have discernible text (1 passes, 0 fails, 1 total)
 PASS: Ensures that every form element is not solely labeled using the title or aria-describedby attributes (1 passes, 0 fails, 1 total)
 PASS: Ensures every form element has a label (1 passes, 0 fails, 1 total)
 PASS: Ensures the document has at most one banner landmark (1 passes, 0 fails, 1 total)
 PASS: Ensures the document has at most one contentinfo landmark (1 passes, 0 fails, 1 total)
 PASS: Ensures links have discernible text (55 passes, 0 fails, 55 total)
 PASS: Ensures that lists are structured correctly (5 passes, 0 fails, 5 total)
 PASS: Ensures <li> elements are used semantically (16 passes, 0 fails, 16 total)
 PASS: Ensure that the page, or at least one of its frames contains a level-one heading (1 passes, 0 fails, 1 total)
 PASS: Ensure all skip links have a focusable target (1 passes, 0 fails, 1 total)

 This page had a 100% pass rate.

 The elements on this page had a 100% pass rate. More details are included in the report.

 ---------- Accessibility Audit Results - City Lights Bad ----------
 PASS: Ensures aria-hidden='true' is not present on the document body. (1 passes, 0 fails, 1 total)
 PASS: Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content (1 passes, 0 fails, 1 total)
 FAIL: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds (62 passes, 2 fails, 64 total)
 PASS: Ensures each HTML document contains a non-empty <title> element (1 passes, 0 fails, 1 total)
 PASS: Ensures every id attribute value used in ARIA and in labels is unique (1 passes, 0 fails, 1 total)
 PASS: Ensures every id attribute value is unique (22 passes, 0 fails, 22 total)
 PASS: Ensures headings have discernible text (9 passes, 0 fails, 9 total)
 PASS: Ensures form field does not have multiple label elements (1 passes, 0 fails, 1 total)
 PASS: Ensures the order of headings is semantically correct (9 passes, 0 fails, 9 total)
 FAIL: Ensures every HTML document has a lang attribute (1 passes, 1 fails, 2 total)
 PASS: Ensures the lang attribute of the <html> element has a valid value (1 passes, 0 fails, 1 total)
 FAIL: Ensures <img> elements have alternate text or a role of none or presentation (9 passes, 33 fails, 42 total)
 PASS: Ensure image alternative is not repeated as text (9 passes, 0 fails, 9 total)
 PASS: Ensures input buttons have discernible text (1 passes, 0 fails, 1 total)
 PASS: Ensures that every form element is not solely labeled using the title or aria-describedby attributes (1 passes, 0 fails, 1 total)
 FAIL: Ensures every form element has a label (1 passes, 1 fails, 2 total)
 PASS: Ensures the document has at most one banner landmark (1 passes, 0 fails, 1 total)
 PASS: Ensures the document has at most one contentinfo landmark (1 passes, 0 fails, 1 total)
 FAIL: Ensures links have discernible text (55 passes, 7 fails, 62 total)
 PASS: Ensures that lists are structured correctly (5 passes, 0 fails, 5 total)
 PASS: Ensures <li> elements are used semantically (16 passes, 0 fails, 16 total)
 PASS: Ensure that the page, or at least one of its frames contains a level-one heading (1 passes, 0 fails, 1 total)
 PASS: Ensure all skip links have a focusable target (1 passes, 0 fails, 1 total)
 PASS: Ensures aria-hidden='true' is not present on the document body. (1 passes, 0 fails, 1 total)
 PASS: Ensure that text spacing set through style attributes can be adjusted with custom stylesheets (8 passes, 0 fails, 8 total)
 PASS: Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content (1 passes, 0 fails, 1 total)
 PASS: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds (73 passes, 0 fails, 73 total)
 PASS: Ensures each HTML document contains a non-empty <title> element (1 passes, 0 fails, 1 total)
 PASS: Ensures every id attribute value is unique (14 passes, 0 fails, 14 total)
 PASS: Ensures headings have discernible text (1 passes, 0 fails, 1 total)
 PASS: Ensures form field does not have multiple label elements (1 passes, 0 fails, 1 total)
 PASS: Ensures the order of headings is semantically correct (1 passes, 0 fails, 1 total)
 PASS: Ensures <img> elements have alternate text or a role of none or presentation (9 passes, 0 fails, 9 total)
 PASS: Ensure image alternative is not repeated as text (42 passes, 0 fails, 42 total)
 PASS: Ensures that every form element is not solely labeled using the title or aria-describedby attributes (1 passes, 0 fails, 1 total)
 PASS: Ensures the document has at most one banner landmark (1 passes, 0 fails, 1 total)
 PASS: Ensures the document has at most one contentinfo landmark (1 passes, 0 fails, 1 total)
 PASS: Ensures presentational <table> elements do not use <th>, <caption> elements or the summary attribute (10 passes, 0 fails, 10 total)
 PASS: Ensures links have discernible text (48 passes, 0 fails, 48 total)
 PASS: Ensures that lists are structured correctly (2 passes, 0 fails, 2 total)
 PASS: Ensures <li> elements are used semantically (8 passes, 0 fails, 8 total)
 PASS: Ensure that the page, or at least one of its frames contains a level-one heading (1 passes, 0 fails, 1 total)
 PASS: Ensure all skip links have a focusable target (1 passes, 0 fails, 1 total)
 PASS: Ensure that tables do not have the same summary and caption (10 passes, 0 fails, 10 total)
 PASS: Ensure that each cell in a table using the headers refers to another cell in that table (10 passes, 0 fails, 10 total)

 Minor: 0
 Moderate: 0
 Serious: 5
 Critical: 3

 This page had a 89% pass rate.

 The elements on this page had a 91% pass rate. More details are included in the report.

Testing

Install all modules:

npm install

Update webdriver:

npm run update-webdriver

Run tests:

npm run test

License

MIT