Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Die Navigation über Seitenregionen veröffentlicht in 2012zuletzt bearbeitet in 2018

Tastenbefehle in Screenreadern

Browser bieten Tastaturnutzern generell nur eine Möglichkeit der Navigation innerhalb einer Webseite. Mit der Tab-Taste können Links und Steuerelemente nacheinander angesprungen werden. Dieser Problematik wurde im Laufe der Jahre durch erweiternde Konzepte begegnet:

role-Attribut oder HTML-Elemente

Es gibt insgesamt acht landmark roles, die in ARIA spezifiziert sind, wovon sieben mit HTML-Elementen zugewiesen werden können. Bei den HTML-Elementen handelt es sich um die ASIDE-, FOOTER-, FORM-, HEADER-, MAIN-, NAV- und SECTION-Elemente. Bei den SECTION- und FORM-Elementen besteht die Besonderheit, dass sie mit einem aria-labelledby- oder aria-label-Attribut bezeichnet sein müssen, um als Region identifizierbar zu werden.

Eine Navigationsregion kann entweder mit dem role-Attribut gekennzeichnet werden

<div id="nav" role="navigation">
  <!-- ... Die Navigationseinträge ... -->
</div>

oder mit dem entsprechenden HTML-Element:

<nav id="nav">
  <!-- ... Die Navigationseinträge ... -->
</nav>

Generell ist die HTML-Technik zu bevorzugen.

Per Tastatur von Region zu Region

Im Allgemeinen bieten Browser keine Möglichkeit der strukturellen Navigation. "Früher" hatte der Opera-Browser einige Features dazu berücksichtigt. Webseitenanbieter können Widgets wie Extern, englischsprachig: SkipTo in Webseiten integrieren, um Tastaturnutzern eine effizientere Navigation zu bieten.

Hinweis: Die ARIA-Spezifikation sieht zwar vor, dass "user agents" eine Navigation über Seitenregionen ermöglichen, aber bislang ist das in Browsern nur mit Plugins möglich.

In Screenreadern ist die strukturelle Navigation per Seitenregionen fast überall gegeben. Alle gängigen Screenreader bieten mindestens die Möglichkeit, zur nächsten oder zur vorherigen Region zu springen. Manche Screenreader bieten auch ein Dialogfenster mit einer Liste der verfügbaren Regionen einer Seite an; wenn eine Region ausgewählt wird, springt der Screenreader zur entsprechenden Stelle auf der Seite.

Die Tastenbefehle für die strukturelle Navigation per Seitenregion variieren von Screenreader zu Screenreader:

Screenreader Nächste Region anspringen Vorherige Region anspringen Regionen auflisten Anmerkungen
JAWS R Umschalt+R JAWS+Strg+R
  • Die JAWS-Taste ist standardmäßig die Einfügen-Taste.
  • In JAWS kann der Hauptinhalt der Seite mit der Taste Q angesprungen werden.
Cobra Pfeilunten PfeilOben Nicht verfügbar
  • Zunächst muss mit 0+Strg+Umschalt+/ in den Elementmodus umgeschaltet werden.
  • Es werden nicht nur Regionen, sondern auch Überschriften, Listen, Formularelemente usw. nacheinander angesprungen.
Window Eyes , (Komma) Umschalt+, Nicht verfügbar
NVDA D Umschalt+D NVDA+F7
  • Die NVDA-Taste ist standardmäßig die Einfügen-Taste.
  • Bei der Auflistung werden wahlweise Links, Überschriften oder Sprungmarken aufgelistet. Die Darstellung muss auf "Sprungmarken" geschaltet werden.
VoiceOver (iOS) PfeilUnten PfeilObenNicht verfügbar
  • Die strukturelle Navigation wurde per Tastatur getestet. Sie funktioniert aber auch durch Wischen.
  • In der "Liste" (englisch: Web Rotor) müssen vorab "Orientierungspunkte" eingestellt werden.
ChromeVox (Windows) ChromeVox+PfeilUnten ChromeVox+PfeilOben Nicht verfügbar
  • Auf Windows-Systemen ist die ChromeVox-Taste standardmäßig die Tastenkombination strg+. Alt Außerdem muss vorab mit zweimaliges Drücken der Einfügen-Taste in den Elementmodus gewechselt werden.
  • Es werden nicht nur Regionen, sondern auch Überschriften, Listen, Formularelemente usw. nacheinander angesprungen.