accessBlog:

10 Dez 2008

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.

Weiterlesen …

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:

  1. <a class="skip" href="#navigation">Zur Navigation</a>
  2. <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:

  1. a.skip {
  2. position: absolute;
  3. left: -1000em;
  4. top: -1000em;
  5. height: 1px;
  6. width: 1px;
  7. }

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:

  1. a.skip:focus,
  2. a.skip:active {
  3. position: absolute;
  4. z-index: 1;
  5. top: 4px;
  6. left: 4px;
  7. height: auto;
  8. width: auto;
  9. color: #000;
  10. background-color: #eee;
  11. outline: 1px solid #999;
  12. }

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:

  1. *:target {
  2. color: #fff;
  3. background-color: #8fa6b8;
  4. }

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?«.

Permalink
Tags: , ,

Kommentare zu dieser Meldung: 11

Permalink Siegfried meinte am 11.12.2008:

Der Skiplink ist prinzipiell eine gute Sache. Allerdings verleitet die Art, wie dieser kommuniziert wird, dazu, anzunehmen, dass ein Skiplink in jedem Fall Pflicht ist. Dem ist jedoch nicht so.

Ein Skiplink ist nötig, wenn einem Leser eine Möglichkeit geboten werden muss, eine Navigation zu überspringen, um zum Inhalt zu kommen. Das ist immer dann nötig, wenn zwischen Titel und Inhalt eben diese Navigation liegt (oder auch Anderes, wie z.B. eine Tagcloud). Wenn hingegen zwischen Titel und Inhalt Nichts liegt, ist auch kein Skiplink nötig.

Normalerweise ist es aus designtechnischen Gründen notwendig, die Navigation zwischen Titel und Inhalt zu packen. Dies hat aber keine inhaltlichen, sondern eben nur designtechnische Gründe. Mir ist da mal was durch den Kopf gegangen, das aber nur für XHTML anwendbar wäre: Erst Titel, dann Inhalt, dann Navigation, und diese per XSL in die für das Design notwendige Reihenfolge bringen. Eigentlich müsste das einen Skiplink überflüssig machen. Geht aber eben nur mit XHTML. Getestet habe ich das aber aus Zeitgründen noch nicht.

Permalink Der Caspers meinte am 12.12.2008:

Sorry, falsch, falsch und falsch. Der Reihe nach:

> dass ein Skiplink in jedem Fall Pflicht ist. Dem ist jedoch nicht so.

Das sehen die soeben veröffentlichten WCAG 2.0 anders. Dort steht unter 2.4.1: »A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.« Einsortiert ist deser Punkt unter Level A, also absolutes Pflichtprogramm. Weiter erklärt wird das in den Techniken unter G1, G123 und G124.

> Ein Skiplink ist nötig, wenn einem Leser eine Möglichkeit geboten werden
> muss, eine Navigation zu überspringen, um zum Inhalt zu kommen.

Nein, das stimmt nur begrenzt. Skip Links dienen z.B. auch blinden Nutzern dazu, ein mentales Modell der Seite zu erstellen und sich darin zu orientieren. Das hat nichts damit zu tun, ob die Navigation nun vor oder nach dem Inhalt liegt (weder optisch noch technisch, d.h. von der Abfolge im Quelltext)

> Normalerweise ist es aus designtechnischen Gründen notwendig, die
> Navigation zwischen Titel und Inhalt zu packen.

Das hat wie gesagt überhaupt nichts mit der Notwendigkeit für Skip Links zu tun. Zumal dem Nutzer die Reihenfolge der Inhaltsblöcke nachweislich egal ist, wenn diese gekennzeichnet sind und über Sprungmarken erreichbar sind. Nachzulesen in einer Untersuchung von Roger Hudson, Russ Weakley und Lisa Miller unter dem Titel: Source Order, Skip links and Structural labels«. Insofern ist die oben angedachte lösung nicht nur der absolute technische Overkill, sondern schlichtweg unnötig.

Permalink Pressspanplatte meinte am 12.12.2008:

Hi zusammen,

was haltet Ihr eigentlich von dem Web-AIM-Ansatz, dass Skip-Links grundsätzlich sichtbar sein sollten (siehe http://www.webaim.org/)? Diese Philosophie gefällt mir persönlich gar nicht! Hat man keine Ahnung von Keyboard-Navigation mit Tabs, klickt man als "unbedarfter" User mit der Maus auf "skip to the main content" - vielleicht mehrmals - und es tut sich anscheinend nichts! Dass der Focus verschoben wurde, merken wohl die wenigsten Maus-User. Deshalb finde ich, Skiplinks gehören schon versteckt, werden aber sichtbar, wenn sie den Fokus bekommen. Wie seht Ihr das?

Ich hatte mal vor einiger Zeit für ein Wiki ein neues barrierefreies Theme gemacht, siehe http://moinmo.in/ThemeMarket/SimpleMente . Dort habe ich eine Technik eingesetzt, damit der Seiteninhalt zuerst kommt, dann die Menüs (geht mit negative Margins, siehe http://www.alistapart.com/articles/negativemargins). Habe dort trotzdem Skip-Links eingesetzt. Nachteil: Schlecht für die Suchmaschinenoptimierung: Alle Seiten fangen eben mit den Skip-Links an. Heute würde ich glaube ich bei Layouts mit "Negative Margins" die Skip-Links am Seitenanfang weg lassen und versuchen, durch Überschriftenhierarchien eine gute Seitennavigation zu ermöglichen bzw. viel mit Accesskeys zu arbeiten. Das wäre das Theme für Fortgeschrittene. Dann würde ich noch ein zweites "Theme" machen, eine klassisches, wo die floatenden Container ("Menüs") am Seitenanfang kommen. Hier würde ich die klassichen Skipnavi wie oben beschrieben einsetzen (Theme für "Beginners").

[Erläuterung: Bei Wikis kann der User das Layout / die CSS / das "Theme" in den Benutzereinstellungen normalerweise auswählen].

Mehr zu Wikis und Accessibility gibt's unter:
http://moinmo.in/AccessibleMoin
http://moinmo.in/ImprovingAccessibilityOfWikis

Permalink Der Caspers meinte am 12.12.2008:

> was haltet Ihr eigentlich von dem Web-AIM-Ansatz,
> dass Skip-Links grundsätzlich sichtbar sein sollten

Nichts, aus genau den genannten Gründen.

Permalink patrick h. lauke meinte am 13.12.2008:

> Das sehen die soeben veröffentlichten WCAG 2.0 anders. Dort steht unter 2.4.1: »A mechanism
> is available to bypass blocks of content that are repeated on multiple Web pages.« Einsortiert ist
> deser Punkt unter Level A, also absolutes Pflichtprogramm.

aeh...nein. denn die zweite "sufficient technique" - "2. Grouping blocks of repeated material in a way that can be skipped" hat zum beispiel "H50 using structural elements to group links"

also nix von wegen "skip links sind jetzt pflicht.

Permalink Rainer meinte am 15.12.2008:

> to bypass blocks of content that are repeated

Je nachdem, ob zuerst Content oder Navi kommen, ist der Skiplink (in diesem konkreten Fall) dazu da, entweder den Content oder die Navi zu überspringen, um direkt zum jeweils dahinter liegenden Bereich zu gelangen. Und da eigentlich jede Seite aus mindestens Navi und Content besteht, "that are repeated", gehört ein Skiplink als Pflichtprogramm eingebaut.

Und was die Sichtbarkeit angeht: Blödsinn. Screenreader-Nutzern ist die Sichtbarkeit egal und sonst ist er nur sinnvoll für Tastaturnutzer. Ergo: sichtbar machen bei Tastaturfokus, sonst nicht.

Permalink Patrick H. Lauke meinte am 18.12.2008:

"Und da eigentlich jede Seite aus mindestens Navi und Content besteht, "that are repeated", gehört ein Skiplink als Pflichtprogramm eingebaut."

Sorry...das stimmt eben nicht. Koennen wir bitte mal festhalten das Skiplinks NICHT Plichtprogramm sind?

"Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:

* H69: Providing heading elements at the beginning of each section of content (HTML)
* H50: Using structural elements to group links (HTML) "

etc.

Angemessene Headings, Navigation als Liste, und viele andere Techniken sind genauso gut wie skip links wenn das Endresultat stimmt (um das es ja jetzt in WCAG 2 geht, und nicht um spezifische Techniken wie "man muss 'nen Skiplink einbauen").

Permalink Der Caspers meinte am 07.01.2009:

Ok, hab's gerade nochmal nachgelesen: ja, es stimmt (wie du sagst), dass Überschriften und andere Strukturelemente ausreichen, um diese Bedingung zu erfüllen. Viele Hilfsmittel (z.B. verbreitete Screenreader und Lupenprogramme) und Browser (Opera ab Werk, Firefox mit Erweiterung) bieten dem Nutzer die Möglichkeit, diese Elemente zu verwenden, um innerhalb einer Seite zu navigieren. So weit, so gut.

Aaaaaber:

Bei einer Seite mit einer einigermaßen komplexen Überschriften-Struktur mit einer entsprechenden Anzahl von h1-h6 kommen da schon mal gerne eine zweistellige Anzahl an Tastendrücken zusammen, bis man da ist, wo man hinwill. Nicht gut. Klar, auch hier kann man im Screenreader die Überschriftenliste aufrufen und direkt zum gewünschten Inhalt springen.

Aber der Use Case »Nutzer mit motorischer Behinderung ohne Hilfsmittel« ist damit noch nicht erschlagen. Klar, man sollte jemanden rumschicken, der überall Opera installiert und den Leuten die entsprechenden Shortcuts beibringt. Aber so lange das nicht passiert ist halte ich Skip Links für ebenso wichtig.

Nebeinbei halte ich Skip Links auch für eine gute Hilfe für nicht-sehende Nutzer, um sich ein mentales Modell des Aufbaus der Seiten zu bauen (weil diese, wenn sinnvoll gewählt und betextet) gleich die wesentlichen Inhaltsblöcke der Seite auf einen Blick zeigen.

Permalink Henrike Döding meinte am 07.07.2009:

Hallo,

ich habe eine Anmerkung zum Unterpunkt 'Der obligatorische IE-Bug ...' .

Die dort vorgestellte Lösung mittels 'zoom:1;' funktioniert nicht im IE8.
Wird die o.a. Webseite im IE8 angezeigt, wird durch das Auswählen des
Skip-Links 'Zum Inhalt' über die Tab-Taste zwar der Anfang des
Inhaltsbereichs angezeigt, aber ein erneutes Drücken der Tab-Taste
führt wieder zurück zum Skip-Link.
Erst wenn im IE 8 die Tastaturnavigation eingeschaltet ist (s.u. 'Ansicht' oder in den Internetoptionen unter 'Erweitert - Barrierefreiheit') klappt es wie gewünscht. Änderungen sind also im CSS für den IE 8 nicht mehr notwendig.

Permalink Der Caspers meinte am 07.07.2009:

> Die dort vorgestellte Lösung mittels 'zoom:1;' funktioniert nicht im IE8.

Die Lösung mit zoom:1 greift auf die hasLayout-Eigenschaft älterer IEs zurück, die zum Glück in IE8 nicht mehr nötig ist, da dieses absonderliche Konstrukt dort endlich ausgebaut wurde.

> Erst wenn im IE 8 die Tastaturnavigation eingeschaltet ist (s.u. 'Ansicht'
> oder in den Internetoptionen unter 'Erweitert - Barrierefreiheit') klappt es
> wie gewünscht

Das ist richtig: wenn man die Tastaturnavigation im IE abschaltet, dann funktioniert die Tastaturnavigation im IE nicht mehr. Ich fürchte ich verstehe die Anmerkung nicht so ganz.

Permalink Perun meinte am 12.02.2010:

Was spricht den dagegen, die Skip-Links z. B. via text-indent zu verstecken oder die Schrift- und Hintergrundfrabe gleichzusetzen oder die Schriftgröße auf 0.1em zu setzen? Haben diese Methoden Nachteile?

Viele Grüße,
Vladimir

Kommentar abgeben?

 


Tipp: HTML ist nicht zulässig; Webadressen können Sie so: [url=domain.de]Text[/url] eingeben.