Skipper ahoj!

Am Anfang der meisten Webseiten finden wir oben im Header den Namen der Website, manchmal ergänzt um einen Slogan, und das Navigationsmenü. Wenn man zum Hauptinhalt möchte, ist der Header mit dem Auge schnell umschifft; mit der Maus ebenso.

Was aber ist mit Menschen, die Webseiten nicht visuell wahrnehmen, und jenen, die nicht mit einer Maus navigieren? Nutzer von Screenreadern orientieren sich an sogenannten Landmarks und können direkt zum Hauptinhalt (dem main-Element) gelangen. Oder sie springen von Überschrift zu Überschrift.

Menschen, die per Tastaur navigieren, aber keinen Screenreader benutzen, müssen auf jeder Webseite erst per Tab‐Taste das Navigationsmenü durchlaufen, ehe sie zu den interaktiven Elementen im Hauptinhalt gelangen. Besonders für diese Nutzergruppe ist eine Abkürzung hilfreich: ein Link am Seitenanfang, der zum Hauptinhalt führt – ein sogenannter Skip‐Link:

<body>
  <a id="skip-link" href="#main">zum Hauptinhalt</a>
  <header>
    ⋮
  </header>
  <main id="main" tabindex="-1">
    ⋮

oder

<body>
  <header>
    <a id="skip-link" href="#main">zum Hauptinhalt</a>
    ⋮
  </header>
  <main id="main" tabindex="-1">
    ⋮

tabindex="-1" ist notwendig, um Browserbugs auszugleichen. Ohne dieses Attribut setzt der Internet Explorer den Fokus nicht und auch auf iOS‐Geräten würden Skip‐Links nicht richtig funktionieren.

Nun soll der Skip‐Link aber nicht für alle sichtbar sein, sondern nur bei Tastaturbedienung sichtbar werden. Ihn mit display: none zu verstecken geht nicht; damit wäre er wirklich weg und könnte mit der Tab‐Taste nicht erreicht werden.

Wir werden den Skip‐Link absolut positionieren und ihn aus dem sichtbaren Bereich schieben – aber bitte nicht mit left nach Backbord.

Ich empfehle, ihn um seine eigene Höhe nach oben zu verschieben:

#skip-link
{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
}

Wenn der Skip‐Link bei Tastaturbedienung mit der Tab‐Taste den Fokus erhält, soll er natürlich sichtbar werden. Wir machen die Verschiebung aus dem sichtbaren Bereich rückgängig:

#skip-link:focus
{
  transform: translateY(0);
}

Der Skip‐Link legt sich nun über den anderen Seiteninhalt. Damit er sich von diesem erkennbar abhebt, wird er noch eingefärbt, beispielsweise weiße Schrift auf schwarzem Grund:

#skip-link
{
  background: black;
  color: white;
  padding: 0.25em;
}

Als Extra können wir das Rein‐/Rausfahren noch animieren. (Aber bitte nicht zu langsam; es geht nicht darum, den Effekt zu zeigen, sondern den Link.)

#skip-link
{
  transition: 0.2s transform;
}

Der ganze CSS‐Code sieht dann so aus:

#skip-link
{
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  color: white;
  padding: 0.25em;
  transform: translateY(-100%);
  transition: 0.2s transform;
}

#skip-link:focus
{
  transform: translateY(0);
}

Zu sehen ist ein Skip‐Link in diesem Beispiel.

Wir haben mit einfachen Mitteln und wenig Aufwand eine große Hilfe für etliche Nutzer implementiert. Barrierefreiheit muss nicht kompliziert sein.

Veröffentlicht von

Gunnar Bittersmann ist die lebende Vorlage für Waldorf oder Statler – er verrät aber nicht, für welchen der beiden. Er nickt aber auch schon mal bei einigen Showauftritten mit dem Kopf (sein Äquivalent zu »Applaus, Applaus, Applaus«), wenn bspw. Mr. John Allsopp sagt, dass responsive design und Webdesign doch dasselbe seien; oder wenn Mr. Jeremy Keith sagt, dass progressive enhancement ein wahrhaft befreiender Gedanke wäre. Gunnar lehnt sich auch gern mal beyond Logenrand … auf die Gefahr hin, abzustürzen und im Parkett aufzuschlagen.

3 Kommentare » Schreibe einen Kommentar

  1. Vielen Dank für diesen Artikel! Gerade seine Beschränkung auf ein sehr kleines Beispiel als Aufhänger, um in das Arbeiten mit Barrierefreiheit als Ziel tiefer hinein zu schauen, hat mich sehr überzeugt. Gute Arbeit!

    Hättest Du noch mehr so schöne kurze Artikel? Wahlweise auch mit Syntaxhighlighting… 😉

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.