Die Navigation über Seitenregionen
veröffentlicht in 2012zuletzt bearbeitet in
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:
- Hilfsmittel wie Screenreader erlauben die Navigation über Strukturmerkmale einer Webseite, die den direkten Sprung zur nächsten (oder vorherigen)
Überschrift, zum nächsten Formularelement, zur nächsten Liste usw. erlaubt. Diese Art der Navigation ist die strukturelle Navigation.
- Die HTML-Spezifikation für das
tabindex
-Attribut wurde ergänzt, so dass beliebige Elemente in die Tab-Reihenfolge aufgenommen werden können. - In HTML5 wurden neue semantische Elemente zur Kennzeichnung von Seitenregionen eingeführt, die ebenfalls eine strukturelle Navigation erlauben. Diese Elemente basieren auf den landmark roles aus Accessible Rich Internet Applications (ARIA) 1.1.
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 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 |
|
Cobra | Pfeilunten | PfeilOben | Nicht verfügbar |
|
Window Eyes | , (Komma) | Umschalt+, | Nicht verfügbar | |
NVDA | D | Umschalt+D | NVDA+F7 |
|
VoiceOver (iOS) | PfeilUnten | PfeilOben | Nicht verfügbar |
|
ChromeVox (Windows) | ChromeVox+PfeilUnten | ChromeVox+PfeilOben | Nicht verfügbar |
|
Der Beitrag Die Navigation über Seitenregionen besteht aus folgenden einzelnen Webseiten:
Tastenbefehle in Screenreadern
(Aktuelle Seite)
Konzept für die Seitenregionen
Die Seitenregionen einer Webseite sollten aufeinander abgestimmt sein und aussagekräftig beschriftet werden.