Landmark Roles (WAI ARIA Attribute)
[Materialsammlung]
Bedeutung der Landmark Roles
Webseiten verfügen über Seitenbereiche mit typischen Funktionalitäten innerhalb der jeweiligen Webseite oder innerhalb des gesamten Webauftritts, wie Kopfbereich, Hauptinhalt oder Navigationsbereiche. Einige Funktionalitäten können mittels WAI ARIA Attributen semantisch gekennzeichnet werden. Es stehen dafür die Landmark Roles zur Verfügung.
Landmark (engl. Grenzstein, Orientierungspunkt, …) kann in diesem Zusammenhang am klarsten als Orientierungsbereich übersetzt werden. Verständlicher wäre wohl ein Ausdruck, der nicht auf eine punktuelle Komponente verweist, da es sich in der Regel um flächige Bereiche handelt, in denen sich mehrerre einzelne Punkte befinden.
Die Landmark Roles wurden explizit zur Erleichterung der Navigation innerhalb einzelner Webseiten eingeführt. Sie können die Bedienung ohne Maus, alleine mit der Tastatur erleichtern, wenn Browser oder Assistierende Technologien sie wahrnehmen und unmittelbar erreichbar machen.
Unterschiede zu HTML5-Tags für Seitenbereiche
Spezielle HTML-Tags für Seitenbereiche vereinfachen hingegen das Lesen und Formatieren eines Codes, wenn der Bereich etwa anstelle von DIV mit HEADER gekennzeichnet ist. Zudem dienen HTML5-Elemente wie ADRESS auch zur Lesbarkeit für Maschinen und damit zur Search Engine Optimization (SEO).
Wo jedoch HTML-Elemente gleichbedeutend mit ARIA-Landmarks verfügbar sind, müssen die HTML-Tags bevorzugt werden. Eine redundante Kennzeichnung mit ARIA-Anweisungen ist nicht mehr erforderlich.
Verwendung der einzelnen Landmark Roles
BANNER
Mit role="banner" wird ein Bereich gekennzeichnet, der überwiegend seitenübergreifende (site-oriented) Inhlalte enthält im Gegensatz zu seitenspezifischen (page-specific) Inhalten. "Seitenübergreifend" meint dabei in der Regel einen gesammten Webauftritt. Seitenspezifisch ist alles, was innerhalb eines Webauftritts nur auf einer einzigen Seite erscheint.
Typischerweise beinhalten seitenübergreifende Bereiche ein Logo des Seitenbetreibers und ein Suchformular für Inhalte innerhalb des Webauftritts. In diesem Bereich sind gelegentlich aber auch eine horizontale Hauptnavigation oder Breadcrumbs zu finden.
Das Banner befindet sich normalerweise quer am oberen Bildschirmrand und technisch ganz oben im HTML-Code gleich nach dem Einsprungmenü.
Der Verwendungsbereich deckt sich in den meisten Fällen mit der Verwendung des HTML5-Elements HEADER.
Innerhalb eines Dokuments oder einer Anwendung sollte es nur einen Banner-Bereich geben.
MAIN (Hauptinhalt)
Mit role="main" wird der Hauptinhalt einer Seite gekennzeichnet, in dem das spezielle Thema der jeweiligen Seite dargeboten wird.
Innerhalb eines Dokuments oder einer Anwendung sollte es nur einen Main -Bereich geben.
Ein HTML5-Element MAIN wird dieses Role-Element eines Tages ersetzen. Selbst im schnelllebigen digitalen Zeitalter wird role="main" für den entsprechenden Seitenbereich für ältere Browser und Assistierende Technologien wohl noch zweckmäßiger Weise eingesetzt werden müssen.
WAI Empfehlungen für den MAIN-Bereich
COMPLEMENTARY (Ergänzende Informationen)
Mit role="complementary" wird der ergänzende Bereich auf einer Webseite mit unterstützenden Informationen zum Hauptinhalt gekennzeichnet, der aber auch für sich stehend eine Sinneinheit ergibt.
Beispiele sind Seitenbereiche, die weiterführende Links, Uhrzeit, aktuelles Wetter, Börsenkurse beinhalten. Die Inhalte sollten natürlich relevante Ergänzungen des Hauptinhalts sein.
Wenn der ergänzende Inhalt umfangreicher ist und für sich genommen eine bedeutende Sinneinheit ergibt, sollte überlegt werden, ob eine eigene Webseite nicht angemessen wäre.
Innerhalb eines Dokuments oder einer Anwendung sollte es nur einen ergänzenden Bereich geben.
Der Verwendungsbereich deckt sich typischerweise mit der Verwendung des HTML5-Elements ASIDE.
WAI Empfehlungen für den COMPLEMENTARY-Bereich
CONTENTINFO (Metainformationen zum Webauftritt)
Mit role="contentinfo" wird ein größerer Bereich mit Metainformationen zur webseite gekenzeichnet.
In diesem Seitenbereich befinden sich typischerweise Links oder Angaben zu Impressum, Informationen zum Copyright oder dem Datenschutz.
Innerhalb eines Dokuments oder einer Anwendung sollte es nur einen CONTENTINFO-Bereich geben. Eine Ausnahme wäre, wenn sich auf einer Weseite Textbereiche und Anwendungsbereiche nebeneinander befinden, denen unterschiedliche Metainformationen zu Datenschutz oder Copyright zuzuordnen sind.
WAI Infos zum CONTENTINFO-Bereich
NAVIGATION (ARIA Landmark Role)
Mit role="navigation " wird eine Sammlung von Navigationselementen, normalerweise Links, für eine Webseite oder einen Webauftritt gekennzeichnet.
Typischerweise wird diese Rolle Bereichen zugewiesen, für die auch das HTML NAV-Element passt.
Innerhalb eines Dokuments oder einer Anwendung kann es naturgemäß mehrere NAVIGATION -Bereiche geben. Jede dieser Bereiche sollte mit role="navigation" semantisch gekennzeichnet werden.
Das Attribut role="navigation" sollte nicht im <ul>-Tag für Linklisten eingesetzt werden, weil dadurch die Semantik als Liste überschrieben werden kann. Statt dessen sollte das Attribut in einem übergeordneten <div>-Bereich oder in HTML5 gleich in einem <nav>-Element eingebettet werden.
WAI Empfehlungen für den NAVIGATION -Bereich
FORM (Formularbereich)
Mit role="form " wird ein Bereich mit einer Sammlung von Formularelementen gekennzeichnet. Für Suchformulare gibt es eigens das Landmark SEARCH.
Die Formularelemente können eine Mischung aus HTML-Formularelementen, Links und Scriptformularelementen sein. Empfohlen wird, weitestmöglich HTML-Syntax für Formularelemente zu verwenden.
Innerhalb eines Webauftritts kann es auf jeder einzelnen Webseite oft ein Suchformular und ein Anmeldeformular für einen Newsletter geben. Darüber hinaus sollte es jedoch nur ein einziges weiteres Formular geben, das für die individuelle Seite von relevanz ist und sich daher typischerweise im MAIN-Bereich befindet.
Auch wenn ein Formular mit HTML <form> realisiert ist, sollte meines Erachtens role="form" eingesetzt werden. Nur so ist die Erreichbarkeit bei der Tastaturnavigation gewährleistet, in JAWS etwa durch Drücken der Taste R zum Springen von Region zu Region. Zudem ist role="form" nicht explizit für das Formular vorbehalten, sondern auch für den Formularbereich, in dem oft zweckmäßige Metainformationen zum Formular in einer Überschrift und Bedienungsanweisungen etwa für Pflichtfelder (*) dargestellt werden.
SEARCH (Suchbereich)
Mit role="search " wird ein Bereich mit Suchfunktionalitäten gekennzeichnet.
Die Formularelemente in der Suche können eine Mischung aus HTML-Formularelementen, Links und Scriptformularelementen sein. Empfohlen wird, weitestmöglich HTML-Syntax für Formularelemente für die Suche zu verwenden.
Innerhalb eines Dokuments oder einer Anwendung kann es zwar theoretisch mehrere SEARCH-Bereiche geben. Erwartet wird aber wohl lediglich ein einziges Suchformular.
Derzeit ist in HTML5 kein entsprechendes Element für Suchformulare vorgesehen (Stand August 2015).
WAI Empfehlungen für den Suchbereich
APPLICATION (Landmark Rolle für Anwendungen)
Mit role="application " wird ein Bereich als eine Web-Anwendung im gegensatz zu informativen Dokumentbereichen gekennzeichnet.
Beim Betreten dieses Bereiches können Browser und assistierende Technologien unter Umständen auch den Modus der Tastaturbedienung ändern. Insbesondere Screen Reader geben in einem Applikationsbereich die Tastaturnavigation an die Anwendung. Jan Eric Hellbusch hat die Konsequenzen in einem Artikel zusammengefasst, zu dem folgender Link führt:
Vorsicht bei role="application"
(Artikel auf barrierefreies-webdesign.de)
Wenn eine Anwendung die ganze Webseite umfasst, sollte das BODY-Element dieses ROLE-Attribut erhalten.
Innerhalb eines Dokuments oder einer Anwendung kann es zwar theoretisch mehrere APPLICATION -Bereiche geben. Erwartet wird aber wohl lediglich eine einzige Anwendung.
Unterstützung durch Browser und Assistierende Technologien
Landmark Roles können die Wahrnehmbarkeit und die Bedienbarkeit von Webseiten verbessern. Durch semantische Informationen werden das Verständnis und damit die Wahrnehmbarkeit erleichtert. Durch Funktionalitäten von Browsern oder Assistierenden Technologien kann die Bedienbarkeit erleichtert werden.
Jaws 16
- Jaws unterstützt die Wahrnehmbarkeit von Seitenbereichen, die mit ARIA Landmark Roles gekennzeichnet sind, indem Beginn und Ende des Bereiches angekündigt werden.
- Durch Drücken der Taste R im Browser springt der Fokus zum nächsten gekennzeichneten Seitenbereich.
Testdatei zur Unterstützung von ARIA Landmark Roles
Wir haben eine kleine Testdatei mit allen verfügbaren ARIA Landmark Roles ausgestattet. Mit dieser Testdatei können Sie Browser oder assistierende Technologien auf Ihrem System auf die Unterstützung von Landmark Roles prüfen. Wir freuen uns auf Testberichte.
Testdatei zur Prüfung der Unterstützung von Landmark - Roles
Autorendefinierte Regionen
Gleich vorweg: Mir ist noch kein sinnvoller Einsatz von autorendefinierten Rollen beim derzeitigen technologischen Stand von Browsern und Assistierenden Technologien untergekommen. Der Vollständigkeit halber sei die Möglichkeit dazu aber hier vorgestellt.
Die derzeit definierten Landmark Roles decken natürlich nicht das gesamte Spektrum möglicherweise zweckmäßiger Kennzeichnungen von Seitenbereichen ab. Es lassen sich jedoch, wenn unbedingt nötig, autorenseitig weitere Rollen vergeben. Dies kann technisch etwa mit folgendem Code realisiert werden:
<div role="region" aria-labelledby="meine_region"> <h2 id="meine_region">Autorendefinierte Region</h2> </div>
Ein Screen Reader liest beim Betreten des DIV-Bereiches etwa folgenden Text vor:
Autorendefinierte Region Region
Kommt der virtuelle Cursor auf die Überschrift, wird erneut Autorendefinierte Region Region
vorgelesen.
Die semantische Bezeichnung erfolgt mittels aria-labelledby, was dem Screen Reader die Bezeichnung der Region liefert.
Da in obigem Beispiel die Bezeichnung des Inhaltsbereiches ohnedies durch die Überschrift erfolgt, ist in diesem Beispiel die autorendefinierte Region eine redundante und unnötige Zusatzinformation.
Eingeschränkte Sinnhaftigkeit
Autorendefinierte Regionen lassen sich nicht mit den üblichen Navigationsmechanismen der Screen Reader ansteuern und erleichtern somit auch nicht die Tastaturbedienbarkeit einer Seite.
Sie verbessern wie im obigen Beispiel auch wohl kaum einmal die Wahrnehmbarkeit. Im Gegenteil kommt es zu unerwünschten Redundanzen.
Autorendefinierte Regionen sollten daher nur in begründeten Ausnahmefällen eingesetzt werden.