Die eine Zeile HTML, die auf fast jeder Website fehlt

Drück auf einer beliebigen Website einmal die Tabulatortaste. Der Tastaturfokus springt auf das erste anklickbare Element im Quelltext, meistens ist das Logo. Noch ein Tab, und du stehst im Hauptmenü. Bei einer normalen Firmenseite liegen zwischen dem Seitenanfang und der ersten Zeile des eigentlichen Inhalts zwanzig bis fünfzig solcher Stationen: Logo, acht Menüpunkte, ein aufklappendes Untermenü mit zwölf Leistungen, Suchfeld, Sprachumschalter, Telefonnummer und Anfrage-Button.

Wir prüfen deutsche Firmenwebsites automatisiert auf Barrieren, ohne dass die Betreiber uns dafür beauftragt hätten, und ein Befund aus der letzten Runde ist unmissverständlich. Auf 98,0 Prozent der 14.984 von uns geprüften deutschen Firmenwebsites fehlt der Sprunglink zum Inhalt. Er ist damit die mit Abstand häufigste Barriere unserer Erhebung. Es ist zugleich die billigste Reparatur überhaupt. Zehn Zeilen HTML und CSS reichen aus, eine halbe Stunde inklusive Testen, und die Sache ist für die gesamte Website erledigt.

Mit der Maus merkst du von den zwanzig bis fünfzig Stationen nichts, weil du direkt dahin klickst, wo du hinwillst. Wer keine Maus benutzt, geht sie alle ab. Das betrifft Menschen mit Zittern oder Lähmungen, Menschen an Screenreadern, Menschen mit Kopfschalter oder Sprachsteuerung, und ganz nebenbei jeden, der gerade einen Arm in Gips hat. Diese Runde beginnt auf jeder Unterseite von vorn, auch dann, wenn derselbe Mensch nur zu einer Seite zurückgeht, die er zwei Minuten vorher schon gelesen hat.

Dagegen gibt es seit den neunziger Jahren den Sprunglink. Das ist ein einzelner Link ganz oben im Quelltext, der direkt zum Hauptinhalt führt. Er bleibt unsichtbar, solange niemand ihn braucht, und er wird sichtbar, sobald der Tastaturfokus ihn erreicht. Wer Tab drückt, sieht als Erstes einen kleinen Kasten mit der Aufschrift "Zum Inhalt springen", drückt Enter und ist da.

Warum ausgerechnet diese Zahl so hoch liegt

Fehlende Bildbeschreibungen oder zu blasse Schriftfarben findet man auch auf sehr vielen Seiten, aber die kosten dauerhaft Arbeit, weil jedes neue Bild und jede neue Seite mitgepflegt werden will. Der Sprunglink wird einmal eingebaut und ist danach fertig. Dass ihn trotzdem nur etwa 300 der geprüften Seiten haben, liegt selten an Bequemlichkeit. Meistens weiß niemand im Haus, dass es dieses Ding überhaupt gibt, weil man es im fertigen Layout nie zu Gesicht bekommt.

Der Code, vorher und nachher

So sieht der Anfang einer typischen Seite aus. Nach dem öffnenden Body-Tag kommt sofort die Kopfzeile mit Logo und Navigation.

<body>
  <header>
    <a href="/"><img src="/logo.svg" alt="Musterfirma"></a>
    <nav>
      <a href="/leistungen">Leistungen</a>
      <a href="/referenzen">Referenzen</a>
      <a href="/kontakt">Kontakt</a>
    </nav>
  </header>
  <main>
    <h1>Willkommen bei der Musterfirma</h1>
  </main>
</body>

Und so danach. Es kommt eine Zeile dazu, und der Hauptinhalt bekommt eine ID sowie ein tabindex.

<body>
  <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
  <header>
    <a href="/"><img src="/logo.svg" alt="Musterfirma"></a>
    <nav>
      <a href="/leistungen">Leistungen</a>
      <a href="/referenzen">Referenzen</a>
      <a href="/kontakt">Kontakt</a>
    </nav>
  </header>
  <main id="inhalt" tabindex="-1">
    <h1>Willkommen bei der Musterfirma</h1>
  </main>
</body>

Dazu gehört ein Stück CSS, das den Link aus dem Bild schiebt und ihn beim Fokussieren zurückholt.

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #ffffff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  text-decoration: underline;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

Zwei Details in diesem Code werden gern übersehen. Das tabindex="-1" am main macht den Inhaltsbereich programmatisch fokussierbar, denn ohne dieses Attribut nimmt er den Fokus nicht an. Je nach Browser und Screenreader scrollt die Seite dann zwar an die richtige Stelle, der Fokus bleibt aber davor stehen, und der nächste Tab wirft dich zurück ins Menü. An der Tastatur fühlt sich das an wie ein kaputter Link. Der zweite Punkt betrifft die Positionierung. Wenn deine Kopfzeile beim Scrollen mitfährt, nimm position: fixed statt position: absolute, damit der Kasten beim Fokussieren im sichtbaren Bereich landet und nicht hinter der Leiste verschwindet.

Warum display none den Link zerstört

Der naheliegende Weg, einen Link unsichtbar zu machen, ist display: none. Der funktioniert hier nicht. Ein Element mit display: none wird vom Browser komplett aus dem Layout und aus dem Zugänglichkeitsbaum entfernt. Es existiert für die Tastatur nicht mehr, kann also auch keinen Fokus bekommen, und der Sprunglink wird nie sichtbar. Dasselbe gilt für visibility: hidden und für das Attribut hidden.

Deswegen der Umweg über eine Position weit außerhalb des Fensters. Das Element bleibt gerendert und fokussierbar, es steht nur an einer Stelle, die niemand sieht. Wer es noch sauberer haben will, nimmt statt left: -9999px die Kombination aus clip-path: inset(50%), einem Pixel Breite und Höhe und overflow: hidden und setzt diese Werte beim Fokussieren zurück. Das erspart dir den Nebeneffekt, dass manche Browser beim Fokussieren kurz nach links wegscrollen. Beide Varianten sind seit Jahren erprobt, such dir eine aus.

Der Test dauert keine zwei Minuten

Du brauchst dafür kein Werkzeug, keine Erweiterung und keinen Account, sondern nur den Browser, den du sowieso offen hast.

Öffne die Startseite deiner Website ganz normal.
Klicke einmal auf eine leere Fläche im Text, also nicht auf einen Link, ein Bild oder ein Eingabefeld. Damit liegt die Tastatur in der Seite und nicht in der Adresszeile.
Drück einmal die Tabulatortaste, und zwar wirklich nur einmal.
Schau in die obere linke Ecke des Fensters. Erscheint dort ein Kasten mit einer Beschriftung wie "Zum Inhalt springen", hast du einen Sprunglink.
Bekommt stattdessen das Logo oder der erste Menüpunkt einen Rahmen, fehlt er. Passiert gar nichts Sichtbares, ist er entweder nicht vorhanden oder falsch versteckt, was auf dasselbe hinausläuft.
Wenn der Kasten da ist, geh noch einen Schritt weiter. Drück Enter und danach noch einmal Tab. Der Fokus muss jetzt auf einem Element im Inhaltsbereich stehen. Landest du wieder im Menü, fehlt das tabindex="-1".

Mach den Test auch auf einer Unterseite und im Onlineshop, falls du einen hast. Manche Baukästen setzen den Link nur auf der Startseite.

Wo der Link bei WordPress und Shopify hingehört

Bei WordPress hängt es am Theme. Die mitgelieferten Block-Themes bringen einen Sprunglink mit, viele gekaufte Themes nicht. Wenn deiner fehlt, gehört er in die header.php deines Child-Themes, direkt hinter das öffnende <body>. Sauberer geht es über die Aktion wp_body_open in der functions.php, weil dein Code dann ein Theme-Update übersteht. Die passende Ziel-ID findest du im Quelltext der Seite, meistens heißt sie main, content oder primary. Klick mit der rechten Maustaste auf die Seite, wähle den Punkt Seitenquelltext anzeigen und such darin nach <main.

Bei Shopify liegt der richtige Ort in layout/theme.liquid, ebenfalls unmittelbar nach dem öffnenden Body-Tag. Das Standard-Theme Dawn hat den Link bereits eingebaut und zielt auf #MainContent. Bei älteren oder gekauften Themes trägst du ihn selbst nach und legst das CSS in assets/base.css ab. Setz ihn nicht in eine einzelne Section oder Vorlage, sonst existiert er nur auf einem Teil deiner Seiten.

Ein Zusatzwerkzeug wie unser Widget kann vieles im Nachhinein verbessern, etwa Kontraste, Schriftgrößen oder das Vorlesen. Der Sprunglink gehört trotzdem in deinen eigenen Quelltext, weil er zur Struktur der Seite gehört und nicht zu ihrer Darstellung.

Wenn du beim Test keinen Kasten gesehen hast, lohnt sich gleich noch ein zweiter Durchgang. Halt den Finger auf der Tabulatortaste und geh die ganze Seite einmal durch. Achte darauf, an welchen Stellen der Fokusrahmen verschwindet, wo er in einem geschlossenen Menü hängen bleibt und wo er in einer Reihenfolge springt, die nichts mit dem zu tun hat, was du auf dem Bildschirm siehst. Diese drei Beobachtungen kosten dich fünf Minuten und sagen dir mehr über die Bedienbarkeit deiner Website als jeder automatische Testbericht.