Links mit Namen

Was geprüft

Für jeden Link mit Ziel (<a href>) wird geprüft, ob er einen zugänglichen Namen hat: sichtbaren Text, aria-label oder ein enthaltenes Bild mit alt-Text. Ob der Linktext verständlich ist („hier klicken“), beurteilt der Check nicht. Ohne Links trifft der Punkt nicht zu. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Mittel, sobald ein Link ohne Namen gefunden wird. Solche Links sind für Screenreader-Nutzer nicht von anderen zu unterscheiden; typisch sind Icon-Links zu sozialen Netzwerken oder zum Warenkorb.

Warum

Screenreader lesen bei einem Link ohne Namen nur „Link“ oder die Adresse vor. In der Linkliste, die viele Nutzer zum Navigieren aufrufen, bleibt der Eintrag leer. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Geben Sie Icon-Links einen Namen: per aria-label am Link, per visuell verstecktem Text im Link oder über ein Bild mit passendem alt-Text. Das Icon selbst erhält aria-hidden="true".

Nebenwirkung: Keine technischen Nebenwirkungen. Ein Klassenname für visuell versteckten Text (z. B. „screen-reader-text“) muss im CSS definiert sein, sonst wird der Text sichtbar; prüfen Sie die Darstellung danach.

WordPress: Viele Themes bringen die Klasse „screen-reader-text“ mit. Social-Icon-Plugins und Menü-Icons setzen oft keinen Namen; im Menü können Sie das Feld „Navigations-Label“ füllen und mit dieser Klasse verstecken.

Codebeispiel

HTML

<!-- per aria-label -->
<a href="https://www.linkedin.com/company/beispiel" aria-label="Beispiel GmbH auf LinkedIn">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

<!-- per visuell verstecktem Text -->
<a href="/warenkorb/">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="screen-reader-text">Warenkorb</span>
</a>

Weiterführende Quellen

• https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html
• https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a