Barrierefreie Links und Schaltflächen gestalten

Ein Link, der nur „hier“ heißt, und ein Knopf, den kein Finger trifft, kosten jeden Tag Besucher. So gestaltest du barrierefreie Links und Schaltflächen, die man versteht und trifft.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Links und Schaltflächen: vorher und nachher

Vorher: Linktexte ohne Ziel, Knöpfe unter 24 Pixel Nachher: Ziel im Linktext, Klickflächen ab 44 Pixel

Vergleiche, was du mit dem Finger triffst und was ein Screenreader in der Linkliste vorliest. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum Linktexte und Schaltflächen barrierefrei sein müssen

Menschen mit Screenreader lassen sich oft eine Liste aller Links einer Seite vorlesen, um schnell das Richtige zu finden. Steht dort dreimal „hier klicken“ und zweimal „mehr“, hilft das niemandem. Ein guter Linktext beschreibt das Ziel auch ohne den Satz drumherum, etwa „Preisliste als PDF“ oder „Anfahrt mit Karte“.

Die zweite Hürde ist die Größe. Wer zittert, wer das Handy mit einer Hand bedient oder wer im Bus unterwegs ist, trifft winzige Symbole schlecht. Deshalb hat WCAG 2.2 eine Mindestgröße für Klickflächen eingeführt. Ein Ziel muss mindestens 24 mal 24 Pixel groß sein oder genug Abstand zu seinen Nachbarn haben, damit man nicht daneben tippt.

Schließlich müssen Links als Links erkennbar sein. Ein Verweis im Fließtext, der sich nur durch eine leicht andere Farbe abhebt, bleibt für Menschen mit Farbsehschwäche unsichtbar. Eine Unterstreichung oder ein anderes Merkmal neben der Farbe löst das Problem, und sie schadet dem Design weniger, als viele glauben.

WCAG 2.2

Was die WCAG hier verlangen

2.4.4 Stufe A

Linkzweck im Kontext

Der Zweck jedes Links ist aus dem Linktext oder seinem unmittelbaren Zusammenhang verständlich.
2.5.8 Stufe AA

Zielgröße (Minimum)

Neu in WCAG 2.2: Klickflächen sind mindestens 24 mal 24 Pixel groß oder haben ausreichend Abstand.
2.5.3 Stufe A

Beschriftung im Namen

Der sichtbare Text eines Knopfes ist auch Teil seines zugänglichen Namens, damit Sprachsteuerung funktioniert.
1.4.1 Stufe A

Benutzung von Farbe

Links im Fließtext sind nicht nur an der Farbe zu erkennen.

Lösung

So werden Links und Schaltflächen verständlich und treffsicher

Das Ziel in den Linktext

Schreib in den Linktext, wohin er führt oder was er tut. Bei Dateien gehören Format und Größe dazu, damit niemand überrascht wird.
Knöpfe für Aktionen, Links für Ziele

Ein Link führt woandershin, ein Knopf löst etwas aus. Wer beides richtig einsetzt, sorgt dafür, dass Screenreader die passende Rolle ansagen.
Mindestens 44 Pixel am Handy

Die Regel verlangt 24 Pixel, für Finger haben sich 44 Pixel bewährt. Abstand zwischen kleinen Symbolen verhindert zusätzlich Fehlgriffe.
Symbole beschriften

Ein Knopf, der nur ein Symbol zeigt, bekommt einen zugänglichen Namen, zum Beispiel über aria-label. Sonst hört man nur „Schaltfläche“.

Vorher

<a href="preise.pdf">hier</a>

<button class="x"></button>

Nachher

<a href="preise.pdf">
  Preisliste als PDF, 2 MB
</a>

<button aria-label="Dialog schließen"
  style="min-width:44px;
         min-height:44px">
</button>

Ein Linktext mit Ziel und ein beschrifteter, ausreichend großer Knopf sind für Screenreader, Sprachsteuerung und Finger gleichermaßen verständlich.

Fragen

Fragen zu Links und Schaltflächen

Ist „Mehr erfahren“ als Linktext erlaubt?

Wenn der Zusammenhang, etwa die Überschrift der Karte, eindeutig ist, ist es nach WCAG zulässig. Besser ist ein Linktext, der für sich allein verständlich ist, denn so steht er auch in der Linkliste klar da.

Wie groß müssen Schaltflächen sein?

Mindestens 24 mal 24 Pixel oder mit ausreichend Abstand zu anderen Zielen. Für Touch-Bedienung empfehlen sich 44 Pixel.

Müssen Links unterstrichen sein?

Links im Fließtext brauchen neben der Farbe ein zweites Merkmal. Die Unterstreichung ist das bekannteste und zuverlässigste.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest

Barrierefreie Links und Schalt­flächen gestalten