Landmark roles mit HTML5 und ARIA veröffentlicht in 2012/2014

Mit Accessible Rich Internet Applications (ARIA) 1.0 werden u.a. Rollen definiert. Diese Rollen weisen einem Element eine Semantik zu. Beispielsweise wird mit

<div id="content" role="main">
  <!-- ... Hauptinhalte der Webseite ... -->
</div>

der Hauptinhalt der Seite in dem Intern: Accessibility-Tree des Betriebssystems gekennzeichnet. Da es sich bei der Rolle "main" um eine landmark role handelt, wird der Hauptinhalt nicht nur semantisch identifiziert, sondern Hilfsmittel wie Screenreader bieten Intern: Tastenbefehle an, um die Region direkt anspringen zu können.

HTML oder ARIA?

ARIA definiert verschiedene Rollen, die teilweise aber auch in HTML5 übernommen worden sind. Folgende landmark roles (mit ihren HTML-Entsprechungen) gibt es:

RolleHTML
Applicationkeine HTML-Entsprechung (siehe Intern: Die Besonderheit der ARIA-Rolle application)
BannerHEADER-Element (außer das Element befindet sich in einem ARTICLE- oder SECTION-Element)
ComplementaryASIDE-Element
contentinfoFOOTER-Element (außer das Element befindet sich in einem ARTICLE- oder SECTION-Element)
Formkeine HTML-Entsprechung (siehe unten)
MainMAIN-Element
NavigationNAV-Element
Searchkeine HTML-Entsprechung; (siehe unten)

Redundante Auszeichnungen sind überflüssig

Viele HTML-Elemente "weisen" den Browser bereits an, eine bestimmte Rolle in den Accessibility-Tree zu übertragen. Das gilt für Links oder Überschriften, aber auch für neuere HTML5-Elemente. Wenn ein HTML-Element eine Rolle bereits besitzt, dann ist es nicht sinnvoll, die Rolle zusätzlich mit dem role-Attribut zuzuweisen. Ein MAIN-Element als

<main id="content" role="main">
  <!-- ... Hauptinhalte der Webseite ... -->
</main>

ist überflüssig. Der folgende Code bewirkt genau dasselbe:

<main id="content">
  <!-- ... Hauptinhalte der Webseite ... -->
</main>

Für die fünf in ARIA definierten Rollen für landmark roles, die eine HTML-Entsprechung haben (ASIDE-, FOOTER-, HEADER-, MAIN- und NAV-Elemente), ist keine erneute Bestimmung der Rolle mit ARIA notwendig. Allerdings gibt es einige Ausnahmen für den Extern: Internet Explorer.

Für Regionen auf einer Webseite, die die Rollen "application", "form" oder "search" entsprechen, muss hingegen die Rolle mit dem role-Attribut zugewiesen werden.

Weitere Hinweise

Bei dem Konzept der Rollen (HTML und ARIA) ist es wichtig zu wissen, dass sie keinerlei Einfluss auf die Darstellung oder das Verhalten einer Webseite im Browser haben. Vielmehr handelt es sich bei der Semantik um eine Information für den Browser, wie der Accessibility-Tree des Betriebssystems zu befüllen ist. Hilfsmittel wie Screenreader holen die Informationen dort ab und bieten anhand dessen den Nutzern Mechanismen für eine strukturelle Navigation für die Webseite.

Darüber hinaus fällt die Rolle form ein klein wenig aus dem Rahmen. Während die Rolle "form" eine navigierbare Region einer Seite kennzeichnet, sieht die HTML-Spezifikation dieses Verhalten nicht für das FORM-Element vor. Dennoch führt

<form id="contact" role="form">
  <!-- ... Kontaktformular ... -->
</form>

zu einer Warnung bei derExtern, englischsprachig: HTML-Validierung. Dabei handelt es sich um zwei unterschiedliche Konzepte, denn die Rolle dient der Navigation in Hilfsmitteln und das HTML-Element dient der Verarbeitung von Nutzereingaben. Um Warnungen bei der Validierung zu umgehen, muss das role-Attribut einem anderen Element zugewiesen werden:

<div id="contact" role="form">
  <form>
    <!-- ... Kontaktformular ... -->
  </form>
</div>

Ähnlich sollte die Rolle "search" nicht mit dem Eingabefeld des Types "search" (<input type="search">) verwechselt werden. Vielmehr kennzeichnet die Rolle "search" eine Region der Seite aus:

<div id="search" role="search">
  <form>
    <!-- ... Suchformular ... -->
  </form>
</div>