Cookie-Einstellungen

Hier entscheidest du, welche Dienste wir verwenden dürfen. Du kannst deine Auswahl jederzeit ändern oder widerrufen.

Notwendig

Immer aktiv

Damit die Website funktioniert: gewählte Sprache, Anmeldung, Sicherheit und das Speichern deiner Cookie-Auswahl. Diese Cookies lassen sich nicht abschalten.

Hilft uns zu verstehen, welche Seiten gelesen werden und welche Schritte zu Download, Beta-Anfrage oder Kauf führen. Google erhält dafür pseudonyme Nutzungsdaten; IP-Adressen werden in Google Analytics 4 nicht gespeichert.

Details anzeigen
Anbieter
Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland
Cookies
_ga und _ga_<ID>: unterscheiden Besucher und Sitzungen, Speicherdauer bis zu 2 Jahre
Datenübermittlung
Eine Übermittlung an Google LLC in den USA ist möglich (EU-US Data Privacy Framework).

Mehr dazu in der Datenschutzerklärung
Kategorie
Plugin-Version
1.1.0-beta.29

Link-Optimierungen

Die Link-Funktion bietet zwei separate Optimierungen: Markierung externer Links und globales Link-Styling nach WCAG-Standards.

Die Link-Funktion besteht aus zwei Teilen:

  1. Externe Links optimieren: Markiert oder entfernt Links, die in neuen Tabs öffnen
  2. Globale Link-Stile: Wendet WCAG-konforme Link-Styles global an

Geführte Einrichtung im Adminbereich

Die beiden Module werden als getrennte Karten dargestellt und lassen sich unabhängig aktivieren. Abhängige Felder erscheinen nur, wenn sie relevant sind. Eine Live-Vorschau zeigt den Hinweis für neue Tabs, das optionale Icon und die Unterstreichung im Fließtext. Auf dem Desktop bleibt sie fixiert neben den Einstellungen, auf kleineren Bildschirmen steht sie davor. Die Seite warnt außerdem, wenn die Besucheroption Toolbar → Farben → Alle Links unterstreichen dieselben Links beeinflussen kann. Ausnahmen und Hover-Details bleiben in kompakten Aufklappbereichen erreichbar.

Standardwerte bei Neuinstallation

Hauptschalter und „Externe Links optimieren“ (Markierungsmodus) sind an; sichtbares Icon aus. „Globale Link-Stile“ sind aus.

Sinn und Einsatzmöglichkeiten

  • Für Screenreader-Nutzer: Klare Kennzeichnung externer Links
  • Für alle Besucher: WCAG-konforme unterstrichene Links für bessere Erkennbarkeit
  • WCAG-Konformität: Erfüllt WCAG 2.4.4 (Link Purpose), 3.2.5 (Change on Request), 1.4.1 (Use of Color), 1.4.3 (Contrast) und 1.4.11 (Non-text Contrast)
  • Barrierefreiheit: Links sind nicht nur durch Farbe erkennbar, sondern auch durch Unterstreichung

Relevante WCAG-Kriterien:

  • 2.4.4 Link-Zweck (im Kontext): Durch die Kennzeichnung wird das Verhalten des Links klarer.
  • 3.2.5 Änderung auf Anforderung: Das Entfernen von target=“_blank“ verhindert unerwartete Kontextwechsel.

Diese Funktion behandelt Links mit target="_blank", die in neuen Tabs öffnen.

Option 1: Markieren

  • Fügt einen unsichtbaren Text für Screenreader hinzu (z.B. „Hinweis: Der Link öffnet sich in einem neuen Tab“)
  • Optional: Fügt ein sichtbares Icon hinter dem Link hinzu
  • Informiert Nutzer im Voraus über das Verhalten des Links

Option 2: Entfernen

  • Entfernt das target=“_blank“-Attribut von allen Links
  • Links öffnen sich im selben Tab
  • Verhindert unerwartete Kontextwechsel

Konfiguration für Markierung:

  • Text für Screenreader: Unsichtbarer Text, der von Screenreadern vorgelesen wird
  • Sichtbares Icon hinzufügen: Aktivieren/deaktivieren
  • Icon-Stil: Standard, Alternative 1 oder Alternative 2
  • Icon-Größe: 8-32 Pixel
  • Vertikale Ausrichtung: Text-Top, Middle, Text-Bottom oder Baseline
  • Vertikale Feinabstimmung: Pixel-Offset für präzise Positionierung
  • Ausgeschlossene Links: CSS-Selektoren für Links, die ignoriert werden sollen

Diese Funktion wendet WCAG-konforme Link-Styles global auf alle Links an.

Warum globale Link-Stile?

  • WCAG-Anforderung: Links müssen nicht nur durch Farbe erkennbar sein (WCAG 1.4.1)
  • Bessere Erkennbarkeit: Unterstrichene Links sind für alle Nutzer leichter erkennbar
  • Konsistenz: Einheitliches Styling auf der gesamten Website
  • Barrierefreiheit: Besonders wichtig für Menschen mit Farbenblindheit

Basis-Link-Styles (Normalzustand):

  • Links unterstreichen: Aktiviert text-decoration: underline
  • Unterstreichungsfarbe: RGBA-Farbe für die Unterstreichung (optional, Standard: Browser-Default)
  • Unterstreichungsabstand: Abstand zwischen Text und Unterstreichung (Standard: 0.15em)
  • Unterstreichungsstärke: Stärke der Unterstreichung (Standard: 0.1em)

Hover-Styles:

  • Unterstreichungsstärke erhöhen: Erhöht die Stärke beim Überfahren mit der Maus
  • Stärke-Erhöhung: Zusätzliche Stärke beim Hover (Standard: 0.04em)
  • Hover-Unterstreichungsfarbe: Andere Farbe für die Unterstreichung beim Hover (optional)
  • Link-Textfarbe beim Hover: Andere Textfarbe beim Hover (optional)

Ausgeschlossene Links:

  • CSS-Selektoren für Links, die keine globalen Styles erhalten sollen (z.B. Navigation, Buttons)

Anwendungsbeispiele

Beispiel 1: Externe Links markieren

Aktiviere „Externe Links optimieren“ mit „Markieren“. Füge ein sichtbares Icon hinzu (Standard-Stil, 16px). Verwende einen Text für Screenreader: „Hinweis: Der Link öffnet sich in einem neuen Tab“. Schließe Navigation-Links aus.

Beispiel 2: Externe Links entfernen

Aktiviere „Externe Links optimieren“ mit „Entfernen“. Alle Links öffnen sich im selben Tab. Dies verhindert unerwartete Kontextwechsel und ist WCAG-konformer.

Beispiel 3: Globale Link-Stile aktivieren

Aktiviere „Globale Link-Stile“. Unterstreiche alle Links mit einer blauen Unterstreichung (0.1em). Erhöhe die Stärke beim Hover auf 0.14em. Schließe Navigation und Buttons aus.

Beispiel 4: Kombinierte Konfiguration

Markiere externe Links mit Icon. Aktiviere globale Link-Stile mit Unterstreichung. Verwende unterschiedliche Farben für normale Links und Hover-Zustand. Schließe Footer-Links und Navigation aus.

Tipps

  • Für beste WCAG-Konformität: Entferne target=“_blank“ oder markiere es klar
  • Verwende kontrastreiche Farben für Icons und Unterstreichungen
  • Teste die Icon-Positionierung auf verschiedenen Schriftgrößen
  • Die globale Link-Unterstreichung sollte aktiviert sein, wenn Links nur durch Farbe erkennbar sind
  • Schließe Navigation, Buttons und andere speziell gestylte Links aus
  • Verwende die Hover-Effekte sparsam – zu viele Änderungen können ablenken
  • Teste die Link-Styles auf verschiedenen Browsern und Geräten
  • Die Besucheroption Toolbar → Farben → Alle Links unterstreichen kann mit den globalen Link-Stilen kollidieren – prüfe beide Funktionen

Häufige Probleme

Problem: Icon wird nicht angezeigt

Lösung: Prüfe, ob „Sichtbares Icon hinzufügen“ aktiviert ist. Prüfe die Icon-Größe und Position. Teste mit verschiedenen Browsern.

Problem: Globale Link-Stile werden nicht angewendet

Lösung: Prüfe, ob die Funktion aktiviert ist. Prüfe, ob Links von den Ausnahmen ausgeschlossen sind. Prüfe, ob Theme-CSS die Styles überschreibt.

Problem: Konflikt mit Toolbar-Funktion

Lösung: Wenn Toolbar → Farben → Alle Links unterstreichen aktiviert ist, kann es zu Konflikten kommen. Deaktiviere eine der beiden Funktionen oder teste beide parallel.

Technische Details

  • Externe Links werden mit JavaScript identifiziert und angepasst
  • Die Icon-Implementierung verwendet SVG für bessere Skalierbarkeit
  • Globale Link-Stile werden mit CSS implementiert und funktionieren ohne JavaScript
  • Die Unterstreichung verwendet text-decoration-thickness und text-underline-offset (moderne Browser)
  • Für ältere Browser wird ein Fallback verwendet
  • Die Ausnahmen werden mit CSS-Selektoren implementiert

Verfügbar für: Alle Pläne Free

Fokussierte Leseansicht

Lesemodus