Artikelbild HTML 5 Elemente
Webtechniken

HTML 5 Basics: ARIA Landmark Roles

Im ersten Teil der HTML 5-Basics wurden die neuen semantischen Layout-Elemente vorgestellt. Diese können durch ARIA Landmark Roles erweitert werden, die vor allem für Nutzer von Screenreadern nützlich sind.

Webseiten können nicht nur mit der Maus oder den Fingern, sondern auch komplett mit der Tastatur bedient werden. Durch Betätigen der Tabulator-Taste springt der Fokus von einem Element zum Nächsten. Das ist nicht sehr bequem und effizient, darum wurden zur Unterstützung von Screenreadern die Landmark Roles eingeführt.

Screenreader Landmark Roles

Rollenvergabe für HTML-Elemente

Dieses kurze Video zeigt den Einsatz der ARIA Landmark Roles:

Aktivieren Sie JavaScript um das Video zu sehen.
https://www.youtube.com/watch?v=IhWMou12_Vk

Durch Sprachbefehle navigiert der Nutzer durch einzelne Elemente der Webseite. Ohne eine Zuweisung der Landmark Roles wäre das für die Software eine ziemlich schwierige Aufgabe. Die Verwendung der Landmark Roles ist mit wenig Aufwand verbunden, der für viele Nutzer aber eine echte Erleichterung bietet.

Die wichtigsten Landmark Roles sind:

  • banner – kennzeichnet den Bereich der Webseite, der Logo und Slogan enthält. Also den Kopfbereich der Webseite
  • navigation – klar: Hier wird die Navigation markiert
  • article – weist den vorhandenen Artikel auf der Webseite aus
  • main – macht den Hauptinhaltsbereich auf der Webseite erkennbar
  • contentinfo – Informationen zum Inhalt, Autor oder Copyright. kann für den Footer verwendet werden
  • complementary – Ergänzende Informationen zur Webseite, geeignet für die Sidebar
  • search – weist ein Formularfeld als Suche aus

Verwendung von ARIA Landmark Roles im Quelltext

Das Einfügen der Landmark Roles ist kein Problem. Die jeweilige benötigte Rolle wird einfach im HTML-Attribut vergeben:

Ein netter Nebeneffekt dabei ist, dass die Kennzeichnung durch role=““ auch im CSS für die Formatierung der Elemente verwendet werden kann:

Auch hier gilt wieder: Werden die Landmark Roles nicht verwendet, werden Webseiten natürlich trotzdem im Browser korrekt angezeigt. Sie erleichtern aber die Bedienung der Seite für Menschen, die einen Screenreader nutzen müssen.
Also einfach beim nächsten Projekt oder der nächsten Überarbeitung an die Landmark Roles denken.

Passend dazu: Semantische HTML 5-Elemente

0 Kommentare zu “HTML 5 Basics: ARIA Landmark Roles

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere die Datenschutzhinweise.