Skipper ahoj! von Felix Riesterer, 30.07.2018 16:03

Weblog

Skipper ahoj!

Gunnar Bittersmann 15.07.2018 16:26 (Versionen)

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.

Siehe auch