Links mit unterschiedlichen Zielen

Silktide findet Links auf einer Seite, die denselben Text haben, aber auf unterschiedliche Ziele verweisen. Wenn zwei gleich aussehende Links zu verschiedenen Orten führen, können Nutzende sie nicht unterscheiden, ohne jedem einzelnen zu folgen.

<!-- Zwei "News"-Links, die auf unterschiedliche Seiten führen -->
<p>Erfahren Sie das Neueste über unsere Produkte: <a href="/products/news">News</a></p>
<p>Erfahren Sie das Neueste über unsere Services: <a href="/company/news">News</a></p>

Warum das wichtig ist

Menschen, die einen verwenden, rufen häufig eine Liste aller Links auf der Seite auf – ohne Kontext. Zwei Links, die beide als "News" angekündigt werden, aber zu unterschiedlichen Seiten führen, sind in dieser Liste nicht zu unterscheiden, sodass die Person jeden einzelnen öffnen muss, um herauszufinden, wohin er führt. Dieselbe Mehrdeutigkeit betrifft Nutzende von Spracherkennung, die Links auswählen, indem sie ihren Namen laut sagen.

So beheben Sie das

Geben Sie jedem Link einen eindeutigen sichtbaren Text, der sein Ziel beschreibt, z. B. "Produktneuigkeiten" und "Unternehmensneuigkeiten".
Wenn das Design nicht geändert werden kann, fügen Sie ein -Label hinzu, um die Links zu unterscheiden, ohne das für sehende Nutzende sichtbare Erscheinungsbild zu ändern:

<!-- Das aria-label wird zum Namen, den Screenreader ansagen -->
<a href="/products/news" aria-label="Produktneuigkeiten">News</a>
<a href="/company/news" aria-label="Unternehmensneuigkeiten">News</a>

Alternativ können Sie zusätzlichen Text innerhalb des Links einfügen, der visuell verborgen ist, aber von Screenreadern gelesen wird (zum Beispiel ein <span>, das mit einer nur-für-Screenreader-CSS-Klasse gestaltet ist).
Wenn die Links für die Nutzenden funktional gleichwertig sind - zum Beispiel leiten sie auf dieselbe Seite weiter - Sie den Fund.

So testet Silktide dies

Finden Sie alle Links auf der Seite und überspringen Sie dabei alle Elemente, die Sie von der Prüfung ausgeschlossen haben.
Ermitteln Sie den jedes Links - den Text, den ausgeben; dieser umfasst ARIA-Labels und Bild-, nicht nur den sichtbaren Text.
Normalisieren Sie zum Vergleich das Ziel jedes Links: Fragmente (der Teil nach #), Query-Strings (der Teil nach ?), das URL-Schema und abschließende Schrägstriche werden ignoriert.
Wenn Links mit demselben zugänglichen Namen auf mehr als ein unterschiedliches Ziel verweisen, werden alle markiert.

Fehlerbehebung

Links zu verschiedenen Abschnitten derselben Seite werden nicht markiert

Da Fragmente beim Vergleich von Zielen ignoriert werden, gelten Links wie /guide#intro und /guide#pricing als dasselbe Ziel. Das ist beabsichtigt: Beide führen zur selben Seite.

Links, die sich nur durch Tracking-Parameter unterscheiden, werden nicht markiert

Query-Strings werden beim Vergleich von Zielen ignoriert, daher gelten /offers?src=header und /offers?src=footer als dieselbe Seite statt als unterschiedliche Ziele.