RemVee.blog

De accesskey eigenschap in HTML kan de gebruikers vriendelijkheid van een web-applicatie enorm verbeteren. Het probleem is alleen dat je in de meeste browsers niet kan zien dat er sneltoest beschikbaar is voor een element. Een elegante oplossing hiervoor is een stukje CSS2 te gebruiken zoals a:after{content:" [" attr(accesskey) "]"}. Helaas wordt deze constructie maar weinig ondersteund door browsers.

In een verloren uurtje heb ik een alternatieve oplossing gemaakt gebaseerd op JavaScript. Het onderstaande script doet twee dingen met een element met accesskey. Het voegt een title toe (tooltip) met daarin de toets combinatie. En, in het geval het element inline tekst bevat, wordt hier het eerste karakter opgezocht dat gelijk is aan de accesskey en deze omsloten door een span tag met als class shortcut zodat dat karakter te stylen valt.

function accesskeyTooltips() {
    var modifierKey = 'Alt-';
    if (navigator.userAgent.indexOf('Mac') != -1) modifierKey = 'Ctrl-';
    if (navigator.userAgent.indexOf('Opera') != -1) modifierKey = 'Shift-Esc-';

    var names = ['a', 'area', 'button', 'input', 'label', 'legend', 'textarea'];
    for (var i = 0; i < names.length; i++) {
        var tag = names[i];

        var nl = document.getElementsByTagName(tag);
        for (var j = 0; j < nl.length; j++) {
            var el = nl[j];
            if (!el.getAttribute('accesskey')) continue;

            // geef element een title
            var key = el.getAttribute('accesskey').toUpperCase();
            if (!el.getAttribute('title')) {
                el.setAttribute('title', modifierKey + key);
            }

            // klaar als element geen inline tekst bevat
            if (tag != 'a' && tag != 'label' && tag != 'legend') continue;

            // markeer karakter in label als aanwezig
            var inTag = false; var inEntity = false;
            var txt = el.innerHTML;
            for (var k = 0; k < txt.length; k++) {
                var c = txt.charAt(k);

                if (!inTag && !inEntity) {
                    if (c == '<') {
                        inTag = true;
                        continue;
                    }
                    if (c == '&') {
                        inEntity = true;
                        continue;
                    }

                    if (c.toUpperCase() == key) {
                        el.innerHTML = txt.substring(0, k) +
                            '<span class="shortcut">' + c + '</span>' +
                            txt.substring(k + 1);
                        break;
                    }
                }
                if (inTag && c == '>') inTag = false;
                if (inEntity && c == ';') inEntity = false;
            }
        }
    }
}

Zorg ervoor dat de accesskeyTooltips functie onload wordt uitgevoegd en alle elementen met sneltoets worden voorzien van de genoemde versieringen. Zie deze code in actie op de voorbeeld pagina.

Zie ook Accesskeys: Unlocking Hidden Navigation en Using accesskey attribute in HTML forms and links.