Zweiter Blick: Einsprungmenüs

BarrierefreiheitDarstellungsoptionen



Einsprungmenüs (Skip Navigation - Links)

Bedeutung von Einsprungmenüs

Als Einsprungmenü werden Links zu Bereichen innerhalb einer einzelnen Webseite, also nicht eines gesamten Webauftritts bezeichnet. Sie müssen ganz zu Beginn des <body>-Bereichs eingebunden werden, damit sie unmittelbar wahrnehmbar werden.

Es dient dazu, den Fokus direkt auf bestimmte Seitenbereiche zu verlegen. Typischerweise sind dies die Hauptnavigation und der Hauptinhalt. Gelegentlich werden auch Suchformulare, Subnavigationen oder weiterführende Informationen auf diese Weise verlinkt.

Ein Einsprungmenü ist ein sehr marginales Hilfsmittel zur Navigation innerhalb einer Webseite. Trotzdem wird es noch von vielen Menschen, die mit Screen Reader arbeiten, erwartet und sollte daher eingebaut werden.

Menschen, die auf eine Tastaturbedienung angewiesen sind, aber über keine assistierenden Technologien verfügen, erleichtert ein Einsprungmenü jedenfalls deutlich die Navigation auf Webseiten.

Technische Realisierung eines Einsprungmenüs

Ein Einsprungmenü auf einem Webauftritt einzubauen, ist denkbar einfach, wenn die Struktur der einzelnen Webseiten innerhalb des Auftritts einheitlich ist und die relevanten Seitenbereiche mit einem eindeutigen ID-Attribut versehen sind. Die entsprechenden Links werden gleich am Beginn des BODY-Bereichs eingefügt. Der Code kann etwa folgendermaßen aussehen:

<body>
  <a href="#content">Direkt zum Hauptinhalt</a>
  ...
  <main id="content">
    <h1>Hauptüberschrift </h1>
      ...

Anmerkung

Das NAME-Attribut kann in HTML5 nicht mehr zur Kennzeichnung eines Seitenelements verwindet werden. Es genügt aber das ID-Attribut. Das NAME-Attribut kann aber natürlich redundant zum ID-Attribut verwendet werden, um einen Seitenbereich zu kennzeichnen.

Wie in allen Bereichen der barrierefreien Umweltgestaltung gilt es auch bei der Gestaltung eines Einsprungmenüs zu beachten: So viel wie nötig, so wenig, wie möglich. Ein Einsprungmenü, das zu umfangreich ist, stellt selbst eine Barriere dar.

Eine Webseite mit einer Navigation, einem Hauptinhalt und allen möglichen anderen Elementen und Bereichen sollte in der Regel zumindest zum Hauptinhalt und der Hauptnavigation verlinken. Diese Reihenfolge ist zweckmäßig und hat sich auch eingebürgert. Der Code sollte üblicherweise also zumindest etwa folgendermaßen aussehen:

<a href="#content">Direkt zum Inhalt</a>
<a href="#navigation">Direkt zur Navigation</a>

Neben den in einem Einsprungmenü erforderlichen Links gibt es möglicherweise zweckmäßig Einsprunglinks. Folgende Einsprunglinks stehen zur Diskussion:

  • Suchformular
  • Kontaktdaten
Mögliche Einsprunglinks zur Diskussion
Seitenbereich Überlegungen
Hauptinhalt Erforderlich, wenn sich der Haptninhalt nach einer Navigation befindet.
Hauptnavigation Zweckmäßig, wenn sich die Hauptnavigation unter einem Banner-Bereich befindet.
Suchformular Bedingt zweckmäßig, wenn sich das Suchformular erst hinter einer längeren Reihe von Links oder Buttons befindet.
Kontaktdaten Bedingt zweckmäßig, wenn sich die Kontaktdaten nicht unter einem Navigationspunkt befinden, sondern etwa im Fussbereich (contentinfo ).
Statseite Unüblich und nicht zweckmäßig, weil ein Einsprungmenü von der Idee her zu Bereichen innerhalb einer einzelnen Webseite und nicht innerhalb eines Webauftritts verlinken soll.

Sichtbarkeit von Einsprungmenüs

Screenreader machen Links auch dann wahrnehmbar und bedienbar, wenn sie z.B. mittels CSS außerhalb des Bildschirms dargestellt werden, also „unsichtbar“ sind. Damit Personen, die nicht mit Screenreadern arbeiten, aber allein mit der Tastatur arbeiten ebenfalls einen Zugang zum Einsprungmenü bekommen, sind folgende Techniken möglich:

Sichtbares Einsprungmenü

Das gesamte Einsprungmenü wird auf einigen Webauftritten am oberen, meist linken Bildschirmrand für alle angezeigt. Diese Funktionalität wird dadurch für alle spontan wahrnehmbar und bedienbar. 1. Die Platzierung am oberen Bildschirmrand, möglichst rechts ist üblich und zweckmäßig.

Allerdings ist diese Technik selten anzutreffen und kann zu Verwirrung beitragen. Auch für die visuelle Gestaltung von Webseiten gilt: So viel wie nötig, so wenig wie möglich. Es ist beim grafischen Design der Seiten also zu überlegen, ob und wie das gesamte Einsprungmenü standardmäßig am Bildschirm erscheinen soll.

Beispiele für sichtbare Einsprungmenüs

Unsichtbare Einsprunglinks mit sichtbarem Fokus

Eine elegante Methode, Einsprunglinks sichtbar zu machen, ist folgende: Das Einsprungmenü wird mittels CSS-Anweisungen grundsätzlich unsichtbar gemacht. Allerdings werden die einzelnen Einsprunglinks sichtbar, wenn sich der Tastaturfokus auf ihnen befindet. Wenn sich, wie erforderlich, das Einsprungmenü ganz oben im Quellcode befindet, wird das erste Einsprunglink durch drücken der TABULATOR-Taste sichtbar, weil dieses Link dadurch den Fokus erhält.

Der Code für eine CSS-Klasse zum Verbergen von Seitenelementen kann etwa folgendermaßen aussehen:

.sr-only {
  position: absolute;
  left: -1000em;
}

Von grafischer Seite muss natürlich ein passendes und spontan auffälliges Design für den entsprechenden Fokuseffekt entwickelt werden. Die technische Realisierung mittels CSS kann etwa folgendermaßen aussehen:

#skip a:focus {
  background-color: yellow;
  border-bottom: black dotted 1px;
  font-size: 125%;
  left: 3em;
  padding: .5ex .5em .4ex .5em;
  position: absolute;
}

Diese Technik gilt als hinreichend, um ein Einsprungmenü für Menschen, die auf eine Tastaturbedienung angewiesen sind, barrierefrei zu machen.

Beispiele für sichtbare Einsprunglinks durch TABULATOR-Bedienung

Wir haben uns für diese Technik auch auf zweiterblick.at entschieden. Weitere Beispiele finden Sie hier (Stand Oktober 2015):

Kurztasten (Accesskeys) für den Einsprung zu Seitenbereichen

Kurztasten können die Bedienung einer Webseite für einige NutzerInnen erleichtern. Dabei sind folgende Punkte zu beachten:

  • Als Kurztasten sind nur Ziffern zulässig, um nicht Tastaturbefehle für Browser oder Assistierende Technologien zu überlagern.
  • Die Kurztaste muss visuell und für den Screenreader wahrnehmbar sein, sonst kann man darauf verzichten.

Der Code für ein Einsprunglink mit Kurztaste kann etwa folgendermaßen aussehen:

<a href="#content" accesskey="0">Zum Hauptinhalt (Kurztaste:0)</a>

Anmerkung

Es gibt keinen Standard und nicht einmal einen überwiegend zu findenden Usus, welche Ziffern welchem Seitenbereich zuzuordnen sind. Ich empfehle folgenden Gebrauch:

Vorgeschlagene Kurztasten
Ziffer Seitenbereich Überlegungen
0 Hauptinhalt Das erste Einsprunglink sollte immer zum Hauptinhalt verlinkt sein.
Außerdem lässt sich dieser Tastenbefehl relativ bequem ausführen, weil sich ALT- und SHIFT – Taste mit der linken Hand und die Ziffer 0 mit der rechten Hand bedienen lassen.
1 Hauptnavigation Die Hauptnavigation ist wohl der am zweitmeisten verwendete Seitenbereich.
3 Suchformular Die Ziffer 3 wird von vielen mit Suche assoziiert, weil einige Anwendungen die Funktionstaste F3 für die Suche verwenden.
9 Webseiteninhalt (contentinfo Dieser Bereich befindet sich meistens am unteren Seitenende.

Anmerkungen

Diese Seitenbereiche lassen sich natürlich mit HTML5-Sectionss und ARIA Landmark Roles eindeutig kennzeichnen und damit mit modernen Technologien auch bequemer annavigieren. Vielleicht erübrigen sich eines Tages alle Überlegungen zu Kurztasten für Einsprungmenüs ebenso, wie die Einsprungmenüs selbst.

Linktexte verständlich

Verschiedene Formulierungen der Links sind gebräuchlich und zulässig. Häufig sind folgende Texte auf den Einsprunglinks zu finden:

  • Zum Inhalt
  • Zum Hauptinhalt
  • Direkt zum Inhalt
  • Springe zum Inhalt

Wir bevorzugen das knappe Zum Inhalt, wenn dies auch unpräzise ist, weil ja auch Navigationsbereiche und ergänzende Informationen einen Inhalt darstellen. Vermieden werden sollte jedenfalls Navigation überspringen, denn, was das bedeutet, ist wohl in einem Einsprungmenü den Wenigsten verständlich und wenig prägnant.

Nutzen für die Barrierefreiheit

Ein Einsprungmenü ist ein äußerst hilfreiches Instrument für Menschen, die auf die Bedienung mit der Tastatur angewiesen sind. Dies sind insbesondere Menschen, die mit Screenreadern arbeiten oder Beeinträchtigungen der Hände aufweisen.

HTML5 und Einsprungmenüs

Wenn seit HTML5 Seitenbereiche auch schon semantisch gekennzeichnet werden können und moderne Assistierende Technologien dafür Navigationsfunktionalitäten zur Verfügung stellen, hat es trotzdem noch einen Sinn, ein Einsprungmenü vorzusehen:

  • Ältere Browser und ältere Assistierende Technologien unterstützen möglicherweise HTML5 oder WAI-ARIA noch nicht.
  • Viele sind gewohnt, ein Einsprungmenü zur Navigation zu verwenden oder kennen schlichtweg noch nicht die Funktionalitäten von HTML5 und ARIA Landmark Roles.
  • Bei einer adäquaten technischen Realisierung stört ein Einsprungmenü die grafische und technische Umsetzung oder die Usability einer Webseite nicht.