WAI ARIA ist eine Technologie, die es Entwicklern ermöglicht, ihre Seiten besser für Nutzer von Screen Readern zugänglich zu machen.
Eine Einführung in WAI ARIA in deutscher Sprache
Eine Teilmenge von WAI ARIA, die landmark roles, hilft bei der Orientierung, indem typische Bereiche von Webseiten mit standardisierten Namen bezeichnet werden.
Ich habe landmark roles auf meinen Seiten eingesetzt. Für die Bereiche

• Kopf
• Suchformular
• Navigation, und
• Inhalt

Screen Reader können jetzt mit einem Tastenkürzel (NVDA: d, Jaws: ö) diese Bereiche anspringen. Die angesprungenen Bereiche werden mit standardisierten Namen angesagt. Diese Namen lauten im Falle meiner vier Bereiche

• Logo
• Suche
• Navigation, und
• Haupt

Das Anspringen der landmarks mit dem Screen Reader NVDA:


Download des Hörbeispiels (mp3 - 349 kB)

Das Einfügen von ARIA landmarks

Der HTML-Code hierfür lautet beispielsweise:
<div role="navigation">
Wollte man diesen Code manuell in alle Seiten einpflegen, dann könnte das in Arbeit ausarten. Wir machen uns einfach den Umstand zunutze, dass die betroffenen Bereiche ohnehin mit id-Attributen ausgezeichnet sind. Mit wenigen Zeilen JavaScript lässt sich ganz einfach zusätzlich zur id das jeweilige role-Attribut setzen.

function addARIARole(strID, strRole)
{
    // Find the element to add a role property to
    var objElement = document.getElementById(strID);
    if (objElement)
    {
        // Add the role property to the element
        objElement.setAttribute('role', strRole);
    }
}
function setupARIA()
{
// Add ARIA roles to the document
    addARIARole('inhalt', 'main');
    addARIARole('menu', 'navigation');
    addARIARole('suchform', 'search');
    addARIARole('headimg', 'banner');
}

Nun noch dafür sorgen, dass die Funktion setupARIA onload aufgerufen wird, und ohne viel Arbeit ist ein weiterer Schritt zur Barrierefreiheit getan.