Deutsch
Website-Menü

link-in-text-block

Links in Textblöcken müssen sich vom umgebenden Text unterscheiden, ohne sich allein auf Farbe zu stützen

automaticWCAG 1.4.1 (A)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass sich ein Link innerhalb eines Textblocks durch ein nicht farbliches Merkmal (Unterstreichung, Schriftstärke oder -stil, Rahmen, Hintergrund, Icon) visuell vom umgebenden Text abhebt, und fragt bei Links nach, die sich nur durch einen Farbunterschied von >=3:1 abheben und zusätzlich ein Merkmal bei Hover und Fokus brauchen.

Anwendbarkeit. Gilt für Links (<a href> und Elemente, deren role-Attribut zu link aufgelöst wird: Ihr erstes bekanntes Rollen-Token ist, ohne Berücksichtigung der Groß-/Kleinschreibung, link), die Text zeichnen (Text außer Leerraum im Flat Tree des Links und, wo die Seite ein Layout hat, eine Box mit einer Fläche) und deren unmittelbares Elternelement daneben ebenfalls Text mit einem Buchstaben oder einer Ziffer enthält: einen direkten Textknoten oder Text in einem Inline-Element in derselben Zeile, das kein Link ist, nicht unsichtbar gezeichnet wird und kein Element eines Flex- oder Grid-Elternelements ist (d. h. der Link steht inline in einem Textfluss, nicht als eigenständiges Element, z. B. nicht als einziger Inhalt eines <li>-Navigationspunkts und auch nicht als einer aus einer Reihe von Links, die durch „|“ oder „·“ getrennt sind). Ein Custom Element, dem seine ElementInternals die Rolle link geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.

Erwartung. Ein Link innerhalb eines Textblocks muss sich durch mindestens ein nicht farbliches Mittel visuell vom umgebenden Text abheben:

  • text-decoration: underline, ODER
  • eine andere font-weight oder font-style als der umgebende Text, ODER
  • eine andere sichtbare Markierung am Link selbst: ein Rahmen, box-shadow oder outline, eine vom Umfeld abweichende Hintergrundfarbe, ein Hintergrundbild, ein Bild oder svg darin oder ein ::before/::after, das etwas zeichnet (eigenen Inhalt oder eine leere Box, die einen Hintergrund, einen Rahmen, eine outline oder einen Schatten zeichnet, wie es eine so gezeichnete Unterstreichung tut), ODER
  • eine Markierung auf seinem gesamten Inhalt: fett, kursiv, unterstrichen, umrahmt, ein Hintergrund, der sich von dem des umgebenden Texts unterscheidet (ein Code-Chip, <mark>), oder hoch- bzw. tiefgestellt (das <sup> einer Fußnote).

Ein Link ohne all das hebt sich nur durch die Farbe ab. Kontrastiert seine Farbe mit dem umgebenden Text um mindestens 3:1, ist Technik G183 nur erfüllt, wenn Hover und Fokus zusätzlich ein nicht farbliches Merkmal bringen, was ein statischer Scan nicht sehen kann; der Link wird daher als cantTell gemeldet. Unter 3:1, bei sicher berechenbarem Kontrast, ist die Farbe nachweislich das einzige Merkmal, und der Link ergibt fail. Das Verhältnis zwischen der Farbe des Links und der des Texts braucht keinen Hintergrund; wo also nur der Hintergrund oder ein Effekt, der auf beide gleich wirkt, die Messung verhindert, entscheiden trotzdem zwei deckende Textfarben. Abstand zum Grenzwert (contrast-ratio): unter den Links, die sich nur durch die Farbe abheben und 3:1 erreichen, derjenige, der diesem Wert am nächsten kommt, mit seinem ungerundeten Verhältnis. Zu diesen Links wird ebenfalls nachgefragt (das nicht farbliche Merkmal bei Hover und Fokus), daher erscheint der Abstand zum Grenzwert bei einem cantTell- oder fail-Ergebnis. Nur ein Link innerhalb von 10 % von 3:1 (bis 3,3:1) gilt als knapp. measuredCount zählt die Links, deren einziges Merkmal die Farbe ist.

Was ein Befund meldet.

  • metrics.ratio (ein nur durch Farbe abgehobener Link): der Kontrast zwischen der Textfarbe des Links und der des umgebenden Texts, als Verhältnis (3 für 3:1), verglichen mit metrics.threshold (3).
  • metrics.ratioBeforeOpacity (ein nur durch Farbe abgehobener Link, unter ANCESTOR_OPACITY): dieses Verhältnis, bevor die opacity eines Vorfahren den Link und den Text gleichermaßen verblassen lässt, anstelle von metrics.ratio. Das Verblassen bringt die beiden Farben näher zusammen, das gezeichnete Verhältnis kann also niedriger sein: Unter 3:1 ergibt der Link trotzdem fail, ab 3:1 wird ohne Tendenz zu pass nachgefragt, und er liefert keinen Abstand zum Grenzwert.
  • colors.linkForegroundHex, colors.surroundingTextForegroundHex (ein nur durch Farbe abgehobener Link): die Textfarbe des Links und die des umgebenden Texts, als Hex.
  • colorScheme (ein Link mit eigener Hintergrundfarbe auf der Canvas einer Seite, die hell und dunkel unterstützt): 'light' oder 'dark', das Schema, in dem dieser Hintergrund ihn nicht von der umgebenden Canvas abhebt, während er es im anderen tut; Verhältnis und Farben sind die dieses Schemas. Fehlt, wo er es in jedem gemessenen Schema verfehlt.
  • colorSchemesChecked (derselbe Link): die Schemata, in denen er verglichen wurde, wenn die Seite beide unterstützt und eines nicht gemessen werden konnte (seine Farben oder die Hintergründe um ihn herum können sich mit dem Schema ändern). Ein Binding kann mit dem Browser im anderen Schema erneut scannen.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Abstand zum Grenzwert. Diese Regel misst contrast-ratio als Verhältnis, und der Wert muss den Grenzwert erreichen. Lag ein bestandenes Ergebnis nahe am Grenzwert, nennt das Feld margin des Ergebnisses das Element, das ihm am nächsten kam und ihn trotzdem einhielt. So zeigt sich ein knappes Ergebnis, bevor eine kleine Änderung es kippt. Anders als die Felder eines Befunds ist es ein stabiler Vertrag. Siehe Ausgabeschema.

Beispiele

pass
<p>Read <a href="#" style="text-decoration:underline">this underlined link</a> for more information.</p>

Der Link ist unterstrichen und hebt sich damit nicht nur durch die Farbe vom umgebenden Text ab.

fail
<p style="color:#222222; background:#ffffff;">Read <a href="#" style="text-decoration:none; color:#2a2a2a;">this link</a> for more information.</p>

Der einzige Unterschied zum umgebenden Text ist eine Farbänderung mit einem Kontrast von etwa 1,1:1, deutlich unter dem Minimum von 3:1, ohne Unterstreichung und ohne Änderung von Schriftstärke oder Schriftstil.

can't tell
<p style="color:#000000;">Read <a href="#" style="text-decoration:none; color:#d00000;">this link</a> for more information.</p>

Die Farbe des Links kontrastiert mit dem Text um mehr als 3:1, aber die Farbe ist sein einziges Merkmal. Technik G183 braucht zusätzlich ein nicht farbliches Merkmal bei Hover und Fokus, was eine Person prüft.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

ANCESTOR_OPACITY

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; lesen Sie die Farben vom Bildschirm ab, da die Abschwächung sie verändert.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; lesen Sie die Farben vom Bildschirm ab, da der Filter sie verändert.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

BACKGROUND_IMAGE_OR_GRADIENT

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird und nicht nur durch seine Farbe über dem Hintergrundbild.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz; die Seite setzt keinen opaken Hintergrund, sodass um ihn herum die Leinwand zu sehen ist, die der Browser malt, oder in einem Frame die umgebende Seite.
  2. Betrachten Sie die Seite dort, wo sie angezeigt wird: in der Seite, die sie einbettet, ohne erzwungene Farben und in jedem Farbschema, das die Seite unterstützt (hell und dunkel).
  3. Prüfen Sie in jeder Einstellung, ob sich die Hintergrundfarbe des Links vom Hintergrund um ihn herum abhebt oder ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal den Link abhebt.

Bestanden. In jeder Einstellung, in der die Seite angezeigt wird, hebt sich der Hintergrund des Links von dem um ihn herum ab, oder ein anderes nicht farbliches Merkmal hebt den Link ab.

Nicht bestanden. In einer Einstellung gleicht der Hintergrund des Links dem um ihn herum, und nur ein Farbunterschied von weniger als 3:1 hebt den Link ab; das verstößt gegen WCAG 1.4.1 (F73).

BACKGROUND_OVERLAP

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird und nicht nur durch seine Farbe.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

COLOR_NOT_COMPUTABLE

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link auf dem Bildschirm durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

CONTRAST_HELPERS_UNAVAILABLE

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

ELEMENT_OPACITY

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; lesen Sie seine Farbe vom Bildschirm ab, da seine eigene opacity sie verändert.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

ENGINE_EXCEPTION

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz; der Bericht nennt seinen Kontrast zum umgebenden Text.
  2. Bewegen Sie den Zeiger über den Link und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.
  3. Klicken Sie direkt vor den Link, drücken Sie Tab, bis er den Fokus hat, und prüfen Sie erneut, ob ein nicht farbliches Merkmal erscheint.

Bestanden. Sowohl Hover als auch Fokus fügen dem Link ein nicht farbliches Merkmal hinzu, etwa eine Unterstreichung.

Nicht bestanden. Hover oder Fokus ändern nur die Farbe, sodass allein die Farbe den Link abhebt; das verstößt gegen WCAG 1.4.1 (G183, F73).

MIX_BLEND_MODE

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; lesen Sie die Farben vom Bildschirm ab, da das Mischen sie verändert.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

PSEUDO_ELEMENT_COLOR

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; steht er in der ersten Zeile oder auf dem ersten Buchstaben des Absatzes, vergleichen Sie ihn mit dem Text dieser Zeile.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

SELECT_OPTION_COLOR

  1. Suchen Sie die im Bericht genannte Auswahlliste und öffnen Sie ihre Optionsliste.
  2. Betrachten Sie die im Bericht genannte Option neben dem Text der anderen Optionen.
  3. Prüfen Sie, ob sie durch etwas anderes als Farbe abgehoben wird (eine Unterstreichung, Fettdruck, eine Markierung); unterscheidet sich nur die Farbe, lesen Sie beide Farben mit der Pipette des Farbwählers ab und prüfen Sie, ob der Kontrast mindestens 3:1 beträgt.

Bestanden. Die Option wird durch ein nicht farbliches Merkmal abgehoben, oder ihre Farbe hebt sich vom übrigen Text mit mindestens 3:1 ab und beim Fokus erscheint ein nicht farbliches Merkmal.

Nicht bestanden. Allein die Farbe hebt die Option ab, unter 3:1 oder ohne anderes Merkmal; das verstößt gegen WCAG 1.4.1 (F73).

TEXT_DECORATION_NOT_RESOLVABLE

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link auf dem Bildschirm unterstrichen ist oder durch Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

TEXT_SHADOW

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; ein Schatten, den er mit dem Text teilt, zählt nicht.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

TEXT_STROKE

  1. Suchen Sie den im Bericht genannten Link in seinem Absatz und betrachten Sie ihn neben dem umgebenden Text.
  2. Prüfen Sie, ob der Link durch eine Unterstreichung, Fettdruck, Kursivschrift, einen Rahmen oder ein anderes Merkmal abgehoben wird; lesen Sie die Farben vom Bildschirm ab, wo die Kontur gezeichnet ist.
  3. Unterscheidet sich nur die Farbe, lesen Sie mit der Pipette des Farbwählers in den Entwicklertools die dargestellte Link- und Textfarbe ab und prüfen Sie, ob ihr Kontrast mindestens 3:1 beträgt.
  4. Bewegen Sie dann den Zeiger über den Link und springen Sie mit Tab darauf, und prüfen Sie, ob eine Unterstreichung oder ein anderes nicht farbliches Merkmal erscheint.

Bestanden. Der Link hat ein nicht farbliches Merkmal wie eine Unterstreichung, Fettdruck oder einen Rahmen, oder seine Farbe hebt sich vom Text mit mindestens 3:1 ab und Hover und Fokus fügen ein nicht farbliches Merkmal hinzu.

Nicht bestanden. Der Link hat kein nicht farbliches Merkmal und unterscheidet sich vom Text nur durch die Farbe, mit weniger als 3:1 oder ohne nicht farbliches Merkmal bei Hover und Fokus; das verstößt gegen WCAG 1.4.1 (F73).

Quellcode ansehen