7 Gründe Wai-Aria Landmarks sofort einzusetzen

von Timo Wirth / 19. April 2009 / Tags: , , ,

fernsehturmVon weitem schon erkennbar: Aria-Landmarks schaffen neue Orientierungspunkte für die Website. Warum es sich lohnt, sie bereits jetzt einzusetzen.

Skip-Link: Direkt zu den Gründen

Für Einsteiger: Was sind Aria-Landmarks?

Landmarks funktionieren wie markante Punkte in einer Stadt: Der Fernsehturm, die Siegessäule, die Oberbaumbrücke. Sie sind von weitem erkennbar und schaffen Orientierung. Aria-Landmarks sind Bestandteil der technischen Spezifikation Wai-Aria. Aria steht für Accessible Rich Internet Applications und wurden von der Web Accessibility Initiative (WAI) entwickelt. Aria sind semantische Erweiterungen, die als Attribute von HTML-Elementen ins HTML geschrieben werden. Diese Erweiterungen kommunizieren Funktionen, Beziehungen, Zustände und Rollen von Elementen. Aria sind primär dafür da, dynamische Inhalte und komplexe Applikationen für Screenreader leichter nutzbar bzw. überhaupt nutzbar zu machen.

[WAI-Aria] allow web pages (or portions of pages) to declare themselves as applications rather than as static documents, by adding role, property, and state information to dynamic web applications. Wikipedia

Für blinde Menschen ist beispielsweise nicht sofort klar, wie ein Schieberegler funktioniert, ein Karussell sich dreht oder wie viele Zeichen der 140 bei Twitter noch zur Verfügung stehen. Denn blinde Menschen können nicht mehrere Bereiche einer Seite im Blick haben, sondern bekommen alles linear vorgelesen. Außerdem machen Arias applikationsartige Navigationsmenüs überhaupt erst nutzbar, indem sie eine komfortable Bedienung per Tastatur ermöglichen.

Aria machen es sich zu nutze, dass Screenreader mit weitaus komplexeren Menüs und Eingabemechanismen umgehen als diejenigen, die wir bislang im Web kennen. Denn Screenreader werden nicht nur zum Surfen im Web genutzt, sondern sind dafür gebaut, um Betriebssysteme und komplexe Programme zu steuern.

Aria sind aber nicht nur bei dynamischen oder mit Ajax-gespeisten Modulen nützlich, bei denen die Aria-Attribute dynamisch per Javascript ins HTML geschrieben werden. Mit Aria-Landmarks besteht durch das Attribut role eine neue Möglichkeit, dem statischen HTML-Dokument mehr Bedeutung zu verleihen.

Mehr Semantik durch Landmarks

Mit Aria-Landmarks kann jede statische Website besser strukturiert werden. Aria-Landmarks werten das HTML auf und erhöhen dessen Informationswert. Mit Landmarks kann die Rolle eines Elements genauer beschrieben werden (Welche Funktion übernimmt es?).

Nimmt man ein <div>. Ein <div> ist erstmal ein neutraler Container, der vieles beinhalten kann: Einen Artikel, die Navigation, den Kopf der Website mit Logo etc. oder er dient reinen Designzwecken.

Bislang konnte einem HTML-Element nur mittels gut formulierter Klassennamen und IDs eine zusätzliche Behelfs-Semantik verliehen werden, wie <div id="nav"> oder <div id="main">. Zwar sind semantische Klassennamen und IDs sehr wichtig wichtig, um HTML-Dokumenten eine systematische und leicht verstehbare Struktur zu verleihen, doch diese nützen nur Webentwicklern etwas (sieht man von Microformats ab, die auf eine Konvention von Klassennamen beruhen).

Screenreader können mit semantischen IDs nicht viel anfangen. Mit Rollenangaben hingegen schon. (Liste der Rollen siehe unten Grund 5 Es ist einfach). Ist eine Seite mit Aria-Landmarks versehen, ist sie für blinde Menschen klar strukturiert. Sie erkennen viel leichter, wo sich Navigationselemente, Hauptinhalt oder Infos zu Copyright etc. befinden und können sofort zu den gewünschten Bereichen springen.

Auch mit Blick auf Suchmaschinen wird der Code zukunftsfähiger: Google könnte beispielsweise die Inhalte einer Website aufgrund von Landmarks besser und zielgenauer indexieren.

7 Gründe, warum es sich lohnt, Aria-Landmarks sofort einzusetzen

1) Es ist semantisch.

Landmarks erhöhen die Bedeutung des Markups. So können beispielsweise Navigationsleisten nicht nur als Listen ausgezeichnet, sondern durch das Rollen-Attribut klar als Navigation markiert werden.
<ul id="nav" role="navigation">
Ergebnis: Besser strukturierte Inhalte.

2) Es funktioniert.

Moderne Browser und moderne Screenreader verstehen Landmarks schon jetzt sehr gut. Und die noch bessere Nachricht: Auch Internet Explorer 8 unterstützt Aria.

3) Es macht nichts kaputt.

Wenn Browser oder Screenreader die Angaben nicht verstehen, werden sie ignoriert. Optisch wie auch akustisch passiert nichts.

4) Es hilft.

Für blinde Menschen verbessert sich Benutzerführung und Orientierung immens, da sie Abschnitte wie Navigation, Suche oder Hauptinhalt jederzeit ansteuern können. Zudem ist ihnen sofort der Bereich der Seite klar, in dem sie sich gerade befinden. (Bin ich noch oben im Kopf, im Hauptinhalt oder bereits in Randspalte?). Zum nächsten Abschnitt können sie per Tastaturbefehl springen.

Noch nicht alle Screenreader unterstützen Aria Landmarks. Eine Übersicht findet sich hier: Welche Screenreader wie Landmarks unterstützen: Aria Landmark Role Tests.

5) Es ist einfach.

Die Landmarks lassen sich einfach durch das role-Attribut einem div- oder ul-Element hinzufügen. Zum Beispiel:
<ul id="nav" role="navigation">. Das ist alles.

Es existieren momentan, die folgenden Aria-Landmarks:

article

A section of a page consisting of an independent part of a document, page, or site. An article could be a forum post, a magazine or newspaper article, a web log entry, a user-submitted comment, or any other independent item of content. — W3C

Im einfachsten Fall ein Artikel oder Blogeintrag. Aber auch schon ein Kommentar kann mit role=”article” markiert werden. Wichtig dabei ist, dass der Inhalt aus sich heraus verständlich ist. Mehrere Elemente mit der Rolle article können ineinander verschachtelt werden.

banner

Hiermit ist keine Werbung gemeint. Banner wird im ursprünglichen Sinn verwendet: Der Kopf oder das Spruchband der Website mit Titel, Logo, Claim etc.

complementary

A supporting section of the document that remains meaningful even when separated from the main content. — W3C

Zusatzinfos, die den Hauptinhalt unterstützen können und ohne Bezug auf diesen verständlich sind.

contentinfo

Metadata that applies to the parent document. For example, footnotes, copyrights, and links to privacy statements would belong here. — W3C

Metadaten zum Dokument oder zum Verfasser: Fußnoten, Copyright etc. Im engeren Sinne gehören Infos zum Autor, Datum und Tags ebenso zu Contentinfo.

main

Der Hauptinhalt.

navigation

A collection of navigational elements (usually links) for navigating the document or related documents. — W3C

Wird in erster Linie für Haupt- und Unternavigationsmenüs eingesetzt. Könnte im weitesten Sinne auch für einen A-Z-Index, Inhaltsverzeichnis und eine Thema-Linkliste mit internen Links eingesetzt werden, aber nicht automatisch für alle Linklisten.

search

Die Suchfunktion.

6) Es hat immer noch einen Hauch von Illegalität.

Zwar sind Aria-Landmarks nicht mehr völlig neuartig oder “illegal”, wie Joe Clark anmerkte. Mittlerweile existieren WC3-Working-Drafts (gerade wurde der last call verlängert), dennoch validieren sie nicht mit einem HTML 4 oder XHTML-1-Doctype.

7) Es gibt einem ein gutes Gefühl.

Durch den Einsatz von Aria-Landmarks tut man gleichzeitig etwas Gutes und ist Vorreiter.

Lesepaket zu Aria und Landmarks:

Ein guter Grund, Aria-Landmarks nicht zu verwenden:

Validität: HTML 4 und XHTML validieren nicht mit Landmarks.

Lösung 1: Den folgenden Doctype verwenden:
<!DOCTYPE html>
Der WC3-Validator prüft nach HTML5. Landmarks sind gültiger Teil davon. Außerdem sorgt dieser Doctype dafür, dass sich Browser im strict-Modus befinden. Nachteil: Validierungstools im Browser (wie HTML Validator Extension für Firefox) weisen weiter die Landmarks als Fehler aus.

Lösung 2: DTD für XHTML erweitern. Ein Feature von XHTML, dafür steht auch das X (= extensible / erweiterbar). So geht’s:
Validating WAI-ARIA in HTML and XHTML

Lösung 3 - ganz frisch: XHTML-Doctype beibehalten und den W3C-Validator Standalone für Mac mit XHTML plus Aria-Modus verwenden. Hoffentlich zieht das W3C bald offiziell nach.

Lösung 4: Landmarks per Javascript einfügen. Patterns for WAI-ARIA landmark roles in existing HTML

P.S. Nicht wundern, bei Vorsprung sind noch keine Landmarks zu finden. Ein Relaunch kommt - bald.

# 140 Zeichen Follow Vorsprung on Twitter @javajim #

22 Kommentare »

  1. [...] Weiterlesen [...]

    Pingback von 7 Gründe Wai-Aria Landmarks sofort einzusetzen / Design, Webdesign / Seraph Design Solutions // Webdesign, Printdesign, Leveldesign // Portfolio von Benjamin Schulz — 19.04.2009, 19:45 Uhr

  2. Interessanter Artikel! Hatte vorher noch nichts von WAI-Aria gehört. Werde es bei meinen neuen Arbeiten berücksichtigen.

    Comment von Benjamin Schulz — 19.04.2009, 19:52 Uhr

  3. Mal schnell eingefügt :-)

    Comment von Michel — 19.04.2009, 20:52 Uhr

  4. [...] Vorsprung durch Webstandards | 7 Gründe Wai-Aria Landmarks sofort einzusetzen - Da ich eh schon HTML5 nutze (weil privat & lassmichdoch ;) ) werd ich das zukünftig mit einbinden. Kann ja nicht schaden & macht Seiten ein kleines bißchen semantischer. [...]

    Pingback von Gefunden bis zum 23. April 2009 - bertdesign.de — 23.04.2009, 11:00 Uhr

  5. [...] durch Webstandards: 7 Gründe Wai-Aria Landmarks sofort einzusetzen [...]

    Pingback von Technikwürze - Web Standards Podcast » Blog Archive » Technikwürze 134 - Drei Mal D, E und Verlosung — 28.04.2009, 07:27 Uhr


  6. Der WC3-Validator prüft nach HTML5. Landmarks sind gültiger Teil davon. Außerdem sorgt dieser Doctype dafür, dass sich Browser im strict-Modus befinden.”

    Und dennoch bemängelt der Validator die Werte für das Attribut “role” als “Bad Value”.

    Muss man da noch zusätzlich was beachten, oder sollte man das ignorieren?

    Comment von David — 28.04.2009, 18:48 Uhr

  7. [...] ganz. Wenn du noch mehr Semantik rein bringen mchtest, setze dich mal mit wai-aria auseinander: 7 Grnde wai-aria Landmarks sofort einzusetzen Ein Sikplink, der die Navi und die Infospalte berspringt und gleich zum Inhalt fhrt, knnte [...]

    Pingback von Anonym — 14.05.2009, 12:23 Uhr

  8. [...] stehenden, interessanten Artikel über Aria Landmarks möchte ich aber an dieser Stelle verweisen: vorsprungdurchwebstandards.de | 7-gruende-wai-aria-landmarks-sofort-einzusetzen Lohnt sich mal [...]

    Pingback von Frische-zitronen.de | Webdesign | Barrierefreie, semantische Webseite mit Aria Landmarks — 12.07.2009, 21:21 Uhr

  9. [...] der anderen Seite gibt es die schönen WAI-Aria-Landmarks, welche bereits von allen aktuellen Browsern (inkl. IE8) unterstützt werden und die korrekte [...]

    Pingback von protofunc() » Meinung zu HTML5 — 16.08.2009, 19:45 Uhr

  10. [...] eingebaut (find ich ne tolle sache [...]

    Pingback von Anonym — 26.11.2009, 19:18 Uhr

  11. [...] man aber bereits ein­set­zen kann sind WAI-ARIA-Landmarks, Gründe dazu fin­den sich bei Vor­sprung durch Web­stan­dards: Mit Aria-Landmarks kann jede sta­ti­sche Web­site bes­ser struk­tu­riert wer­den. [...]

    Pingback von Wie man CSS3 und HTML5 schon nutzen kann | bertdesign.de — 10.01.2010, 18:26 Uhr

  12. [...] Rollen (landmark roles) validiert (siehe hierzu die Lösungsvorschläge am Ende des Artikels “7 Gründe Wai-Aria Landmarks sofort einzusetzen” von Timo [...]

    Pingback von WAI-ARIA und (X)HTML validieren! | Webseiten-Infos.de — 20.02.2010, 17:42 Uhr

  13. Informativer Artikel. Könnte mir auch vorstellen, das Webseiten mit WAI-Aria zukünftig bei Suchmaschinen besser ranken.
    Aufgrund dieser verbesserten Strukturierung im Html Quelltext.

    Comment von Bärbel Loy — 31.07.2010, 09:26 Uhr

  14. [...] DTD fr XHTML erweitern? Auf Vorsprung durch Webstandards | 7 Grnde Wai-Aria Landmarks sofort einzusetzen wird erwhnt, dass man die DTD fr XHTML erweitern knne um eine Seite, die WAI-Aria-Landmarks [...]

    Pingback von WAI-Aria-Landmarks: DTD fr XHTML erweitern? - XHTMLforum — 20.09.2010, 10:33 Uhr

  15. [...] Update: Was ist Wai-Aria? Aria steht für Accessible Rich Internet Applications und wurden von der Web Accessibility Initiative (WAI) entwickelt. Aria sind semantische Erweiterungen, die als Attribute von HTML-Elementen ins HTML geschrieben werden. Diese Erweiterungen kommunizieren Funktionen, Beziehungen, Zustände und Rollen von Elementen. Aria sind primär dafür da, dynamische Inhalte und komplexe Applikationen für Screenreader leichter nutzbar bzw. überhaupt nutzbar zu machen. Mehr zu Wai-Aria und Aria-Landmarks [...]

    Pingback von Mit Spaß und Barrierefreiheit « Aperto-Blog — 02.12.2010, 12:41 Uhr

  16. [...] ganzen Artikel über Aria-Landmarks können Sie hier [...]

    Pingback von Valides HTML | Blog von azorvida-web-design — 07.01.2011, 12:16 Uhr

  17. [...] [...]

    Pingback von role-Attribute in einer Navigation - XHTMLforum — 20.12.2011, 19:47 Uhr

  18. [...] eh nur einsetzen, wenn es sich nicht vermeiden lt. Eine gute Mglichkeit ist z.B. die divs mit dem role-Attribut anzureichern, hier noch ein Artikel dazu. Damit ttest du auch einiges fr Barrierefreiheit. [...]

    Pingback von Chat-Thread - Seite 2087 - XHTMLforum — 12.09.2012, 10:01 Uhr

  19. Ich hatte vorher noch nie was über WAI Aria gehört. Dein Artikel ist sehr interessant und Informativ.

    Vielen Dank für deine Mühen

    Comment von VVK — 03.12.2012, 22:38 Uhr

  20. alert(”XSS Erfolgreich”);

    Comment von test — 22.08.2013, 18:01 Uhr

  21. “läs mer här”…

    “[...]w Youre so cool! I dont suppose Ive read anything in this way before. So nice e8[...]“…

    Trackback von "läs mer här" — 18.09.2013, 14:21 Uhr

  22. “inquiry”…

    “[...]3 Hey. Very cool site!! Man .. Excellent .. Superb .. Ill bookmark this site hj[...]“…

    Trackback von "inquiry" — 28.10.2013, 22:22 Uhr

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URL

Kommentar schreiben




Suche

About

"Vorsprung durch Webstandards" ist ein Webzine zu Webstandards, Barrierefreiheit und Usability. In loser Folge erscheinen hier theoretische Texte, praktische Tipps und hilfreiche Links zum Thema.

Twitter

Follow Vorsprung on Twitter

Classics

Falling in love with CSS

I love CSS

alle Interviews

Updates

Feed Neue Texte als RSS-Feed

Autoren

Heike Edinger, heike.edinger at gmail.com

Timo Wirth, timo.wirth at gmail.com