WCAG Parsing Validation Filter bookmarklet

Version 5

This bookmarklet tool helps you filter the results of the W3C's Nu validator to show only results that are related to accessibility. It then produces a summary that can then be copied and pasted into a report or bug tracker.

Written by Jon Gibbins, based on The Paciello Group's WCAG 2.0 parsing error bookmarklet by Steve Faulkner.

Note: The intention is to move the additional features provided by this project into Steve Faulkner's GitHub project.

Usage

Right click on the bookmarklet link below and bookmark it in your browser:
WCAG Filter
Run the W3C's Nu validator on a page.
- If you have a static website, you can run the Nu validator on a URL directly.
- If you are working with dynamic web technologies, such as AngularJS, you will want to test the browser-rendered DOM instead using the Serialized DOM bookmarklet or your browser's developer tools console:
  - Bring up the DOM tree in your browser's developer tools. For example, in Chrome this can be done by bringing up the Elements tab of the Developer Tools console. Do not copy the page's original source code from "view source".
  - Right click on the <html> DOM node in your code and select 'Copy'. In Chrome, select 'Copy > Copy outerHTML'.
  - Paste the code into the Nu validator's text input. This appears when you select 'text input' from the 'Check by' dropdown.
  - Be sure to also then copy your page's <!DOCTYPE …>, as this is not copied for you.
Run the validator by pressing the 'Check' button.
Once the validation results have appeared, filter the results to display only WCAG-related issues by triggering the bookmarklet from your browser bookmarks.
A pop-up summary of the accessibility issues will appear. This summary is selectable and copyable in most browsers, which is handy for pasting into a report or bug tracker.

Bookmarklet code

You may prefer to install the bookmarklet by copying this JavaScript code into the URL of a bookmark in your browser:

javascript:(function(){javascript:(function(){var filters=["tag seen","Stray end tag","Bad start tag","violates nesting rules","Duplicate ID","Unclosed element","not allowed as child of element","unclosed elements","unquoted attribute value","Duplicate attribute","descendant of an element with the attribute"].join("|"),groups={"Duplicate ID":true},e,g,i,m,nT=0,nP1=0,r,rt,res=document.getElementById("results"),rP1={};if(!res){return;}res=res.getElementsByTagName("li");for(i=res.length-1;i>=0;i--){r=res[i];if(r.id.substr(0,3)==="vnu"){if(r.className!=="info"){nT=nT+1;}rt=""+r.textContent;rt=rt.substring(0,rt.indexOf('.'));m=rt.match(filters);if(m==null){r.style.display="none";r.className=r.className+"a11y-ignore";}else{e=rt.substr(7);g=m[0];if(groups.hasOwnProperty(g)){rP1[g]=rP1[g]||{};e=e.substr(g.length+1);rP1[g][e]=true;}else{rP1[e]=true;}nP1=nP1+1;}}}rt="";for(i in rP1){if(rP1.hasOwnProperty(i)){e=rP1[i];if(e===true){rt=rt+"- "+i+"\n";}else{rt=rt+"- "+i+"\n";for(m in e){if(e.hasOwnProperty(m)){rt=rt+"  + "+m+"\n";}}}}}alert(nT+" validation errors and warnings.\n"+nP1+" instances of errors known to create accessibility issues:\n"+rt);})();})();

Releases

v5, 23 Sep 2020 — Grouped error reports. Smaller bookmarklet code.
v4, 5 Feb 2018 — Improved rules for filtering results that affect accessibility according to WCAG 2.0 Success Criterion 4.1.1 Parsing. Thanks Steve Faulkner!
v3, 5 Feb 2018 — Reports the number of errors and warnings found affecting accessibility and describes errors by priority. No longer lists warnings.
v2, 8 Nov 2013 — Reports the number of errors and warnings found affecting accessibility and describes each.
v1, 17 Sep 2013 — Reports total number of errors and the number related to accessibility. Faster code.