13. April 2009 von Dieter | 4 Kommentare | drucken
Skiplinks und Anker einsetzen
Für Besucher mit Screenreader, aber auch solche, die ihren Browser mit der Tastatur über die Tabulatorentaste steuern, können Anker (Sprungmarken) mittels Skiplinks am Anfang der jeweiligen Webseite eine sinnvolle Navigationshilfe darstellen. Auf diese Weise lässt sich die Zugänglichkeit (Accessibility) und Benutzerfreundlichkeit (Usability) der Website verbessern.
Typische Anwendungsfälle sind Anker (Sprungmarken) direkt zum Inhalt, zur Navigation und / oder zur Suche. Ihre Zahl sollte möglichst klein gehalten werden. Ein bis drei dieser Anker (Sprungmarken) mittels Skiplinks am Seitenanfang sollten reichen.
Sinnvoll ist ein solcher Skiplink aber nur, wenn der anzuspringende Bereich nicht unmittelbar dahinter im Quelltext kommt.
Der XHTML-Code für Skiplinks, die direkt zum Inhalt sowie zur Navigation führen, kann beispielsweise wie folgt aussehen:
1 2 | <a class="skip" href="#content">Springe zum Inhalt</a> <span class="hideme"> . </span> <a class="skip" href="#navigation">Springe zur Hauptnavigation</a> <span class="hideme"> . </span> |
Und die Stellen, die angesprungen werden sollen (Sprungmarken), brauchen entsprechende Textanker, die wie folgt aussehen sollten:
1 | <a id="content" name="content"></a> |
und
1 | <a id="navigation" name="navigation"></a> |
Häufig will der Seitenersteller, dass die Skiplinks nicht im Webdesign sichtbar sind.
Damit diese gleichwohl von möglichst allen Screenreadern vorgelesen werden, darfst Du sie nicht mit der CSS-Anweisung display:none; verstecken. Stattdessen empfiehlt sich folgender CSS-Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .skip, .hideme { position: absolute; top: -1000em; left: -1000em; height: 1px; width: 1px; } .skip:focus, .skip:active { position: static; top: 0; left: 0; height: auto; width: auto; } |
Mit den Pseudoklassen focus und active für die Klasse .skip wird sichergestellt, dass der Skiplink sichtbar wird, wenn er mit der Tabulatorentaste angesprungen wird. Je nach Webdesign ist gegebenenfalls position:static durch position:absolut zu ersetzen und für top und left andere Werte zu wählen, so dass der Skiplink an der gewünschten Stelle auf der Webseite erscheint.
Auf Webseiten-Infos.de kannst Du mit der Tabulatorentaste die Skiplinks für den Inhaltsbereich sowie die Hauptnavigation anspringen und mit der Enter- / Returntaste dann direkt zu den dortigen Sprungmarken springen.
Wer übrigens das CSS-Framework YAML verwendet, der bekommt die Skiplinks und Anker (Sprungmarken) für den Inhalts- und Navigationsbereich sowie eine hervorragende Dokumentation dazu gleich frei Haus mitgeliefert.
Lesenswert zu diesem Thema sind auch:
- Sprungmarken setzen und Zugänglichkeiten maskieren von Peter Rozek
- Die “Stationen” eines Dokuments bei wai-austria.at
- Benutzerfreundliche Webseiten durch Skiplink-Navigation bei usability-tipps.de
Infos
Webseite veröffentlicht am Montag, den 13. April 2009, um 20:47 Uhr, zuletzt geändert am Montag, den 6. Februar 2012, um 13:39 Uhr.
Kategorie: Webdesign
Schlagworte: Benutzerfreundlichkeit, CSS, Navigation, Skiplinks, Sprungmarken, XHTML, YAML, Zugänglichkeit
Statistik: 259 Blogbeiträge, 682 Schlagworte, 1.557 Kommentare, 112 Feedleser
1. Webdesign Linda
Kommentar vom 14. April 2009 um 01:08
Hallo und prima, dass ein bisschen Usability gelehrt wird. Sonst ist alles voll von SEO-Artikeln…….. Meine Sprungziele definiere ich übrigens durch IDs in Div-Containern. Das reduziert die Anker. Dabei fallen jedoch rel und rev weg.
2. Dieter
Kommentar vom 14. April 2009 um 06:27
Das ist ein guter Tipp. Danke!
Aber funktioniert das dann auch noch mit dem name-Attribut?
Die Definition eines Ankers über name ist nämlich für alte Browser wie den Netscape 4 erforderlich, damit die Skiplinks auch dort funktionieren.
Damit kann ich leben. Habe ich bisher für Anker noch nicht benutzt.
3. Zugänglichkeit ohne Accesskeys | Webseiten-Infos.de
Pingback vom 13. Oktober 2011 um 15:16
[...] stattdessen Wert auf einen sinnvollen Einsatz von Skiplinks (siehe hierzu meinen Beitrag “Skiplinks und Anker einsetzen” [...]
4. Der BITV-Selbsttest mit Fragebogen | Webseiten-Infos.de
Pingback vom 3. Dezember 2011 um 07:41
[...] Webpräsenz aus?” sowie die Blogbeiträge “Abkürzungen auf Webseiten“, “Skiplinks und Anker einsetzen“, “Zugänglichkeit ohne Accesskeys“, “Tabindex für Kontaktformular“, [...]