Accessible Link
Ein Link muss dreimal bestehen
Name, Erkennbarkeit, Zielgröße: drei Prüfungen für jeden Link.
Drei Prüfungen
Ein Link muss dreimal bestehen
Name, Erkennbarkeit, Zielgröße.
- 5 von 6
- Links ohne Ziel im Text
- 1,97:1
- Kontrast Link zu Fließtext
- 18 px
- Zielgröße, 24 sind Pflicht
Wort im Link, Unterstreichung, 44 Pixel: drei Zeilen Code.
Aus dem Prüfbericht
Drei Prüfungen, drei Befunde
Kritisch „hier“ und „mehr“ sagen kein Ziel Regel link-name
In der Linkliste eines Vorleseprogramms stehen nur die Linktexte. Der Text nennt das Ziel.
Kritisch Der Link im Fließtext ist nur farbig Regel link-in-text-block
Farbe allein reicht nicht. Eine Unterstreichung macht den Link auch ohne Farbsehen erkennbar.
Kritisch Das Ziel ist zu klein Regel target-size
18 mal 18 Pixel trifft kein Finger sicher. 24 mal 24 sind Pflicht, 44 sind bequem.
Zum Mitnehmen
Die Links, korrigiert
Ein Wort im Text, eine Zeile CSS, ein Mindestmaß.
Korrektur in 3 Schritten ansehen
Das Ziel in den Linktext schreiben
Der Linktext steht für sich. Er nennt, wohin es geht, auch ohne den Satz davor.
KorrekturvergleichSchritt 1 · HTML Vorher
<p>Störungen melden Sie <a href="/stoerung">hier</a>.</p>Nachher
<p><a href="/stoerung">Störung online melden</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag sagt sein Ziel.
Links im Fließtext unterstreichen
Die Unterstreichung macht den Link unabhängig von Farbe erkennbar.
KorrekturvergleichSchritt 2 · CSS Vorher
p a { color: #3b2bbd; text-decoration: none; }Nachher
p a { color: #3b2bbd; text-decoration: underline; text-underline-offset: 0.15em; }Markierte Zeilen wurden geändert
So prüfen Sie es Schalten Sie die Seite auf Graustufen. Der Link bleibt im Absatz erkennbar.
Symbol-Links auf 44 Pixel bringen
Ein Mindestmaß aus CSS macht jedes Symbol treffbar, ohne das Icon zu vergrößern.
KorrekturvergleichSchritt 3 · CSS Vorher
.icon-link { display: inline-block; width: 18px; height: 18px; }Nachher
.icon-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }Markierte Zeilen wurden geändert
So prüfen Sie es Messen Sie das Symbol in den Entwicklerwerkzeugen. Die Fläche ist jetzt 44 mal 44 Pixel.