Sprunglink zum Inhalt

Was geprüft

Unter den ersten drei Links im <body> wird ein Sprunglink gesucht: ein Link auf eine Sprungmarke (#…) mit einem Text wie „Zum Inhalt springen“, „skip“ oder „content“. Unauffällig ist der Punkt, wenn das Ziel dieser Sprungmarke im HTML existiert. Ein Schalter wie #menu zählt nicht. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Niedrig, weil die Seite auch ohne Sprunglink bedienbar bleibt, nur umständlicher. Gemeldet wird auch, wenn ein Sprunglink auf ein nicht vorhandenes Ziel zeigt.

Warum

Wer mit der Tastatur bedient, muss ohne Sprunglink auf jeder Seite erst durch alle Menüpunkte tabben, bevor der Inhalt erreicht ist. Ein Sprunglink spart das mit einem Tastendruck. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Setzen Sie als ersten Link im <body> einen Sprunglink auf den Hauptbereich und geben Sie dem Ziel die passende id. Der Link darf visuell versteckt sein, muss aber beim Fokus sichtbar werden.

Nebenwirkung: Ein falsch gestylter Sprunglink ist dauerhaft sichtbar oder bleibt auch beim Fokus unsichtbar. Testen Sie mit der Tab-Taste direkt nach dem Laden der Seite.

WordPress: Viele aktuelle Themes bringen einen Sprunglink mit; Block-Themes setzen ihn automatisch, wenn ein <main>-Bereich vorhanden ist. Bei eigenen Themes fehlt oft die passende id am Inhaltsbereich.

Codebeispiel

HTML und CSS

<body>
  <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a>
  <header>...</header>
  <main id="inhalt" tabindex="-1">...</main>
</body>

<style>
  .sprunglink { position: absolute; left: -9999px; }
  .sprunglink:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; }
</style>

Weiterführende Quellen

• https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html
• https://www.w3.org/WAI/WCAG22/Techniques/general/G1