Software readiness for Full-day Hands-on Coaching series

Please create a ticket with National Service Desk Internal link site to get Mozilla Firefox and Color Contrast Analyser installed on your computer to follow the hands-on exercises.

Firefox Add-ons

All from the Mozilla Add-on Hosting site (AMO) unless otherwise noted: (Note: some of these may be blocked as of May, 2020.)

• The Complex table markup
  • For analyzing <table> markup, cell/heading association, etc.

• Empty Cache Button
  • For clearning your cache. Helpful for when you need to log in and out of sites.

• WAVE
  • Shows a plethora of accessibility issues including, but not limited to orphaned <label>s, <input>s without <label>s, skipped heading levels, page structure, possible contrast issues, aria-live regions, etc.

• Web Developer Toolbar
  • A great add-on for inspecting pages and their HTML contents, turning CSS on and off, limiting CSS sheets, turning JavaScript on and off, cookie management, etc.

Bookmarklets

Bookmarklets are like add-ons, but require no installation and are not browser-specific.

(If you know of any useful bookmarks, feel free to add them below)

To create a bookmarklet:

1. Right in a toolbar and select "New bookmark..."
2. Put the name of the bookmarklet in the Name field (ex: Tota11y)
3. Put the Javascript in the Location field.

Tota11y

Name: Tota11y

Location:

    javascript:(function(){var%20tota11y,tota11ytoolbar=null;var%20tota11ysheets=[];tota11y=document.getElementById('tota11y');if(tota11y){tota11y.parentNode.removeChild(tota11y);tota11ytoolbar=document.getElementById('tota11y-toolbar');tota11ytoolbar.parentNode.removeChild(tota11ytoolbar);tota11ysheets=document.getElementsByTagName("style");for(var%20i=tota11ysheets.length-1;i>=0;i--){if(tota11ysheets[i].innerHTML.match(/tota11y/)){tota11ysheets[i].parentNode.removeChild(tota11ysheets[i]);}}}else{tota11y=document.createElement('SCRIPT');tota11y.id='tota11y';tota11y.type='text/javascript';tota11y.src='//khan.github.io/tota11y/dist/tota11y.min.js';document.getElementsByTagName('head')[0].appendChild(tota11y);}})();
    

What it does

It injects a little widget near the bottom-left corner of the screen allowing you to check headings, contrast, link text, labels, image alt-text, landmarks, and a "screen reader wand".

HTML_CodeSniffer

Name: HTML_CodeSniffer

Location:

    javascript:(function()%20{var%20_p='//squizlabs.github.io/HTML_CodeSniffer/build/';var%20_i=function(s,cb)%20{var%20sc=document.createElement('script');sc.onload%20=%20function()%20{sc.onload%20=%20null;sc.onreadystatechange%20=%20null;cb.call(this);};sc.onreadystatechange%20=%20function(){if(/^(complete|loaded)$/.test(this.readyState)%20===%20true){sc.onreadystatechange%20=%20null;sc.onload();}};sc.src=s;if%20(document.head)%20{document.head.appendChild(sc);}%20else%20{document.getElementsByTagName('head')[0].appendChild(sc);}};%20var%20options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
    

What it does

It runs various tests checking for if <input>s have <label>s colour contrast issues, regions, etc.

Text Spacing

Name: Text Spacing

Location:

    javascript:(function(){var%20caput=document.getElementsByTagName(%27head%27);var%20spacingStyleName=%27spacingStyle%27;var%20style=null;style=document.getElementById(spacingStyleName);if(style){caput[0].removeChild(style);}else{style=document.createElement(%27style%27),style.setAttribute(%27id%27,spacingStyleName);styleContent=document.createTextNode(%27*%20{%20line-height:%201.5%20!important;%20letter-spacing:%200.12em%20!important;%20word-spacing:%200.16em%20!important;%20}%20p{%20margin-bottom:%202em%20!important;%20}%20%27);style.appendChild(styleContent);caput[0].appendChild(style);}})();
    

What it does

This bookmarklet is specifically for WCAG 1.4.12: Text Spacing. It sets the line height (line spacing) to be 1.5 times the font size, spacing following paragraphs to be 2 times the font size, letter spacing (tracking) to 0.12 times the font size, and word spacing at least .16 times the font size.

HTML Validator after Javascript Execution

Name: Validate After JS

Location:

    javascript:(function(){function%20c(a,b){var%20c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var%20e=function(a){for(var%20b="",a=a.firstChild;a;){switch(a.nodeType){case%20Node.ELEMENT_NODE:b+=a.outerHTML;break;case%20Node.TEXT_NODE:b+=a.nodeValue;break;case%20Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case%20Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case%20Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE%20"+a.name+">\n"}a=a.nextSibling}return%20b}(document),d=document.createElement("form");d.method="POST";d.action="https://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("content",e);document.body.appendChild(d);d.submit();d.parentNode.removeChild(d);})();
    

What it does

It takes a snapshop of the DOM as it exists when you run the bookmarklet and sends it to the W3C validator, which will show all errors and warnings.

Filter out non-4.1.1 requirements

Name: Validate 4.1.1

Location:

    javascript:(function(){var%20removeNg=true;var%20filterStrings=["tag%20seen","Stray%20end%20tag","Bad%20start%20tag","violates%20nesting%20rules","Duplicate%20ID","first%20occurrence%20of%20ID","Unclosed%20element","not%20allowed%20as%20child%20of%20element","unclosed%20elements","not%20allowed%20on%20element","unquoted%20attribute%20value","Duplicate%20attribute","An%20ID%20must%20not%20contain%20whitespace"];var%20filterRE,root,results,result,resultText,i,cnt=0;filterRE=filterStrings.join("|");root=document.getElementById("results");if(!root){alert("No%20results%20container%20found.");return}results=root.getElementsByTagName("li");for(i=0;i<results.length;i++){result=results[i];if(result.className!==""){resultText=(result.innerText!==undefined?result.innerText:result.textContent)+"";if(resultText.match(filterRE)===null){result.style.display="none";result.className=result.className+"%20steveNoLike";cnt++}else%20if(removeNg==true){if(resultText.indexOf("not%20allowed%20on%20element")!==-1){var%20newAttrib=result.getElementsByTagName("code");newAttrib=(newAttrib[0].innerText!==undefined?newAttrib[0].innerText:newAttrib[0].textContent);var%20newAttribPart=result.getElementsByTagName("b");newAttribPart=(newAttribPart[0].innerText!==undefined?newAttribPart[0].innerText:newAttrib[0].textContent);var%20newAttribRE=new%20RegExp(newAttrib+"\\s\*=");if(newAttribRE.test(newAttribPart)){result.style.display="none";result.className=result.className+"%20steveNoLike";cnt++;}}}}}alert("Complete. "+cnt+" items removed.")})();
    

What it does

After running the above bookmarklet, run this one to filter out validation errors that don't pertain to WCAG 4.1.1 - Parsing.

Filter out non-4.1.1 requirements With Counter Removed

Name: Validate 4.1.1

Location:

    javascript:(function(){var%20removeNg=true;var%20filterStrings=["tag%20seen","Stray%20end%20tag","Bad%20start%20tag","violates%20nesting%20rules","Duplicate%20ID","first%20occurrence%20of%20ID","Unclosed%20element","not%20allowed%20as%20child%20of%20element","unclosed%20elements","not%20allowed%20on%20element","unquoted%20attribute%20value","Duplicate%20attribute","An%20ID%20must%20not%20contain%20whitespace"];var%20filterRE,root,results,result,resultText,i,cnt=0;filterRE=filterStrings.join("|");root=document.getElementById("results");if(!root){alert("No%20results%20container%20found.");return}results=root.getElementsByTagName("li");for(i=0;i<results.length;i++){result=results[i];if(result.className!==""){resultText=(result.innerText!==undefined?result.innerText:result.textContent)+"";if(resultText.match(filterRE)===null){result.style.display="none";result.className=result.className+"%20steveNoLike";cnt++}else%20if(removeNg==true){if(resultText.indexOf("not%20allowed%20on%20element")!==-1){var%20newAttrib=result.getElementsByTagName("code");newAttrib=(newAttrib[0].innerText!==undefined?newAttrib[0].innerText:newAttrib[0].textContent);var%20newAttribPart=result.getElementsByTagName("b");newAttribPart=(newAttribPart[0].innerText!==undefined?newAttribPart[0].innerText:newAttrib[0].textContent);var%20newAttribRE=new%20RegExp(newAttrib+"\\s\*=");if(newAttribRE.test(newAttribPart)){result.style.display="none";result.className=result.className+"%20steveNoLike";cnt++;}}}}}console.log("Complete. "+cnt+" items removed.")})();
    

What it does

This is the same as the last one, but the last one has an alert which I find to be annoying. This one converts thatalert to a console.log so the count is still there if you need to see it.

ANDI (Accessible Name & Description Inspector) is developed by the Social Security Administration in the US.

Name: ANDI

Location:

    javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());
    

What it does

It shows tab order, label tags, focusable elements, image information, link information, document structure information, contrast information, and some information on hidden elements.

ANDI (Accessible Name & Description Inspector) is developed by the Social Security Administration in the US.

Name: ANDI

Location:

javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());

What it does

It shows tab order, label tags, focusable elements, image information, link information, document structure information, contrast information, and some information on hidden elements.