Greasy Fork is available in English.

A11y

Test for assessibility problems

// ==UserScript==
// @name         A11y
// @namespace    assessibility.colivre.org
// @version      0.3
// @description  Test for assessibility problems
// @author       Aurélio A. Heckert
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Test if element has acessibility problems
    // If there is a problem, call `notify(el, <ERROR|WARN>, '<description string>')`
    function testA11yEl(el) {
        var id = el.id

        if (el.tagName == 'IMG' && emptyVal(el.alt) && emptyVal(el.title))
            notify(el, ERROR, 'Image without alt text.', 'https://www.w3.org/WAI/tutorials/images/');

        if (el.tagName == 'A' && noText(el))
            notify(el, ERROR, 'Link without text.');

        if (el.tagName == 'BUTTON' && noText(el))
            notify(el, ERROR, 'Button without text.');

        if (el.tagName.match(/^H[0-9]$/) && noText(el))
            notify(el, ERROR, `Heading ${el.tagName} without text.`);

        if (el.tagName.match(/^H[0-9]$/) && el.nextSibling &&
            el.nextSibling.tagName &&    // The next tag are united to this.
            el.nextSibling.tagName.match(/^H[0-9]$/))
            notify(el, WARN, `Skipping heading ${el.tagName}.`, 'https://www.w3.org/WAI/tutorials/page-structure/headings#heading-ranks');

        if (el.tagName.match(/^H[0-9]$/) && el.nextSibling && el.nextElementSibling &&
            el.nextSibling.constructor == Text && el.nextSibling.textContent.match(/^\s*$/) && // has no text between, only space.
            el.nextElementSibling.tagName.match(/^H[0-9]$/))
            notify(el, WARN, `Skipping heading ${el.tagName}.`, 'https://www.w3.org/WAI/tutorials/page-structure/headings#heading-ranks');

        if (el.tagName.match(/INPUT|TEXTAREA|SELECT/)    &&
             !(el.type=='submit' && !emptyVal(el.value)) &&
             !(el.type=='hidden')                        &&
             !(
               findAncestor(el, (a)=>a.tagName == 'LABEL') /* it is children of a <label> */ ||
               (id && document.querySelector(`label[for=${id}]`)) /* a <label> points to it */
             )
           )
            notify(el, ERROR, `Formfield ${el.tagName} without label.`, 'http://webaim.org/standards/508/checklist#standardn');

    }

    function noText(el) {
        var imgs = []
        imgs.push.apply(imgs, el.querySelectorAll('img'));
        return emptyVal(el) && emptyVal(el.title) && emptyVal(imgs.map((img)=> img.alt).join(''))
    }

    function findAncestor(el, matchFunc) {
        while (el = el.parentNode) {
            if (matchFunc(el)) return el;
        }
        return null;
    }

    var elements = [];
    var a11yBox, a11yList, pointer;
    const ERROR = 'ERROR';
    const WARN  = 'WARN';
    const BOXID = 'a11y-userscript-box';

    const $ = function(query) { return document.querySelector(query) };
    const $$ = function(query) { return document.querySelectorAll(query) };

    function emptyVal(val) {
        if (typeof(val) == 'string') val = val.replace(/\s/g, '');
        return typeof(val) == 'undefined' || val == null || val.length == 0
    }

    function mk(tag, attrs) {
        tag = document.createElement(tag);
        for (var attName in attrs) {
            var attVal = attrs[attName];
            if (attName == 'children') attVal.forEach(([t,a])=> {
                mk(t, Object.assign(a, {parent: tag}));
            });
            else if (attName == 'parent') attVal.appendChild(tag);
            else if (attName == 'text') tag.innerText = attVal;
            else if (attName == 'html') tag.innerHTML = attVal;
            else if (attName.match(/^on/)) tag[attName] = attVal;
            else tag.setAttribute(attName, attVal);
        }
        return tag;
    }

    function buildA11yBox() {
        a11yBox = mk('div', {
            parent: document.body,
            id: BOXID,
            class: BOXID+'-toggle-min',
            children: [
                ['i',{ id: BOXID+'-toggle-min-bt', onclick: toggleMin }]
            ]
        });
        a11yList = mk('ul', {parent: a11yBox});
        mk('style', {
            parent: document.documentElement.firstElementChild,
            html: `
                #${BOXID} {position: fixed; bottom: 0; right: 0; background: rgba(255,255,255,0.7); z-index: 99999; opacity: 1;
                    box-shadow: 0 0 30px rgba(0,0,0,0.6); padding: 15px; border-radius: 15px 0 0 0; color: #000}
                #${BOXID}-toggle-min-bt::before {content: "\\00d7"; position: absolute; top: 2px; left: 2px;
                    display: block; text-align: center; border: 1px solid #CCC; border-radius: 30px;
                    font-size: 24px; line-height: 24px; width: 24px; background: #EEE; cursor: pointer}
                #${BOXID} ul {margin: 0; padding: 0; border: 1px solid rgba(0,0,0,0.2);
                    border-top:none; max-height: 90vh; overflow: auto}
                #${BOXID} li {margin: 0; padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1); list-style: none; cursor: pointer}
                .${BOXID}-toggle-min {opacity: 40%}
                .${BOXID}-toggle-min ul {display: none}
                .${BOXID}-ERROR {background: rgba(255,200,200,0.8)}
                .${BOXID}-WARN  {background: rgba(255,250,200,0.8)}
                #${BOXID} li span { font-size: 70%; padding-right: 1em }
                #${BOXID} li p { display: inline; margin: 0 }
                #${BOXID} li a { display: inline-block; margin: 0 0 0 3px; padding: 1px 2px; text-decoration: none;
                    border: 1px solid rgba(0,0,0,0.2); border-radius: 3px; color: #000 }
                #${BOXID}-pointer { position: absolute; left: -1000px; z-index: 99990;
                    border: 2px dashed #FFF; box-shadow: 0 0 110px 25px rgba(0,0,0,0.6) }
                #${BOXID}-pointer i { position: absolute; color: red; text-shadow: 1px 1px 1px #000, 0 0 8px #000;
                    font-size: 90px; line-height: 90px; text-align: center }
                #${BOXID}-pointer-N { top: -90px; width: 100% }
                #${BOXID}-pointer-S { bottom: -90px; width: 100% }
                #${BOXID}-pointer-W { left: -90px }
                #${BOXID}-pointer-E { right: -90px }
            `
        });
        pointer = mk('div', {
            parent: document.body,
            id: BOXID+'-pointer',
            children: [
                ['i', {id: BOXID+'-pointer-N', text: '↓'}],
                ['i', {id: BOXID+'-pointer-S', text: '↑'}],
                ['i', {id: BOXID+'-pointer-W', text: '→'}],
                ['i', {id: BOXID+'-pointer-E', text: '←'}]
            ]
        });
    }

    function toggleMin() {
        a11yBox.className = (a11yBox.className.length > 0)? '' : BOXID+'-toggle-min';
    }

    function notificationClick(notification, el) {
        var rect = el.getBoundingClientRect();
        var x = parseInt(rect.left + window.pageXOffset - 2);
        var y = parseInt(rect.top + window.pageYOffset - 2);
        var w = parseInt(rect.width + 4);
        var h = parseInt(rect.height + 4);
        pointer.style.left = x + 'px';
        pointer.style.top = y + 'px';
        pointer.style.width = w + 'px';
        pointer.style.height = h + 'px';
        $('#'+BOXID+'-pointer-W').style.lineHeight = h + 'px';
        $('#'+BOXID+'-pointer-E').style.lineHeight = h + 'px';
        window.scrollTo(parseInt(x-screen.width/4), parseInt(y-screen.height/4));
        console.log(el);
    }

    function notify(el, type, message, helpURL) {
        if (!a11yBox) buildA11yBox();
        if (elements.filter((reg)=> reg.el==el && reg.message==message).length > 0) return;
        elements.push({ el, message });
        var li = mk('li', {
            parent: a11yList,
            class: BOXID+'-'+type,
            onclick: ()=> notificationClick(this, el),
            children: [
                ['span', {text: type}],
                ['p', {text: message}],
            ]
        });
        if (helpURL) mk('a', {
            href: helpURL,
            target: '_blank',
            text: 'help',
            parent: li
        });
    }

    function walk(el) {
        if (el.id == BOXID) return;
        testA11yEl(el);
        for (var e,i=0; e=el.children[i]; i++) ((e)=> setTimeout(()=> walk(e), 1))(e);
    }

    function testPage() {
        console.log('testing page...');
        walk(document.body);
    }

    testPage();
    setInterval(testPage, 15000);
})();