Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

WAI ARIA landmark roles

Mittwoch, 5. Mai 2010

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 mp3AudioDownload 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.



3 Kommentare

  1. Super, danke für deinen wertvollen Input!

    Kommentar von Martin — Mittwoch, 5. Mai 2010 - 21:08 Uhr

  2. Hallo Fritz,

    herzlich willkommen im Club der WAI ARIA-Anwender mittels JavaScript (siehe hierzu auch http://www.webseiten-infos.de/wai-aria-und-xhtml-validieren/ und http://www.webseiten-infos.de/landmark-roles-auf-webseiten-infos-de/ ). ;-)

    Deine Lösung erscheint mir eleganter, da sie auf schon bestehende id aufsetzt.

    Beste Grüße
    Dieter

    Kommentar von Dieter (Webseiten-Infos.de) — Mittwoch, 5. Mai 2010 - 23:03 Uhr

  3. I think the WAI-ARIA is a nice technology, which allows developers to make their sites better for users. Also thanks for sharing the code here. It was an informative article has been shared here and was worth reading. I have also downloaded the mp3 file that you have shared here.

    Kommentar von Justu — Donnerstag, 16. Januar 2014 - 8:56 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE