Wenn alle Links hier heißen

In jedem Screenreader steckt eine Funktion, die deine Seite gnadenlos eindampft. Ein Tastendruck (bei NVDA und JAWS ist es Einfügen plus F7, bei VoiceOver auf dem Mac der Rotor) und der ganze Fließtext fällt weg. Übrig bleibt eine nackte Liste aller Links der Seite. Auf einer Startseite, wie sie viele kleine Betriebe haben, klingt das dann so:

hier
hier
mehr erfahren
mehr erfahren
mehr erfahren
weiterlesen
weiterlesen
weiterlesen
hier klicken
mehr

Zehn Einträge, zehn verschiedene Ziele, und kein einziger verrät, wohin er führt. Wer diese Liste hört, kann sie zuklappen und wieder von vorn durch die Seite laufen. Die Abkürzung, die er nehmen wollte, ist damit weg. Auf dem Bildschirm sieht dieselbe Seite völlig in Ordnung aus, weil dort neben jedem "mehr erfahren" noch eine Überschrift, ein Bild und drei Zeilen Text stehen. Die Links tragen ihren Sinn nicht selbst, sie borgen ihn sich von der Umgebung.

Warum sich jemand die Links als Liste ausgeben lässt

Sehende Leute überfliegen eine Seite in wenigen Augenblicken. Die Augen springen zu den farbigen Wörtern, der Rest bleibt erst einmal liegen. Eine Sprachausgabe kann nicht springen, sie liest der Reihe nach. Die Linkliste ist der Ersatz für dieses Überfliegen. Man ruft sie auf, tippt einen Anfangsbuchstaben und drückt beim passenden Eintrag Enter. Das funktioniert nur, wenn die Einträge unterscheidbar sind.

Der zweite Fall betrifft Leute, die ihren Rechner per Sprache steuern. Sie sagen "Klick Preisliste" und der Browser folgt dem Link. Heißen drei Links auf der Seite gleich, blendet die Software Nummern ein und man muss ein zweites Mal ansagen.

Fünf Formulierungen und das, was stattdessen dastehen kann

"Unsere Preise findest du hier." Der Link liegt auf dem Wort hier. Besser ist es, das Ding selbst zu verlinken, also Preisliste 2026.
Eine Leistungskachel mit Bild, Überschrift Badsanierung und darunter Mehr erfahren. Aus der Liste heraus ist das nichts. Mehr über Badsanierung beantwortet die Frage.
"Zum Newsletter hier klicken." Der Handgriff bleibt derselbe, Newsletter abonnieren sagt ihn nur kürzer und klarer.
Drei Mal Schreiben Sie uns auf einer Kontaktseite, für drei verschiedene Postfächer. Sinnvoller sind E-Mail an das Büro Mainz-Kastel, E-Mail an die Buchhaltung und E-Mail an die Werkstatt.
Unter jedem Dokument steht Download. Was heruntergeladen wird, weiß nur, wer die Zeile darüber gelesen hat. Anfahrtsskizze herunterladen (PDF, 400 KB) steht für sich.

Die Prüffrage dahinter ist simpel. Nimm den Linktext, halte die Umgebung zu und frage dich, ob du weißt, was passiert, wenn du das aktivierst. Falls nicht, fehlt im Linktext das Substantiv. Fast immer steht es direkt daneben und muss nur zwei Wörter nach links wandern.

Weiterlesen unter jedem Teaser, ohne am Layout zu drehen

Der häufigste Einwand kommt aus dem Design. Drei Blog-Teaser nebeneinander, jeder mit einem gleich breiten Knopf, auf allen dreien steht Weiterlesen. Wird der Text länger, bricht die Kachelreihe. Dafür gibt es eine Lösung, die auf dem Bildschirm exakt nichts verändert. Der sichtbare Text bleibt kurz, die Ergänzung wird optisch versteckt und trotzdem vorgelesen.

Vorher:

<article>
  <h3>Neue Öffnungszeiten ab September</h3>
  <p>Ab dem 1. September öffnen wir samstags eine Stunde früher.</p>
  <a href="/blog/oeffnungszeiten-september">Weiterlesen</a>
</article>

Nachher:

<article>
  <h3>Neue Öffnungszeiten ab September</h3>
  <p>Ab dem 1. September öffnen wir samstags eine Stunde früher.</p>
  <a href="/blog/oeffnungszeiten-september">Weiterlesen<span
     class="nur-fuer-screenreader">, Neue Öffnungszeiten ab September</span></a>
</article>

Dazu gehört genau eine CSS-Klasse, einmal ins Stylesheet, danach überall verwendbar:

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Ein Detail entscheidet hier alles. display: none und visibility: hidden funktionieren nicht, beide nehmen den Text auch aus der Sprachausgabe. Die Klasse oben schiebt ihn stattdessen aus dem sichtbaren Bereich, lässt ihn aber im Dokument stehen.

Wenn du lieber ein Attribut setzt

Statt des versteckten span geht auch aria-label am Link. Das Attribut ersetzt den sichtbaren Text vollständig, deshalb muss es mit genau den Wörtern beginnen, die man sieht. Wer per Sprache steuert und "Klick Weiterlesen" sagt, findet den Link sonst nicht mehr. Steht die Überschrift ohnehin auf der Seite, kannst du sie verketten, statt sie abzuschreiben. aria-labelledby nimmt mehrere IDs entgegen und liest sie in der angegebenen Reihenfolge vor:

<article>
  <h3 id="news-sept">Neue Öffnungszeiten ab September</h3>
  <a id="news-sept-link" href="/blog/oeffnungszeiten-september"
     aria-labelledby="news-sept-link news-sept">Weiterlesen</a>
</article>

Auf die erste ID kommt es an, denn sie zeigt auf den Link selbst und holt damit das sichtbare Wort zurück. Verweist du nur auf die Überschrift, verschwindet Weiterlesen aus dem Namen des Links und die Sprachsteuerung greift ins Leere. Ändert später jemand die Überschrift im Redaktionssystem, wandert die Änderung von allein in den Linknamen.

Die URL als Linktext löst das Problem nicht

Manche Redaktionssysteme setzen die Adresse selbst als Text ein, und auf den ersten Blick wirkt das ehrlich. Vorgelesen wird daraus ein Buchstabenbrei, etwa "h t t p s doppelpunkt schrägstrich schrägstrich w w w punkt beispiel punkt d e schrägstrich leistungen punkt p d f". Bei Adressen mit langen Kennnummern dauert das mehrere Sekunden und sagt am Ende weniger als zwei deutsche Wörter. Auch der Sprung per Anfangsbuchstabe hilft in der Liste nicht mehr weiter, weil jeder dieser Einträge mit demselben h beginnt. Willst du die Adresse trotzdem zeigen, etwa weil die Seite ausgedruckt wird, schreib sie als normalen Text daneben und lass den Link selbst benannt.

Neues Fenster, Datei, E-Mail-Programm

Ein Link, der die aktuelle Seite wechselt, ist erwartbar. Ein Link, der ein neues Fenster aufreißt oder eine 8 MB große Datei zieht, ist es nicht, und die Zurück-Taste hilft danach auch nicht weiter. Der Text muss das vorher sagen. Bei Dateien gehören Format und ungefähre Größe hinein, bei neuen Fenstern ein kurzer Hinweis:

<a href="/downloads/wartungsvertrag.pdf">
  Wartungsvertrag herunterladen (PDF, 1,2 MB)
</a>

<a href="https://portal.example.org" target="_blank" rel="noopener">
  Kundenportal öffnen (neues Fenster)
</a>

Der Hinweis darf auch im versteckten span stecken, wenn daneben ohnehin ein Icon sitzt. Die ruhigere Variante bleibt, das neue Fenster gar nicht erst zu erzwingen.

Zwei Minuten, ein Browser, sonst nichts

Öffne deine Startseite und leg ein Blatt Papier daneben.
Drücke Strg und F (auf dem Mac Befehlstaste und F) und suche nacheinander nach hier, mehr, weiterlesen und Download. Notiere, wie oft ein Treffer mitten in einem Link sitzt.
Klicke auf eine leere Stelle ganz oben auf der Seite, also weder auf Text noch auf ein Bild, und drücke danach mehrmals die Tabulatortaste. Der Fokusrahmen wandert von Link zu Link. (In Safari musst du dafür einmal in den Einstellungen unter Erweitert die Option aktivieren, mit der die Tabulatortaste jedes Objekt einer Webseite hervorhebt.)
Schreib bei jedem Sprung nur das Wort auf, das im Rahmen steht. Nicht den Satz drumherum, nicht die Überschrift darüber.
Lies deine Liste laut vor. Markiere jeden Eintrag, der doppelt vorkommt und woanders hinführt, und jeden, bei dem du selbst überlegen musst.

Was danach auf dem Papier steht, ist bei den meisten Seiten überschaubar. Ein guter Teil der Markierungen sitzt erfahrungsgemäß in der Fußzeile oder im Cookie-Hinweis, also an Stellen, die auf jeder Unterseite identisch eingebunden sind. Ein Fund dort ist die angenehmste Sorte Arbeit, weil eine einzige Korrektur im Template die komplette Website mitnimmt.

Wo ein Widget aufhört

Unser Widget kann Kontraste anheben, Schrift vergrößern, den Fokusrahmen deutlicher machen und Links sichtbar hervorheben. Was in einem Link steht, kann es nicht wissen. Ein Werkzeug erkennt zwar, dass auf einer Seite sechs Mal "mehr erfahren" auftaucht, aber welches Wort dort richtig wäre, steht nur in deinem Kopf und in deiner Überschrift. Diese Stelle bleibt Handarbeit, dafür eine, die pro Link kaum länger dauert als das Lesen der Überschrift darüber.

Am wenigsten Aufwand macht die Sache, wenn du beim nächsten Text den Linktext zuerst schreibst und den Satz danach drumherum baust. Wer mit "Preisliste 2026 ansehen" anfängt, kommt gar nicht erst in die Verlegenheit, ein hier zu brauchen.