Praxisleitfaden Verständliche Linknamen
Leere Links verständlich beschriften
Erkennen Sie namenlose Links und machen Sie ihr Ziel lesbar.
link-nameWCAG 2.4.4, 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-link-name.html
Befund verstehen
Ein erreichbarer Link ohne Aussage
Erkannter Befund
Das fällt auf
link-name meldet den Anker auf #planner-form: zugänglicher Name fehlt.So ist es einzuordnen
Auf der unkorrigierten Satzfahne der Magazinseite steht in der oberen Reihe ein leeres umrandetes Feld. Im HTML ist es ein Link zum Seitenplaner. Es enthält weder Text noch eine andere zugängliche Benennung.
Das bedeutet es für die Nutzung
Wer mit der Tastatur oder einer Screenreader-Linkliste navigiert, erreicht einen Verweis ohne verständliche Zielangabe. Auch sichtbar verrät der Rahmen nicht, wohin er führt.
- Regel
link-name- Referenz
- WCAG 2.4.4, 4.1.2
Vorher am Link
Rolle: Link
Ziel: #planner-form
Zugänglicher Name: leer
Axe link-name: VerstoßUnbenannte Links auf Seiten finden
Prüfen Sie die erkannten Links mit ihren Zielbereichen. Eine betroffene Seite kann mehrere zu korrigierende Links enthalten.
Illustratives Beispiel · Fehlende Linknamen
3 von 100 Seiten3 % mit diesem Befund im Beispiel
Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.
Betroffene Seiten im Beispiel: 11, 54, 92.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Das Ziel bestimmt den Linktext
Prüfen Sie zuerst das tatsächliche Ziel des Verweises.
Fundstelle ansehen
Das stumme Feld auf der Satzfahne
Der Beleg zeigt die vollständige Satzfahne mit allen Prüffeldern der beiden Reihen. Das markierte leere Feld in der oberen Reihe ist der betroffene Link.
Der Rahmen des Felds ist sichtbar, sein Ziel wird aber erst im HTML als #planner-form erkennbar. Die Markierung ordnet genau diesen Link zu; die übrigen Felder der Satzfahne gehören zum Kontext.
Link korrigieren
Sichtbaren Text in den Link schreiben
Der vorhandene Anker erhält „Zum Seitenplan“ als Inhalt. Daraus entsteht sein zugänglicher Name. Das Feld behält seine Größe im Raster; das Sprungziel bleibt #planner-form.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
Zum Seitenplan
Im CMS oder Seitentemplate Öffnen Sie das Linkelement und tragen Sie den Text in das Feld für die sichtbare Beschriftung ein. Prüfen Sie nach dem Speichern, ob die veröffentlichte Seite den Text tatsächlich im Link ausgibt.
Vollständigen Code vergleichen
Vorher
<a href="#planner-form"></a>Nachher
<a href="#planner-form">Zum Seitenplan</a>Markierte Zeilen wurden geändert
In der Oberfläche umsetzen
Name, Darstellung und Ziel zusammen prüfen
Ein verständlicher Name muss zum tatsächlich erreichbaren Inhalt passen.
- 1
Verwenden Sie für diesen Sprung „Zum Seitenplan“: Der Link führt zum Eingabeformular des Seitenplaners.
- 2
Lassen Sie dem sichtbaren Text ausreichend Platz. Im Beispiel bietet das vorhandene Rasterfeld ihn bereits.
- 3
Prüfen Sie im Accessibility-Baum des Browsers, dass der Link den sichtbaren Text als Namen trägt.
- 4
Öffnen Sie das Ziel mit der Tastatur. Ein Sprung zum Formular verspricht nicht, dessen Werte automatisch zu übernehmen.
Fehlkorrekturen vermeiden
Ein Name allein erklärt noch nicht jedes Ziel
Nur href eintragen
Die Zieladresse war bereits vorhanden. Sie ersetzt hier keinen beschreibenden Linkinhalt.
„Hier“ als Beschriftung
Ein beliebiger Text kann den leeren Namen beseitigen. Ob er den Linkzweck im Zusammenhang verständlich macht, müssen Sie zusätzlich beurteilen.
Den Text verstecken
display: none oder aria-hidden="true" am einzigen Linkinhalt entzieht ihn der zugänglichen Benennung. Im Beispiel soll der Text für alle sichtbar sein.
Einen anderen Namen überlagern
Ein abweichendes aria-label kann den sichtbaren Text als zugänglichen Namen ersetzen. Vermeiden Sie widersprüchliche Beschriftungen für denselben Link.
Derselbe Link besteht den erneuten Test
Axe erkennt am ausgewählten Anker nach der Änderung einen zugänglichen Text. link-name liefert dort einen Pass und keinen Verstoß oder unklaren Befund mehr.
Bestätigt ist die Korrektur von link-name an diesem Link. Die übrigen Felder der Satzfahne und die vollständige Bedienbarkeit der Magazinseite sind damit nicht freigegeben.
Nachher am Link
Rolle: Link
Ziel: #planner-form
Zugänglicher Name aus Text: Zum Seitenplan
Axe link-name: PassPrüfgrenzen kennen
Fehlende Namen erkennen, Linkzwecke beurteilen
Der automatische Befund prüft die Benennung; die Qualität des Nutzerwegs braucht Kontext.
Automatisch prüfbar
- Den vorhandenen Link ohne zugänglichen Namen erkennen.
- Die Fundstelle über Selektor und Bild dem Seitenbereich zuordnen.
- Nach der Ergänzung erneut prüfen, ob link-name am selben Anker besteht.
Im Kontext zu entscheiden
- Beurteilen, ob Name und zugehöriger Kontext den Linkzweck verständlich vermitteln.
- Das tatsächliche Ziel aufrufen und mit dem versprochenen Seitenplan vergleichen.
- Fokusführung, sichtbare Erkennbarkeit und die anschließende Bedienung des Formulars prüfen.