Zweiter Blick: ARIA Landmark Navigationsbereiche

BarrierefreiheitDarstellungsoptionen



Landmark Roles (WAI ARIA Attribute)

Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

Bedeutung der Landmark Roles

Webseiten verfügen über Seitenbereiche mit typischen Funktionalitäten innerhalb der jeweiligen Webseite oder innerhalb des gesamten Webauftritts, wie Navigationsbereichen, Hauptinhalt oder Inhaltsangaben. 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).



Ein wenig über den Daumen gepeilt können und sollen HTML5 Sections in folgender Weise in Kombination mit WAI-ARIA Landmark Roles verwendet werden:

HTML5 Element Typische Landmark Role Landmark Role Erfordernis
<address> keine keines
<article> keine keines
<aside> complementary möglich
<footer> contentinfo empfohlen
<header> banner empfohlen
<nav> navigation möglich
<section> keine keines
Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

Verwendung der einzelnen Landmark Roles

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.

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.

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.

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.

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.

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

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 Screenreader 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:

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.

Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

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.

Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

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