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.
Rollenvergabe für HTML-Elemente
Dieses kurze Video zeigt den Einsatz der ARIA Landmark Roles:
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:
|
1 2 3 4 5 6 7 8 |
<header role="banner"> Inhalt <nav role="navigation"> Navigation </nav> </header |
Ein netter Nebeneffekt dabei ist, dass die Kennzeichnung durch role=““ auch im CSS für die Formatierung der Elemente verwendet werden kann:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav[role=navigation] { clear: both; max-width: 960px; /*height: 50px;*/ background-color: #aa0000; text-align: center; font-size: 1.1rem; /*line-height: 50px;*/ color: #fff; } header[role=banner] { max-width:960px; margin: 0 auto; } |
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