yargalot / accesssniff Goto Github PK
View Code? Open in Web Editor NEWAutomated accessibility testing using HTML_Codesniffer (WCAG and Section508)
Automated accessibility testing using HTML_Codesniffer (WCAG and Section508)
Hi, I just upgraded from 2.someting to 3.0(.1)
and the performance, which wasn't faboulus to begin with, just became unbearable.
It takes 12 minutes!! to lint my files now.
I am facing issue while sniffing the accessibility test on "http://www.kiehls.com/ultimate-brushless-shave-cream-blue-eagle/235.html". I was not able to get exact location and error so I modified "dist/accesssniff.js" file by putting few try catch and below error I am receiving for each pages while it is working fine for other domains/sites. Can you investigate the root cause of the error.
SyntaxError: Unexpected end of JSON input
at Object.parse (native)
at ..\node_modules\access-sniff\dist\accesssniff.js:196:40
at Array.every (native)
at Accessibility.parseOutput (..\node_modules\access-sniff\dist\accesssniff.js:192:26)
at ..\node_modules\access-sniff\dist\accesssniff.js:287:28
at ChildProcess.exithandler (child_process.js:195:7)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:886:16)
Mostly to keep the dependency tree as clean as possible :)
Hi @yargalot - does AcessSniff add any Accessibility rules/checks that HTML_CodeSniffer does not already have?
I run the CLI in this project:
https://github.com/willgm/angular2-jwt-poc
I was able to use only with v2.4.7, because with versions v3.0.0 and v3.0.1 I got the following error:
/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37:99)
at Accessibility (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:41:5)
at Object._exports.setup (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/cli/index.js:46:21)
at Object.<anonymous> (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js:3:24)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3
Tested with node v7.4.0 and v6.9.1, linux fedora 25.
You can see bellow the full sysout of my tests:
~/proj/ngaot [poc ~2 *] » nvm use 7 william.grasel@localhost
Now using node v7.4.0 (npm v4.0.5)
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » npm install [email protected] -g william.grasel@localhost
/home/william.grasel/.nvm/versions/node/v7.4.0/bin/sniff -> /home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js
/home/william.grasel/.nvm/versions/node/v7.4.0/lib
└─┬ [email protected]
└── [email protected] (git+https://github.com/squizlabs/HTML_CodeSniffer.git#d209ce54876657858a8a01528ad812cd234f37f0)
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » sniff ./src/**/*.html -r json -l reports william.grasel@localhost
/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37:99)
at Accessibility (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:41:5)
at Object._exports.setup (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/cli/index.js:46:21)
at Object.<anonymous> (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js:3:24)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » npm install [email protected] -g william.grasel@localhost
/home/william.grasel/.nvm/versions/node/v7.4.0/bin/sniff -> /home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js
/home/william.grasel/.nvm/versions/node/v7.4.0/lib
└─┬ [email protected]
└── [email protected] (git+https://github.com/squizlabs/HTML_CodeSniffer.git#d209ce54876657858a8a01528ad812cd234f37f0)
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » sniff ./src/**/*.html -r json -l reports william.grasel@localhost
/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:37:99)
at Accessibility (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/app/index.js:41:5)
at Object._exports.setup (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/dist/cli/index.js:46:21)
at Object.<anonymous> (/home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js:3:24)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » npm install [email protected] -g william.grasel@localhost
/home/william.grasel/.nvm/versions/node/v7.4.0/bin/sniff -> /home/william.grasel/.nvm/versions/node/v7.4.0/lib/node_modules/access-sniff/bin/accessSniff.js
- [email protected] node_modules/access-sniff/node_modules/abab
- [email protected] node_modules/access-sniff/node_modules/acorn
- [email protected] node_modules/access-sniff/node_modules/acorn-globals
- [email protected] node_modules/access-sniff/node_modules/amdefine
- [email protected] node_modules/access-sniff/node_modules/array-equal
- [email protected] node_modules/access-sniff/node_modules/content-type-parser
- [email protected] node_modules/access-sniff/node_modules/cssom
- [email protected] node_modules/access-sniff/node_modules/cssstyle
- [email protected] node_modules/access-sniff/node_modules/deep-extend
- [email protected] node_modules/access-sniff/node_modules/deep-is
- [email protected] node_modules/access-sniff/node_modules/esprima
- [email protected] node_modules/access-sniff/node_modules/estraverse
- [email protected] node_modules/access-sniff/node_modules/esutils
- [email protected] node_modules/access-sniff/node_modules/fast-levenshtein
- [email protected] node_modules/access-sniff/node_modules/iconv-lite
- [email protected] node_modules/access-sniff/node_modules/ini
- [email protected] node_modules/access-sniff/node_modules/normalize-path
- [email protected] node_modules/access-sniff/node_modules/nwmatcher
- [email protected] node_modules/access-sniff/node_modules/parse5
- [email protected] node_modules/access-sniff/node_modules/prelude-ls
- [email protected] node_modules/access-sniff/node_modules/rc/node_modules/minimist
- [email protected] node_modules/access-sniff/node_modules/sax
- [email protected] node_modules/access-sniff/node_modules/source-map
- [email protected] node_modules/access-sniff/node_modules/strip-json-comments
- [email protected] node_modules/access-sniff/node_modules/symbol-tree
- [email protected] node_modules/access-sniff/node_modules/tr46
- [email protected] node_modules/access-sniff/node_modules/type-check
- [email protected] node_modules/access-sniff/node_modules/levn
- [email protected] node_modules/access-sniff/node_modules/webidl-conversions
- [email protected] node_modules/access-sniff/node_modules/whatwg-encoding/node_modules/iconv-lite
- [email protected] node_modules/access-sniff/node_modules/whatwg-encoding
- [email protected] node_modules/access-sniff/node_modules/html-encoding-sniffer
- [email protected] node_modules/access-sniff/node_modules/whatwg-url
- [email protected] node_modules/access-sniff/node_modules/wordwrap
- [email protected] node_modules/access-sniff/node_modules/optionator
- [email protected] node_modules/access-sniff/node_modules/escodegen
- [email protected] node_modules/access-sniff/node_modules/xml-name-validator
- [email protected] node_modules/access-sniff/node_modules/jsdom
- [email protected] node_modules/access-sniff/node_modules/rc
- [email protected] node_modules/access-sniff/node_modules/unixify
/home/william.grasel/.nvm/versions/node/v7.4.0/lib
└─┬ [email protected]
└── [email protected] (git+https://github.com/squizlabs/HTML_CodeSniffer.git#d209ce54876657858a8a01528ad812cd234f37f0)
---------------------------------------------------------------------
~/proj/ngaot [poc ~2 *] » sniff ./src/**/*.html -r json -l reports william.grasel@localhost
Starting Accessibility tests
I want to set the options to only output WCAG2AA errors using the CLI. But I didn't understand from your documentation which file I set these?
options: {
accessibilityLevel: 'WCAG2A'
}
options: {
reportLevels: {
notice: true,
warning: true,
error: true
}
}
Kind Regards, Martin
I discovered this issue when using grunt-accessibility but it appears to originate from this module.
Basically, when I configure the Gruntfile to:
accessibility: {
options: {
accessibilityLevel: "WCAG2AAA"
}
}
The output from the accessibility review is based on WCAG2A
and not WCAG2AAA
.
I'm not very familar with this code base but the options seems to be reset on this line of AccessSniff
I am using your lib with a gulp plugin and the following code:
gulp.src('index.html')
.pipe(accessibility({
accessibilityLevel: 'WCAG2AAA',
ignore: [
// ignored, because I want to lint partial html files, not the whole pages
'WCAG2AAA.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl',
'WCAG2AAA.Principle3.Guideline3_1.3_1_1.H57.2'
]
}))
Having the following index.html:
<img src="whatever.png">
All is says is that 1 file lint free!
. Hovewer, I am pretty sure WCAG specifies there must be an alternative text for all images (see the very first rule).
So my quesiton is what rules does this plugin really support?
ITT
referencing yargalot/grunt-accessibility#31
yargalot/grunt-accessibility#31 as per @XhmikosR's, previous issue
Hey,
See below the error (Windows 10, Node.js 5.10.0, npm 3.8.3)
$ sniff http://statamic.com/ -r json -l reports
C:\Users\Kantoche\AppData\Roaming\npm\node_modules\access-sniff\dist\app\index.js:37
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
^
TypeError: Cannot call a class as a function
at _classCallCheck (C:\Users\Kantoche\AppData\Roaming\npm\node_modules\access-sni ff\dist\app\index.js:37:99)
at Accessibility (C:\Users\Kantoche\AppData\Roaming\npm\node_modules\access-sniff \dist\app\index.js:41:5)
at Object._exports.setup (C:\Users\Kantoche\AppData\Roaming\npm\node_modules\acce ss-sniff\dist\cli\index.js:46:21)
at Object.<anonymous> (C:\Users\Kantoche\AppData\Roaming\npm\node_modules\access- sniff\bin\accessSniff.js:3:24)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:146:18)
at node.js:404:3
Firstly, thank you for this great integration of HTML_CodeSniffer.
In additional to local files, it would be very useful if AccessSniff could also target URL's (as HTML_CodeSniffer allows).
This way, accessibility tests could be run on dynamically generated content in development and staging as well as allowing for external tests on a production server, using the current version of the live content.
Since phantom-js is no longer maintained, perhaps jsdom could be used?
Hi,
Most organisations are mirroring public repositories can't use AccessSniff and libraries dependent from AccessSniff due to security and licence limitations.
(Because of direct pull of dependencies from Githubis blocked)
HTML_CodeSniffer just released in NPM, https://www.npmjs.com/package/html_codesniffer
Could you please use NPM dependency instead of Github?
"HTML_CodeSniffer": "squizlabs/HTML_CodeSniffer#2.0.7"
Thank you.
Hi,
I was trying to use this for Section508 support but the changes are in master and the version of the package hasn't been bumped to include those changes. Can you bump the package version to 2.4.5 ? Thanks in advance
as per yargalot/grunt-accessibility#23
options: {
verboseTypes: [
"notice": false,
"warning": true,
"error": true
]
}
Hi, i updated my grunt-accessibility Module.
unfortunately my ignore values wont work, i dont know whats wrong.
It seems it wont read the content of .accessibilityrc
my gruntfile Task-Options:
accessibility: {
options: {
accessibilityLevel: 'WCAG2AA',
accessibilityrc: true,
domElement: true,
reportLevels: {
notice: false,
warning: true,
error: true
}
}
example of my .accessibilityrc:
{
"ignore": [
"WCAG2AA.Principle4.Guideline4_1.4_1_1.F77",
"WCAG2AA.Principle1.Guideline1_3.1_3_1.H48",
"WCAG2AA.Principle1.Guideline1_3.1_3_1.H39.3.NoCaption",
]
}
old:
[email protected]
├─ [email protected]
Verbose Output:
Options: ignore=[], verbose, force=false, domElement, reportType=null, reportLocation="reports", accessibilityrc, accessibilityLevel="WCAG2AA", reportLevels={"notice":false,"warning":true,"error":true}
new:
[email protected]
└─ [email protected]
Options: accessibilityLevel="WCAG2AA", accessibilityrc, domElement, reportLevels={"notice":false,"warning":true,"error":true}
Ideally, the CLI would return with an exit code of 0 if there are no errors, and 1 if there was at least 1 error. That would make it easy to integrate it with other scripts, and especially into a continuous integration pipeline.
Would you entertain a PR that allowed a user to pass in an HTML string in addition to url and file?
Hey,
is there any way I could use this to test pages behind a login form?
Running the command-line client like this:
sniff example.html -l reports -r json
will create the file "reports/report.json" only if there are no errors found in "example.html". Otherwise the script will fail without writing the report.
It makes this tool difficult to use in CI environments, where reports needs to be analyzed later and the error messages on console are not as legible as a report, which can be converted to HTML to improve the efficiency.
"C:\projects\accesssniff/reports/report.txt" created. Report Finished. The path needs normalization.
There is some security error which can be fixed by updating dependencies
see the errors
yarn audit
update dependencies
ncu -u
yarn install
fix audit
yarn audit fix
This is a great tool but in order to use it on most of my government-led projects, I need to be able to specify accessibilityLevel: 'Section508'
instead of only WCAG2A[A][A]
as currently that is the minimum level our applications must be compliant with in order to ship. I don't disagree that we should be working to support WCAG2A at least but that is another battle. Since this option is already baked in to HTML_CodeSniffer why is this not extended to AccessSniff?
as per #10
Specify files to include to make a smaller distributable
CSV reports are comma separated, but the values in the description field of the notice, warning or error can also contains commas, splitting it across multiple columns in Excel. It would be great if the separator character was not a comma, or we could choose which character for csv reports.
Also the Element column causes some problems when it is a block of html. It would be helpful either to turn this column off from reports (when it is the html element it contains the entire page!), or at least remove line breaks and/or the child elements to not break the report when imported as spreadsheet.
I am using this via the gulp-accessibility plugin.
Thanks!
Right now the plugin lets you either log the results to the console, or it generates individual reports.
But in gulp it's common to pipe the result to a destination.
I'd rather have control over the stream and pipe everything to one file (or multiple files as an option), as I'm doing multiple audits and generate individual reports for each audit.
Would be great to have!
It seems command is ignoring .accessibilityrc
, doesn't matter if it's in the same dir or at $HOME. Also tried the tip defined here, but doesn't really "solve" this issue. Also, getting TypeError: accessSniff.start is not a function
with that script.
➜ air (master) sniff http://airdev.test -r txt
Starting Accessibility tests
Testing http://airdev.test
Testing http://airdev.test failed
JsDom Cannot render urls, please set the browser option to true
Unhandled rejection JsDom Cannot render urls, please set the browser option to true
➜ air (master) cat .accessibilityrc
options: {
browser: true
}
Any tips?
hi, thx for nice your tool, i use it with "grunt-accessibility".
Question:
is it possible, to ignore whole rules instead of specify each rule.
example:
"ignore": [
"WCAG2AA.Principle4.Guideline4_1.4_1_1.F77",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Abs",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage"
]
could be:
"ignore": [
"WCAG2AA.Principle4.Guideline4_1.4_1_1.F77",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail",
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18"
]
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.