Fehlender Anker
Silktide testet Links, die auf einen bestimmten Teil derselben Seite zeigen – etwa
#content –, und meldet diejenigen, deren Ziel nicht existiert. Ein Klick auf einen
solchen Link tut stillschweigend nichts und lässt die Nutzer dort, wo sie waren.
<!-- Defekt: Nichts auf der Seite hat id="content" -->
<a href="#content">Zum Inhalt springen</a>
<!-- Behoben: Das Ziel existiert -->
<a href="#content">Zum Inhalt springen</a>
...
<main id="content">...</main>
Warum das wichtig ist
Links zu fehlenden Ankern schlagen stillschweigend fehl: Es gibt keine Fehlerseite, die Seite bewegt sich einfach nicht. Für sehende Nutzer ist das verwirrend; für - und Tastaturnutzende ist es schlimmer, denn diese seiteninternen Links sind oft genau die Mechanismen – wie "Zum Inhalt springen" oder ein Inhaltsverzeichnis –, die eine lange Seite navigierbar machen. Ein defekter Anker entfernt diese Abkürzung unbemerkt.
So beheben Sie das
- Fügen Sie das fehlende Ziel hinzu: Versehen Sie das gewünschte Element mit einer
id, die dem Fragment des Links entspricht, zum Beispiel<section id="pricing">für einen Link zu#pricing. - Oder korrigieren Sie den Link, wenn das Ziel unter einer anderen
idexistiert – Fragmente unterscheiden zwischen Groß- und Kleinschreibung, daher entspricht#Pricingnichtid="pricing". - Wenn der Link nur existiert, um auszulösen, richten Sie sein Fragment trotzdem auf die
iddes echten Elements. Der Link behält dann seine Bedeutung auch ohne JavaScript; möglicherweise müssen Sie in Ihrem Skript das standardmäßige Scrollen verhindern.
<!-- Das Fragment entspricht dem Element, das das Skript einblendet -->
<a href="#details" onclick="toggle('details')">Details anzeigen</a>
<div id="details">...</div>
Wie Silktide dies testet
- Ermittelt jeden Link auf der Seite, dessen Ziel ein Fragment enthält (den Teil nach
#). - Behält nur Links bei, die auf die aktuelle Seite zeigen – entweder reine
#fragment-Links oder vollständige URLs zur gleichen Seite. Links zu Ankern auf anderen Seiten werden von dieser Prüfung nicht getestet. - Sucht nach einem Element, dessen
iddem Fragment entspricht, oder nach einem älteren<a name="...">-Anker mit passendem Namen. - Markiert den Link, wenn keines von beidem existiert.