EfA-Laborbericht № 7
Content-lastige Angebote wie das unsrige bestehen in der Regel immer aus der Navigation und dem wesentlichen Inhalt der jeweiligen Seite. Egal wo die Seite innerhalb der Struktur der Website angesiedelt ist – der Nutzer will immer nur eins von beidem: entweder weiternavigieren oder den Inhalt lesen. Daher sollte es mittlerweile zum guten Ton gehören, insbesondere dem Tastaturnutzer über sog. Skip-Links die Möglichkeit zum direkten Anspringen der wesentlichen Unterbereiche einer Seite zu geben. Screenreader-Nutzern erspart man so, sich immer wieder die gesamte Navigation anhören zu müssen, wenn man nur zum Artikel will.
Drück mich, ich bin ein Skip-Link
Bereits vor dem aktuellen Relaunch hatten wir hier diese Skip-Links eingesetzt, mit denen der Navigations- und der Inhaltsbereich direkt angesprungen werden kann. Die Umsetzung ist denkbar einfach: unmittelbar nach Logo & Claim der Initiative folgen zwei Links zu Zielen innerhalb der Seite:
<a class="skip" href="#navigation">Zur Navigation</a><a class="skip" href="#inhalt">Zum Inhalt</a>
Diese sind per CSS ausgeblendet, allerdings nicht per display: none; komplett versteckt. Dies würde in den meisten Screenreadern dazu führen, dass die Inhalte dieser Links wirklich weg sind und dementsprechend nicht vorgelesen werden. Stattdessen haben wir die Links um einen Wert aus dem Viewport geschoben der garantiert, dass diese in grafischen Browsern nicht sichtbar sind:
a.skip {position: absolute;left: -1000em;top: -1000em;height: 1px;width: 1px;}
Die Dopplung von left: und top: scheint auf den ersten Blick unnötig, aber ohne die zusätzliche Angabe eines Wertes für top: funkte uns der Mac-Safari dazwischen und verschob beim Durchtabben die gesamte Box mit dem Header um die Höhe des Skip-Links nach oben.
Sobald der Nutzer nach dem Laden der Seite die Tab-Taste drückt, werden nun die Links der Reihe nach wieder in den sichtbaren Bereich geschoben. Dort verbleiben sie, bis der Nutzer einen der Links per Enter auslöst (draufklicken geht natürlich auch) oder weitertabbt:
a.skip:focus,a.skip:active {position: absolute;z-index: 1;top: 4px;left: 4px;height: auto;width: auto;color: #000;background-color: #eee;outline: 1px solid #999;}
Da sich die Links innerhalb eines (relativ) positionierten Elementes befinden, beziehen sich die Positionswerte für das position: absolute; auf das positionierte Eltern-Element – in diesem Fall also auf den Block mit dem #header dieser Seiten, von dessen oberer linker Ecke um 4px versetzt die Links erscheinen sollen.
Tipp: wenn Sie mehr als zwei, höchstens drei Sprungmarken brauchen, damit ihre Seite überhaupt bedienbar ist, dann haben Sie eventuell ein strukturelles Problem. Dies lässt sich nicht durch die Hinterlegung von einem Dutzend weiterer Skip-Links lösen, sondern nur indem Sie das strukturelle Problem selbst beheben.
Der obligatorische IE-Bug …
… darf natürlich auch nicht fehlen: Die Ziele der Links müssen in Elementen liegen, die die Eigenschaft hasLayout=true (in VisualBasic-Diktion also −1) besitzen, sonst wandert der Fokus nicht mit, sondern verbleibt am Ursprung (beim nächsten Tastendruck wäre der Nutzer also wieder im Kopfbereich der Seiten). Wir erreichen dies hier, indem nur Block-Level-Elemente mit einer ID angesprungen werden, die in der Datei iehacks.css ein lockeres zoom: 1; verpasst bekommen.
Bonus-Trick
Nun nützt es dem Tastaturbediener nichts, wenn er nicht sieht, wo er denn hingesprungen ist. Daher setzen wir seit neuestem für viele lokale Sprungmarken innerhalb dieser Seiten den :target-Pseudo-Selektor aus CSS 3 ein, der schon von vielen modernen Browsern unterstützt wird. Sobald eine beliebige ID angesprungen wird, färbt sich deren Hintergrund ein und hebt diese damit auf der Seite hervor:
*:target {color: #fff;background-color: #8fa6b8;}
Eine noch deutlichere Visualisierung der Sprungziele fanden wir auf den Seiten der schwedischen Hauptstadt http://stockholm.se/: dort werden per JavaScript & CSS die anzuspringenden Ziele mit einer gestrichelten Umrandung hervorgehoben – eine sehr gut gemachte Erleichterung für Tastaturnutzer, wie wir finden.
Nachtrag: Dirk Ginader hat dazu prompt was schönes gebastelt: »jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen« (skipnav-demo).
P.S.: Mehr zum Thema Tastaturbedienung finden Sie in unserem Artikel »›Oops, wo bin ich?‹ – Ein Herz für Tastaturnutzer« und in der »BITV-Bedingung 13.6 - Gruppierung und Umgehung von Linkgruppen« sowie im Podcast vom 31. August 2006: »Viel hilft viel?«.