Accessibility audit tooling for the web (beta)
Home Page: http://addyosmani.github.io/a11y/
License: Apache License 2.0
I'd like to break the build using gulp-a11y when there are issues building html fragments into angular components in my favorite stack, because there are expected errors, per issue 50. Concretely, I'd like for these two tasks, for [components] and (https://github.com/doug-wade/example-koa-angular/blob/master/gulpfile.js#L41) views to fail, but currently I can only break the build for non-compliant views.
In this comment, you seem to allude to the idea of having a .allyrc file, similar to .babelrc or .eslintrc, while also which seems like a great solution. Something like
» a11y ./components/*.html --config .components.allyrc
» a11y ./views/*.html
And be able to do the same with the gulp wrapper
var a11y = require('gulp-a11y');
gulp.task('components', function () {
return gulp.src('./components/*.html')
.pipe(a11y({
config: '.components.allyrc'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('views', function () {
return gulp.src('./views/*.html')
.pipe(a11y()) // defaults to .allyrc
.pipe(gulp.dest('dist'));
});
I'd be interested in implementing this feature.
a11y https://chrome.com
Command failed: C:\Program Files (x86)\nodejs\phantomjs.CMD C:\Program Files (x86)\nodejs\node_modules\a11y\audits.js {"delay":1,"url":"https://chrome.com","width":1024,"height":768} --ignore-ssl-errors=true --ssl-protocol=tlsv1 --local-to-remote-url-access=true
'C:\Program' is not recognized as an internal or external command,
operable program or batch file.
I'm trying to use a11y to audit a bunch of static source captures that were generated by using protractor (selenium) to crawl an AngularJs app and save the page source to file at various points. If I run "a11y google.com" I get an audit report back. However, if I try "a11y ./path/to/my/file.html" I get this error
Command failed: /usr/local/lib/node_modules/a11y/node_modules/phantomjs/lib/phantom/bin/phantomjs /usr/local/lib/node_modules/a11y/audits.js {"delay":1,"url":"file:///full/path/to/my/file.html","width":1024,"height":768} --ignore-ssl-errors=true --ssl-protocol=tlsv1 --local-to-remote-url-access=true
Audit failed
I've tried installing phantomjs multiple ways and I'm already successfully using phantomjs for unit testing without issue. I'm running node v0.12.0. Any idea what's going on?
Was going through the code and noticed webpage, are there any plans to use puppeteer instead?
I'm interested in including an a11y check as part of our continuous integration checks, but on otherwise well-formed templates that aren't a complete document, I get these errors:
✖ The web page should have the content's human language indicated in the markup
html
✖ The web page should have a title that describes topic or purpose
html
While acknowledging that testing fragments of html isn't a complete solution, it would be helpful as a first pass on every commit. Ideally this would be exposed through the a11y command line option, so I could run something like:
a11y */.html --fragment-ok
Using something like the following will stall and error out PhantomJS, due to the URL redirect in the HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1;url=http://example.com">
<link rel="canonical" href="http://example.com">
<script>
window.location.replace('http://example.com');
</script>
</head>
<body>
<p>This page has been moved <a href="http://example.com">here</a>.</p>
</body>
</html>Given that there's an existing link to grunt-a11y, it would be nice to also link to gulp-a11y for those of us using Gulp.
I have this in a file called test.html:
<div>
<label id="mobile-label" for="mobile">Mobile number</label>
<input name="mobile"
id="mobile"
type="tel"
aria-labelledby="mobile-label">
</div>
<div>
<label id="firstname-label" for="firstname">Fornavn</label>
<input name="firstname"
id="firstname"
type="text"
aria-labelledby="firstname-label">
</div>
When I run a11y test.html the output is
× This element has an unsupported ARIA attribute
#firstname
Expected output was
× This element has an unsupported ARIA attribute
#mobile
#firstname
If I change from type="tel" to type="text" in the first field I get the expected output so it seems that either that ARIA attribute is supported for type="tel" or inputs with that type is not evaluated correctly.
This was observed with v0.3.3
not focusable
not exposed as control in acc layer
I've stumbled upon pa11y, and –apart from that it uses HTML CodeSniffer to generate an accessibility report instead of Chrome Accessibility Tools– it looks very similar.
So what would be the differences? And otherwise, are there features in there, which also could be valuable for a11y?
5 Passed Rules
ARIA state and property values must be valid
Controls and media elements should have labels
These elements are focusable but either invisible or obscured by another element
The purpose of each link should be clear from the link text
The web page should have a title that describes topic or purpose
suggest these would be better marked up as a list or even p's (no headings except for X passed Rules)
Right now, the elements property of each audit result only contains the first 5 elements failing that rule. E.g.
✖ Images should have an alt attribute
body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > .gravatar.gravatar-sm > IMG
body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > DIV:nth-of-type(2) > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm.mlxl > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > DIV:nth-of-type(3) > IMG
We would like to not be limited by only seeing 5 elements. It would be cool if we could configure the max-number of elements displayed. E.g.
ally <url> --elements-per-rule=<count>
or
a11y(page, {elementsPerRule: 10}, function (err, reports) {
/* ... */
});Would you be open to a PR?
Howdy! This looks like an awesome tool, thank you!
I installed the module npm install -g a11y and it installed without issue.
However when I tried to run it: a11y http://www.google.com
I got the following:
module.js:340 throw err; ^ Error: Cannot find module 'chalk' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/usr/local/lib/node_modules/a11y/cli.js:7:13) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Function.Module.runMain (module.js:497:10)
I tried running npm cache clean which I found after a few google searches but it did not work.
Not sure if this is specific to me or is a wider problem.
Sorry to post an issue so quickly after you released it to the world!
TODO.
// file: test-a11y.js
const a11y = require('a11y');
const _glob = './src/**/*.html';
const options = {
viewportSize: '800x600'
};
a11y(_glob, options, (err, reports) => {
if (err) console.log(err);
const audit = reports.audit; // `a11y` Formatted report
const report = reports.report; // DevTools Accessibility Audit formatted report
});
The above file, when ran (node test-a11y.js), will always fail with the following error. Couldn't load url: "./src/**/*.html"
Would make for a nicer codebase and better API for consumers.
Pull request welcome :)
I'm working on implementing some custom elements for basic web design pattern like tabs ect... I am seeing a few errors that a11y is reporting that do not appear when auditing via the Chrome extension.
± a11y http://localhost:3000/
✖ Elements with ARIA roles must be in the correct scope
CALCITE-TABS > .tab-nav
✖ Text elements should have a reasonable contrast ratio
CALCITE-TABS > .tab-nav > A:nth-of-type(2)
CALCITE-TABS > .tab-nav > A:nth-of-type(3)
✖ This element has an unsupported ARIA attribute
CALCITE-TABS
✔ This element does not support ARIA roles, states and properties
✔ This element has an invalid ARIA attribute
✔ ARIA state and property values must be valid
✔ Elements with ARIA roles must use a valid, non-abstract ARIA role
✔ An element's ID must be unique in the DOM
✔ These elements are focusable but either invisible or obscured by another element
✔ The web page should have the content's human language indicated in the markup
✔ The purpose of each link should be clear from the link text
✔ Meaningful images should not be used in element backgrounds
✔ The web page should have a title that describes topic or purpose
✔ Elements with ARIA roles must have all required attributes for that role
✔ Elements with ARIA roles must ensure required owned elements are present
✔ Avoid positive integer values for tabIndex
Is this just a version mismatch?
I'm running a11y on an entire folder of files from the command line. It would really help me if there was a way to only output errors. I'm thinking that if all the rules pass for a page, it would just log the page with a checkmark. Example output:
$ ally **/*.html
✔ file1.html
✔ file2.html
✖ file3.html
✖ The purpose of each link should be clear from the link text
body > .panel.panel-white.article.article-red > A
✔ file4.html
Let me know if you'd be interested in a feature like this, happy to pr.
Hey Team!
I just ran the a11y audit for a project I'm working on and got the following failure:
X role=main should only appear on significant elements
I have defined role=main only on my <main></main> element, which as far as I am aware is a fine practice to do.
After a little googling I found the following: https://groups.google.com/forum/#!topic/introduction-to-web-accessibility/ChGzBSe0_yU but after following the fix (updating my accessibility developer tools) nothing changed unfortunately.
Any idea what the problem might be?
I will probably write a script which reads a sitemap and checks all the non-external urls
The target is an implementation for a11y and pa11y.
$ a11y http://localhost:3000/
undefined:1
TypeError: 'undefined' is not a function (evaluating 'document.querySelector.b
^
SyntaxError: Unexpected token T
at Object.parse (native)
at /Users/addyo/projects/a11y/index.js:23:23
at ChildProcess.exithandler (child_process.js:635:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)Similarly, this fails:
$ a11y http://192.168.1.105:3000
undefined:1
TypeError: 'undefined' is not a function (evaluating 'document.querySelector.b
^
SyntaxError: Unexpected token T
at Object.parse (native)
at /Users/addyo/projects/a11y/index.js:23:23
at ChildProcess.exithandler (child_process.js:635:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)For example: click targets on mobile should be bigger so they are easier to click
test local input generates a report that includes all failures for a given violation false == true
When using the Chrome Accessibility DevTools extension, pages such as this Angular Todo app will display severity issues that are not reported by A11y when conducting an audit.
Example:
vs:
My current theory is that we're not giving the page sufficient time to complete JS execution so not all content is present and in an auditable state.
After experimenting with adding a custom timeout (similar to this) and playing with timeouts of differing values, this doesn't appear to improve our ability to report back on such issues.
These issues aren't specific to this module (as far as I can tell). I've been able to repro the same with https://github.com/GoogleChrome/accessibility-developer-tools. Looking into this further.
I get the following error when trying to run the tests:
Command failed: /usr/local/lib/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs /usr/local/lib/node_modules/a11y/audits.js {"delay":1,"url":"http://bbc.co.uk","width":1024,"height":768} --ignore-ssl-errors=true --ssl-protocol=tlsv1 --local-to-remote-url-access=true
Audit failed
I got a similar error on initial install so I manually installed PhantomJS but still can't get any test to work.
Sindre Sorhus
Addy: nice!
Re notifier; insane. Chalk also has insane amounts of downloads.
Sindre • Sun, 10:24 PM
Sindre Sorhus
Addy: You can use https://github.com/sindresorhus/log-symbols to get the colored symbols with windows fallbacks. I would only have the symbols colored so not to be distracting. Could be interesting to maybe have stats through https://github.com/yeoman/insight on which are the most popular violations. I would also include links to more information about the violations and how to fix. Will have more feedback when I see the code 😉
Sindre • Sun, 10:45 PM
All good suggestions :) Thanks Sindre! I was curious about windows fallbacks so the first link is def getting used.
12:10 AM
Addy Osmani
Sindre Sorhus
If you only need symbols I have a module with a bunch of symbols that have windows equivalent fallbacks: https://github.com/sindresorhus/figures/blob/master/index.js
I'm trying to run checks for pages using https://github.com/slim-template/slim
Is it possible?
find . -name "index.slim" | xargs a11y
Command failed: /usr/local/bin/phantomjs /usr/local/lib/node_modules/a11y/audits.js {"delay":1,"url":"file:///~/app/views/.../index.slim","width":1024,"height":768} --ignore-ssl-errors=true --ssl-protocol=tlsv1 --local-to-remote-url-access=true
Couldn't load url: "file:///~/app/views/.../index.slim"
I've created a tiny webservice for a11y on heroku:
https://a11y-service.herokuapp.com/report/google.com
Source is here: https://github.com/koenpunt/a11y-service
Just tried to install a11y to play around with it a little, but could not get anything to run, as soon as I try a11y <url> I get the following error:
child_process.js:397
throw new ERR_INVALID_ARG_TYPE('file', 'string', file);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "file" argument must be of type string. Received type object
at normalizeSpawnArguments (child_process.js:397:11)
at spawn (child_process.js:522:38)
at execFile (child_process.js:218:15)
at module.exports (/<path>/.nvm/versions/node/v10.4.1/lib/node_modules/a11y/index.js:33:5)
at Immediate.eachAsync (/<path>/.nvm/versions/node/v10.4.1/lib/node_modules/a11y/cli.js:43:5)
at runCallback (timers.js:697:11)
at tryOnImmediate (timers.js:667:5)
at processImmediate (timers.js:649:5)
On OS X with node 10.4.1.
Any idea what could go wrong here?
TODO. Contributors welcome :)
Not sure if this is an issue in a11y or ADT:
$ a11y http://www.walmart.com --verbose
Command failed: TypeError: 'null' is not an object (evaluating 'axs.properties.findTextAlternatives(a, {}).trim')
→ node_modules/accessibility-developer-tools/dist/js/axs_testing.js on line 1868
I added a comment to an existing issue in ADT here: GoogleChrome/accessibility-developer-tools#183 (comment)
ADT allow some configuration like (https://www.npmjs.com/package/accessibility-developer-tools#configuring-the-audit) :
It would be really great if we could make usage of that configuration through a11y.
UnCSS has supported something similar for a while and this might be useful: https://github.com/giakki/uncss/blob/master/src/phantom.js#L54
This tool should make it super easy to fix the violations. First step of fixing is finding where to fix.
I am getting network timeout on resource when I am trying to run a11y through command line.
What is the parameter I need to set to solve this???
Error:
C:\workspace\a11y>a11y http://localhost:4200
Command failed: C:\Users\dkuma172\AppData\Roaming\npm\node_modules\a11y\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\dkuma172\AppData
Roaming\npm\node_modules\a11y\audits.js {"delay":1,"url":"http://localhost:4200"
,"width":1024,"height":768} --ignore-ssl-errors=true --ssl-protocol=tlsv1 --local-to-remote-url-access=true
Error code:408 Network timeout on resource. for http://localhost:4200/vendor.bundle.js
Help welcome here.
The linked online tool http://a11y-app.herokuapp.com/ does not seem to work anymore, there are errors in the browser console.
When the test runs on pages with a gradient as a background, the background is evaluated as #ffffff. If the text colour happens to be too light —or white as well— the test obviously fails with:
Text elements should have a reasonable contrast ratio
It would probably be a good idea to pick the lightest of the gradient colours and run the test on that one instead, or on each colour separately.
Somewhat related to #40
Right now, the results look like there are only 5 elements violation a given rule, and it is a bit misleading.
✖ Images should have an alt attribute
body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > .gravatar.gravatar-sm > IMG
body > .container.ptl > .content > DIV:nth-of-type(2) > .exampleOutput > DIV:nth-of-type(2) > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > .gravatar.gravatar-sm.mlxl > IMG
body > .container.ptl > .content > DIV:nth-of-type(3) > .exampleOutput > DIV:nth-of-type(3) > IMG
The google accessibility audit outputs the total number of elements by each rule (e.g. (1 - 5 of 30)). It would be nice if a11y included this in the output as well.
✖ Images should have an alt attribute (1 -5 of 30)
...
Similarly, the API could have a numElements property
{
elements: '\nbody > .container.ptl > .content > .section-nav > LI > A\n...',
numElements: 30,
heading: 'Text elements should have a reasonable contrast ratio',
result: 'FAIL',
severity: 'Warning'
}Would you be open to a PR?
cc/ @gpleiss, @matt-royal, @stubbornella, @ctaymor
We ran the audit against this page: http://reddizen.com/r/aww/3e7xu3/domain/imgur.com
The cat image in the right panel - which does not have an alt tag - is added via React. If we run the ADT runner on this page in the browser, it catches the lack of alt tag on the cat image. However, when we run a11y, it doesn't catch this. We tried similar tests on other react sites, and most of the time a11y didn't catch errors on (non-server-side-rendered) React elements.
We figured out that the issue is PhantomJS. We modified our local version of a11y to use the system version of Phantom JS (version 2.0.0) instead of the node_module version (version 1.9.x) and then a11y caught all accessibility errors on React components. 😒
Unfortunately, since there is no node_module for Phantom 2, we can't really provide a fix for all users. However, as a (hopefully) temporary solution, we would like to be able to customize the headless browser that a11y runs on. Ideally, we'd like to run a11y with SlimerJS. SlimerJS caught all errors for our React components.
Does this sound good? Open to a PR?
example: code in error (tested http://google.com)
Foreground:#999999 Background:#FFFFFF
The contrast ratio is: 2.85:1
Text failed at Level AA
WCAG 2.0 SC 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Judging from the a11y docs the following should be possible:
var a11y = require('a11y');
a11y("http://www.google.com", function (err, reports) {
JSON.parse(reports);
});However, this causes an error Unexpected token o.
Looking at the raw reports string it is not valid JSON - it's missing quotes around field names and also uses single-quotes; i.e.:
{ audit:
[ { elements: '',
heading: 'Audio elements should have controls',
result: 'NA',
severity: 'Warning' },
...]
}
Or am I missing something?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.