Website Accessibility. Sprechende Links sind selbsterklärende Links, die die Nutzungserfahrung Deiner Website verbessern. Wie erfährst Du in diesem Blogbeitrag.
In meiner Accessibility-Reihe stelle ich Dir einen häufig übersehenen, aber immens wichtigen Aspekt barrierefreier Websites vor: Die sogenannten sprechenden Links. Mit dieser einfachen Technik kannst bereits viel für die Barrierefreiheit tun – und das kommt allen Besucher:innen zugute.
Was sind sprechende Links?
Sprechende Links (auch aussagekräftige Links genannt) sind Hyperlinks, deren Textinhalte präzise beschreiben, wohin die Links führen bzw. welche Aktionen ausgelöst werden. Im Gegensatz zu generischen Formulierungen wie „Hier klicken“ oder „Weiterlesen“ enthalten sprechende Links konkrete Informationen über das Ziel.
Beispiele für sprechende Links:
- Statt „Mehr Informationen“ besser „Produktdetails anzeigen“ oder „Pflegeanleitung anzeigen“
- Statt „Hier klicken“ besser „Anmeldeformular für den Newsletter öffnen“
- Statt „Weiterlesen“ besser „Vollständigen Artikel über barrierefreies Webdesign lesen“
Diese Linkauszeichnungen verbessern die Nutzungserfahrung für alle; sie sind aber besonders wichtig für Menschen, die Screenreader oder andere Hilfstechnologien verwenden, da sie den Inhalt und das Ziel des Links auch ohne den umgebenden Kontext verstehen können (Google mag das übrigens auch, das ist also auch positiv für die Suchmaschinenoptimierung aka SEO 😊).
Warum sind sprechende Links wichtig?
Für Menschen mit Screenreadern
Stell Dir vor, Du nutzt einen Screenreader und hörst beim Navigieren durch eine Webseite mehrmals hintereinander „Hier klicken“, „Mehr lesen“, „Hier“. Wie sollst Du wissen, wohin diese Links führen oder welche Aktion sie auslösen?
Viele Screenreader-Nutzer:innen lassen sich zur schnelleren Navigation auch nur die Links einer Seite vorlesen. Bei unspezifischen Linkbezeichnungen wie „hier“ oder „klicken“ ist es ohne Kontext unmöglich zu verstehen, wohin diese Links führen. Bei sprechenden Links wie „Zum Kontaktformular“ oder „Preisliste herunterladen“ ist die Zielseite hingegen sofort klar.
Für Menschen mit kognitiven Einschränkungen*
Auch für Menschen mit kognitiven Einschränkungen oder Leseschwierigkeiten sind präzise Linkbezeichnungen hilfreich. Sie verstehen sofort, was passiert, wenn sie auf einen Link klicken, ohne den umgebenden Text genau lesen zu müssen.
*Kognitive Einschränkungen beziehen sich auf Beeinträchtigungen in der Wahrnehmung, Aufmerksamkeit, Erinnerung, Problemlösung oder Verarbeitung von Informationen. Das kann viele Ursachen haben, wie z. B.:
- Lernschwierigkeiten (z. B. Dyslexie)
- Aufmerksamkeitsstörungen (z. B. ADHS)
- Gedächtnisprobleme (z. B. Demenz)
- Beeinträchtigungen durch Stress oder Erschöpfung
Für alle Nutzer:innen
Eindeutige Links helfen allen Besucher:innen Deiner Website. Sie verbessern die Orientierung und erleichtern das schnelle Erfassen der Inhalte. Wer eine Website überfliegt, erkennt sofort, wohin die Links führen, und kann gezielter navigieren.
Tipps für wirklich gute sprechende Links
Vermeide generische Phrasen
Statt Klicke hier, um meine Preisliste herunterzuladen ist Preisliste herunterladen viel besser. Der Link selbst sollte aussagekräftig sein, nicht der umgebende Text.
Halte Links kurz und prägnant
Zu lange Links können unübersichtlich wirken. Mein ausführliches eBook zum Thema Stressbewältigung am Arbeitsplatz mit vielen praktischen Übungen inklusive Checkliste herunterladen ist zu lang. Besser: eBook zur Stressbewältigung herunterladen.
Beginne mit dem Wichtigsten
Starte mit dem Schlüsselwort oder der Hauptaktion: Anmelden zum Newsletter statt Zum Formular für die Anmeldung zum Newsletter.
Verwende Verben für Aktionen
Bei Links, die eine Aktion auslösen, beginne mit einem Verb: Termin vereinbaren, Produkt bestellen, PDF herunterladen.
Verzichte auf „Mehr erfahren“ am Ende von Teasern
Statt am Ende eines Teasers Mehr erfahren zu schreiben, verwende einen aussagekräftigen Link wie Vollständigen Blogartikel lesen oder noch besser Blogartikel über Zeitmanagement lesen.
Vermeide URL-Adressen als Linktext
Verwende nie die URL selbst als Linktext (außer die URL ist tatsächlich der Inhalt, den Du vermitteln willst). Statt Besuche https://www.meine-webseite.de/kontakt schreibe Kontaktiere mich.
Achte auf einheitliche Formulierungen
Verwende für gleiche Aktionen die gleichen Formulierungen. Wenn auf einer Seite ein Download-Link PDF herunterladen heißt, sollte auf einer anderen Seite ein ähnlicher Link nicht plötzlich Dokument downloaden heißen.
Häufige Fehler bei Linkbezeichnungen
Zu vermeiden: „Hier klicken“
Das größte Problem bei Hier klicken ist, dass der Link keinen Kontext bietet. Ohne den umgebenden Text weiß niemand, was passiert, wenn man auf hier klickt.
Zu vermeiden: Mehrfach „Weiterlesen“ auf einer Seite
Wenn auf einer Übersichtsseite mehrere Artikel mit Weiterlesen verlinkt sind, können Screenreader-Nutzer nicht unterscheiden, welcher Link zu welchem Artikel gehört.
Zu vermeiden: Links, die nur aus Icons bestehen
Ein Link, der nur aus einem Icon ohne Text besteht (z.B. nur ein Pfeil oder ein Lupensymbol für die Suche), ist für Screenreader-Nutzer:innen nicht zugänglich, sofern kein alternativer Text hinterlegt ist.
Der kleine Extra-Tipp: Title-Attribut
Als Ergänzung zu sprechenden Links kannst Du das Title-Attribut verwenden, um zusätzliche Informationen zu geben. Wenn Nutzer mit der Maus über den Link fahren, erscheint der Title-Text als Tooltip:
<a href="kontakt.html" title="Öffnet das Kontaktformular in einem neuen Fenster">Kontaktformular öffnen</a>
Aber Vorsicht: Das Title-Attribut ist kein Ersatz für einen sprechenden Link! Viele Websitebesucher:innen sehen diese Tooltips nie – weil sie auf mobilen Geräten unterwegs sind, wo mit der Maus hovern nicht funktioniert, oder wenn sie mit der Tastatur navigieren.
Fazit: Kleine Änderung, große Wirkung
Sprechende Links sind eine dieser kleinen Änderungen, die einen großen Unterschied machen können. Sie verbessern die Barrierefreiheit Deiner Website erheblich und helfen gleichzeitig allen User:innen, sich besser zu orientieren.
Hast Du Fragen zur Umsetzung sprechender Links auf Deiner Website? Schreib mir gerne einen Kommentar oder kontaktiere mich direkt.
Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website
