The Accessibility Auditor Tool, HTML_CodeSniffer, was created by SquizLabs, the Research and Development side of Squiz, a New York City-based web design firm. Our copy of this tool has been vetted by the MAX Security Team, code brought inside and managed in MCM, and deployed on the MAX Assets server.
The tool is entirely client-side, and does not send any information over the network. It tests the page in place, and reports findings in the browser-based widget.
To install the Accessibility Auditor Tool, you will create a bookmarklet in your browser. Expand the section below for the browser you would like to use.
First, make sure the Favorites Bar is displayed in Internet Explorer. If it is not, right click in the header area, and select "Favorites Bar" from the context menu.
Once you can see the Favorites Bar, click the "Add to Favorites Bar" icon at the left side to add the current page to your Favorites Bar. You should see a new Favorite created in the Favorites Bar. This Favorite will be a placeholder which we'll modify to become the Accessibility Auditor bookmarklet.
Right click on the newly created Favorite, and select "Rename" from the context menu. When the Rename dialog appears, enter Accessibility Auditor as the new name.
Once the Favorite is renamed, right-click once more and select "Properties" from the context menu. When the Properties dialog appears, enter the following in the URL field, then click the OK button to save your changes.
javascript:(function() {var _p='//assets.max.gov/accessibility/html_codesniffer/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
First, make sure the Bookmarks Bar is displayed in Google Chrome. To do this, click the main menu, then go to "Bookmarks", and ensure that "Show bookmarks bar" is checked.
Once the Bookmarks Bar is displayed, right click on it to display the context menu, and select "Add page...".
When the "Edit Bookmark..." dialog appears, enter Accessibility Auditor as the new name. Enter the following in the URL field:
javascript:(function() {var _p='//assets.max.gov/accessibility/html_codesniffer/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
Click the "Save" button, and move the bookmark to a visible location on your Bookmarks Bar. Clicking the bookmark will now launch the Accessibility Auditor Tool.
In order to use the Accessibility Auditor Tool, click the bookmarklet you created above. This will launch the tool, which will appear as a dark grey widget in the browser pane.
The default standard used is the Web Content Accessibility Guidelines v2, Level AA. While this is a good target, it is often a good idea to work through issues from the less specific standards to the more specific or more difficult ones to meet. In order to change the standard you are auditing against, use the Standards dropdown to select a new choice, for example "Section 508".
You can use the toggle controls below each item type to include those in the report or not. To see the report, click the "View Report" button at the bottom.
When in the report view, items identified red and marked with a "!" are errors; items identified yellow and marked with a "~" are warnings. You can also use the left and right arrows at the bottom to view more pages of the report. To view more information on any item, you can click on it. This will display an item information pane.
The information pane shows what the error or warning is, including a code snippet from the page at the bottom, as well as which standard (for 508, the "Section" in the law, and for WCAG v2, the Principle and Techniques) is applicable to this item. Note that when using any of the WCAG2 standards, the Principle and Techniques sections are links that will open a new window or tab in your browser with further information on that Principle or Technique. Clicking the left or right arrows in the top-right corner will take you to the previous or next item in the report, respectively. Clicking the map pin icon next to "Code Snippet" will display the location of the issue on the page.
All MAX.gov applications are required to be assessed for accessibility (under Section 508 law) and any issues remediated in a timely fashion. As a MAX.gov engineer, you are expected to understand these expectations and ensure that the applications and application features you work on are as accessible as technically possible. This tool is intended to help you accomplish that task.
In addition, MAX.gov QA staff are expected to test for accessibility issues as part of the normal QA process, and capture any findings in MAX JIRA. This tool will help with that task as well.
The target compliance level for MAX.gov tools is the Web Content Accessibility Guidelines (WCAG) v2, Levels A and AA. Use of this tool to remediate your views until there are zero errors reported is not enough to ensure a fully accessible experience for persons with disabilities, however, the tool will help you to catch errors that cause difficulty for those persons, and therefore will move us closer to fully accessible experiences.