HTML/Tutorials/Navigation/Skip-Links

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML
● CSS

Gerade auf kleinen Bildschirmen und für Screenreader ist es oft wünschenswert, gleich zum Inhalt zu kommen, ohne sich lange mit der Navigation aufzuhalten. Hier gibt es zwei Möglichkeiten:

  • ein Skip-Link ermöglicht es, die Navigation zu überspringen
  • ein Toggle-Menü versteckt die Navigation und klappt sie nur bei Bedarf aus.

Skiplink[Bearbeiten]

Auf einem normalen Monitor ist die Dropdown-Navigation im Ausgangszustand eingeklappt und lässt sich mit einem Blick nach unten übergehen, während auf Screenreader angewiesene Benutzer sich durch alle Links durchtabben müssten. Mit einem Skipklink, der ganz am Anfang im Markup steht und auf den Hauptinhalt gerichtet ist, können Sie das Menü überspringen. Im Normalzustand ist der Skip-Link per CSS außerhalb des sichtbaren Bereichs positioniert.

<a href="#main-content">zum Inhalt</a>

Skiplinks werden am logischen Beginn des Dokuments notiert und enthalten zum Beispiel:

  • zum Inhalt
  • zur Navigation
  • zur Sitesearch

toggle-Menü[Bearbeiten]

Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unser Menü um ein toggle-Menü, mit dem zwischen der mobilen und der Desktop-Ansicht hin und hergeschaltet werden kann. Auf kleinen Bildschirmen ist nur ein Navicon mit einem Link auf das Menü sichtbar.

Wie erzeuge ich ein Navicon?[Bearbeiten]

Im allgemeinen Gebrauch haben sich als Symbol oder Icon für einen Navigations-Button drei waagerechte Striche durchgesetzt. Deshalb wird ein solches Menü auch oft „Burgermenü“ oder „Hamburgermenü“ genannt. Sie können bei Verwendung der Zeichencodierung utf-8 entweder direkt „☰“ oder mit &#9776; eingegeben werden.

Beispiel ansehen …
<button href="#menu" id="nav-link">
  &#9776; Menu
</button>

Leider ist diese Darstellung oft nicht besonders optimal, da die drei Balken unterschiedlich dick erscheinen. Die Verwendung eines Icon Fonts könnte hier Abhilfe schaffen.

Eine Alternative wäre die Darstellung mithilfe einer Grafik, evtl. auch als Sprite-Grafik oder SVG-Icon.

Eleganter, weil ohne zusätzliches Markup, wäre die Verwendung eines Pseudoelements.

Beispiel ansehen …
#navlink {
	font-size: 2em;
	text-decoration: none;
	position: relative;
	display: inline-block;
	width: 1px;
	overflow: hidden;
	padding-left: 1em;
	margin-right: 2rem;
}
			
#navlink::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1em;
	height: 0.2em;
	border-top: 0.6em double blue;
	border-bottom: 0.2em solid blue;
}
<a id="navlink" href="#mobilenav" title="Navigation">Navigation</a>
Das Linkelement enthält einen aussagekräftigen Linktext. Wegen width: 1px in Verbindung mit overflow: hidden ist dieser auf Bildschirmen nicht sichtbar, wird von Screenreadern aber erkannt. Auch dieser Teil einer Navigation ist mit der Tastatur bedienbar

Position[Bearbeiten]

Eine elegante Alternative zum Aufklappmechanismus ist das Positionieren der Navigation im Footer. Bei größeren Viewports wird sie in der oberen Menüleiste absolut positioniert. Mittels media queries wird dies bei kleinen Viewports auf eine relative Position geändert, die dann über das Navicon angeklickt werden kann.

Alternativ könnte man diese Änderung der Reihenfolge der Elemente mit der CSS-Eigenschaft flexbox erreichen.

Fazit[Bearbeiten]

Bei Touchscreens gibt es logischerweise keinen :hover-Zustand wie bei einer Maus, die ja erst mit dem Klick eine weitere Aktion auslöst. Dies betrifft die Navigation insofern, dass Untermenüs jetzt nicht mehr durch :hover aufgeklappt werden können, sondern entweder mit einem eigenen Link geöffnet werden müssen oder von vornherein dargestellt werden, was große Dropdown-Menüs mit mehreren Ebenen schwer lesbar macht.

Hier empfiehlt sich der Einsatz einer JavaScript-Lösung.


Siehe auch[Bearbeiten]