Praxisleitfaden Links im Fließtext
Textlinks sichtbar vom Satz unterscheiden
Erkennen Sie unauffällige Verweise und beheben Sie den Befund durch Unterstreichung.
link-in-text-blockWCAG 1.4.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-link-in-text-block.html
Befund einordnen
Der Link geht im Absatz unter
Scanner-Signal
Axe meldet link-in-text-block am Link .stone-link: keine unterscheidende Gestaltung und 2,02:1 Kontrast zum umgebenden Text.
Technische Einordnung
- Regel
link-in-text-block- Referenz
- WCAG 1.4.1
Im Rohtranskript sind die Wörter „verlinkte Steinabschnitt“ ein Verweis. Ihre Schriftfarbe unterscheidet sich vom übrigen Satz, doch eine Unterstreichung fehlt. Der gemessene Helligkeitsunterschied reicht für einen allein über Farbe gestalteten Textlink nicht aus.
Bedeutung im Nutzungskontext
Menschen mit eingeschränkter Farbwahrnehmung oder Sehvermögen können den Verweis beim Lesen übersehen. Die nächste Information bleibt schwer auffindbar, obwohl der Link im HTML vorhanden ist.
Messung an der Fundstelle
Link: #a8b08d · Nachbartext: #f7f2e5
Kontrast zwischen den Textfarben: 2,02:1
text-decoration-line: noneTextlinks im gemeinsamen Stil prüfen
Eine Linkregel kann viele redaktionelle Texte betreffen. Prüfen Sie Unterstreichung und wechselnde Zustände nach der zentralen Korrektur.
- Transkript× Befund im Beispiel
- Fundbericht× Befund im Beispiel
- Übersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenKontrollieren Sie die normale Leseansicht sowie Hover, Fokus und besuchte Links.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Woran soll der Link erkennbar sein?
Prüfen Sie zuerst die normale Leseansicht, bevor Mauszeiger oder Tastaturfokus auf dem Link stehen.
Fundstelle ansehen
Der gesamte Transkriptabschnitt bleibt sichtbar
Überschrift, vollständiger Satz und benachbarte Einträge zeigen, wo der Verweis gelesen wird. Die Markierung grenzt genau die betroffenen Wörter ein.
Der Linktext „verlinkte Steinabschnitt“ steht mitten im Satz und ist nur etwas dunkler als der übrige Text. Ohne eine sichtbare Linie lässt sich seine Linkfunktion leicht übersehen.
Im CSS beheben
Die Unterstreichung dauerhaft einschalten
Am vorhandenen Link wird text-decoration von none auf underline gesetzt. Ein kleiner Abstand hält die Linie von den Buchstaben fern. Linktext, Ziel und Farben bleiben erhalten.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
none- Kommt hinzu
underline; text-underline-offset: 0.15em
Im CMS oder Designsystem Aktivieren Sie die Unterstreichung für Links in redaktionellen Textblöcken. Kontrollieren Sie die veröffentlichte Seite, weil Theme-Regeln die Einstellung überschreiben können.
Vollständigen Code vergleichen
Vorher
.rune-transcript .stone-link {
color: #a8b08d;
text-decoration: none;
}Nachher
.rune-transcript .stone-link {
color: #a8b08d;
text-decoration: underline;
text-underline-offset: 0.15em;
}Markierte Zeilen wurden geändert
Korrektur übertragen
Textlinks konsistent gestalten
Übertragen Sie die Regel auf die Textkomponente, aus der der Absatz stammt. So profitieren weitere Verweise derselben Art.
- 1
Prüfen Sie im berechneten CSS, ob die Unterstreichung am gerenderten Link ankommt.
- 2
Behalten Sie das sichtbare Merkmal auch bei besuchten Links sowie bei Hover und Fokus bei.
- 3
Prüfen Sie Zeilenumbrüche und Vergrößerung: Die Linie muss dem Linktext folgen und lesbar bleiben.
- 4
Kontrollieren Sie den Textkontrast zum Hintergrund zusätzlich mit der Regel color-contrast.
Fehlversuche vermeiden
Was den Link weiterhin versteckt
Nur bei Hover unterstreichen
Der Verweis muss zunächst gefunden werden. Touchbedienung bietet zudem keinen verlässlichen Hoverzustand.
Lediglich die Farbe wechseln
Eine andere Farbe ist noch kein ausreichender Helligkeitsunterschied. Messen Sie den Kontrast zum Nachbartext oder ergänzen Sie ein sichtbares Merkmal.
Kontrastwerte verwechseln
Der hier gemessene Wert vergleicht zwei Textfarben. Ob beide auf dem Hintergrund lesbar sind, ist eine zusätzliche Prüfung.
Nur einen zugänglichen Namen ergänzen
Ein aria-label verändert die visuelle Darstellung nicht. Bei diesem Befund fehlt eine sichtbare Unterscheidung im Absatz.
Die Linie behebt den gemessenen Befund
Nach der Korrektur erkennt Axe am selben Link die unterscheidende Gestaltung und meldet für link-in-text-block einen bestandenen Test. Im Bild ist die neue Unterstreichung sichtbar.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite ohne Hover oder Fokus auf dem Link: Die Linie muss schon sichtbar sein.
- Führen Sie link-in-text-block erneut an der geänderten Seite aus und vergleichen Sie die Fundstelle.
- Bedienen Sie den Verweis mit Tab und Enter; prüfen Sie Fokusmarkierung und erwartetes Ziel separat.
Verifiziert ist diese Regel an diesem Link. Weitere absichtlich eingebaute Fehler der Kalibrierseite sowie die fachliche Eignung des Linkziels sind damit nicht geprüft.
Nach der Korrektur
text-decoration-line: underline
Axe: link-in-text-block → pass an .stone-link
Textfarben unverändert; die Linie liefert das zusätzliche Merkmal.Prüfumfang
Automatisch erkennen, im Gebrauch nachprüfen
Der Scanner bewertet die untersuchte Darstellung des Links. Die Bedienung und wechselnde Zustände benötigen ergänzende Kontrollen.
Automatisch prüfbar
- Einen unzureichend unterschiedenen Textlink als Fundstelle markieren
- Den Kontrast zwischen Link und umgebendem Text messen
- Die ergänzte Unterstreichung bei einem erneuten Regellauf erkennen
Im Kontext zu entscheiden
- Erkennbarkeit bei Hover, Fokus, besuchten Links und angepassten Farben kontrollieren
- Tastaturbedienung und sichtbaren Fokus im vollständigen Nutzerweg prüfen
- Beurteilen, ob Linktext und Ziel zur erwarteten Information führen