Intégrer BOSA Accessibility Check dans un site web

Context

L'outil BOSA Accessibility Check permet de vérifier l'accessibilité d'une page web d'un simple click. Il s'agit de définir un lien dans votre navigateur qui contient un petit bout de code JavaScript. 

L'ennui c'est quand on développe un nouveau site web, ou quand on encode du contenu, il est difficile de rigoureusement vérifier systématiquement chaque page à chaque changement.

L'idée ici est de voir comment reprendre ce JavaScript pour l'intégrer dans des environments de dévelopments.

Solution

Voici le snippet fournit par bosa:

javascript:(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';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);});})();

On peut donc sans problème supprimer javascript: et l'intégrer dans un DOM:

<script>
    (function() {var _p='//openfed.github.io/AccessibilityCheck/build/';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);});})();
</script>

Si vous intégrez cela dans un elasticms vous pouvez limiter le charger de cet outil uniquement en preview:

{% if 'preview' in trans_default_domain %}
    <script>
        (function() {var _p='//openfed.github.io/AccessibilityCheck/build/';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, show: { error: true, warning: false, notice: false }};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
    </script>
{% endif %}

Sinon il est aussi possible de vérifier le nom de domain directement en javascript (pour les sites statiques à priori):

    <script>
        if (["localhost", "mon-site.test.infra", "preview.mon-site.com"].includes(location.hostname)) {
            (function() {var _p='//openfed.github.io/AccessibilityCheck/build/';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, show: { error: true, warning: false, notice: false }};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
        }
    </script>

Configuration

Si vous voulez fine-tuner la config de l'outil voici le code proprement indenté:

<script>
    (function () {
        var _p = '//openfed.github.io/AccessibilityCheck/build/';
        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, 
            show: {
                error: true, 
                warning: false, 
                notice: false
            }
        };
        _i(_p + 'HTMLCS.js', function () {
            HTMLCSAuditor.run('WCAG2AA', null, options);
        });
    })();
</script>

Vous voyez comment ajuster le niveau WCAG. Et aussi comment definir quels erreurs afficher avec la variable show.