Préparation des logiciels pour la série de coaching pratiques d'une journée

Veuillez créer un billet au InfoService national Lien interne pour l’installation de Mozilla Firefox et de Color Contrast Analyser sur votre ordinateur afin de suivre les exercices pratiques.

Bookmarklets

Les Bookmarklets sont comme des modules complémentaires, mais ne nécessitent aucune installation et ne sont pas spécifiques à un navigateur.

(Si vous connaissez des signets utiles, n'hésitez pas à les ajouter ci-dessous)

Pour créer un bookmarklet:

1. À droite dans une barre d'outils, sélectionnez "Nouveau signet...".
2. Mettez le nom du bookmarklet dans le champ Nom (ex : Tota11y)
3. Mettez le Javascript dans le champ Emplacement.

Tota11y

Nom: 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);}})();

Ce qu'il fait

Il injecte un petit widget près du coin inférieur gauche de l'écran qui vous permet de vérifier les titres, le contraste, le texte des liens, les étiquettes, le texte alt des images, les points de repère et une "baguette de lecteur d'écran".

HTML_CodeSniffer

Nom: 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);});})();

Ce qu'il fait

Il exécute divers tests pour vérifier si <input>ont <label>s des problèmes de contraste de couleurs, des régions, etc.

Espacement du texte

Name: Espacement du texte

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);}})();

Ce qu'il fait

Ce bookmarklet est spécialement conçu pour WCAG 1.4.12: Text Spacing. (disponible seulement en anglais) Il fixe la hauteur des lignes (interligne) à 1,5 fois la taille de la police, l'espacement entre les paragraphes à 2 fois la taille de la police, l'espacement des lettres (suivi) à 0,12 fois la taille de la police et l'espacement des mots à au moins 0,16 fois la taille de la police.

Validateur HTML après l'exécution du Javascript

Nom: Valider après 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);})();

Ce qu'il fait

Il prend un instantané du DOM tel qu'il existe lorsque vous exécutez le bookmarklet et l'envoie au validateur W3C, qui affichera toutes les erreurs et tous les avertissements.

Filtrer les exigences non liées à la norme 4.1.1

Nom: Valider 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.")})();

Ce qu'il fait

Après avoir exécuté le bookmarklet ci-dessus, exécutez celui-ci pour filtrer les erreurs de validation qui ne concernent pas les WCAG 4.1.1 - Parsing.

Filtrer les exigences non-4.1.1 avec compteur supprimé

Name: Valider 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.")})();

Ce qu'il fait

C'est la même chose que la précédente, mais la dernière a une fonction alert que je trouve ennuyeuse. Celle-ci convertit alert en un console.log donc le compte est toujours là si vous avez besoin de le voir.

ANDI (Accessible Name & Description Inspector) est développé par l'administration de la sécurité sociale aux États-Unis.

Nom: ANDI

Location:

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

Ce qu'il fait

Il indique l'ordre des onglets, les balises d'étiquetage, les éléments focalisables, les informations sur les images, les informations sur les liens, les informations sur la structure du document, les informations sur le contraste et certaines informations sur les éléments cachés.