Erfahre, wie Du die Weiterlesen-Links auf Deiner Blogübersichtsseite für Screenreader optimierst und Deinen Blog barrierefreier & nutzerfreundlicher machst.
Da hast Du Dir mit Deiner Blogübersichtsseite soviel Mühe gemacht und ein anspruchsvolles Layout erstellt, das Deine Blogartikel in bestem Licht darstellt:
Ansprechende Boxen, jeweils mit dem Beitragsbild, die entsprechenden Kategorie, dem Titel des Blogbeitrages, einem kurzen, knackigen Ausschnitt, der Lust aufs Lesen machen soll, und dem obligatorischen Link „Weiterlesen“, um zum Artikel zu kommen.
Dann lässt Du ein Accessibilitytool über Deine Website laufen und bekommst plötzlich Fehlermeldungen wie „Ziel des Links nicht eindeutig“ oder „Links mit unterschiedlichen Zielen“ für Deine harmlosen Weiterlesen-Links.
Was auf den ersten Blick wie Pingeligsein aussieht, ist tatsächlich ein wichtiges Barrierefreiheits-Problem – und zum Glück auch leicht zu lösen.
Das Problem mit den Weiterlesen-Links
Für Menschen, die auf einen Screenreader angewiesen sind, werden die Links alle gleich vorgelesen, obwohl sie zu unterschiedlichen Zielen führen.
Warum meckert das Tool überhaupt?
Die Fehlermeldungen entstehen, weil Deine Blogübersichtsseite vermutlich mehrere Links mit identischem Text enthält: „Weiterlesen“, „Weiterlesen“, „Weiterlesen“. Für Dich als sehende Person ist das kein Problem – Du siehst ja den Kontext drumherum: Die Überschrift, das Vorschaubild, den Anrisstext …
Die Web Content Accessibility Guidelines (WCAG) fordern jedoch, dass jeder Link einen eindeutigen und aussagekräftigen Text haben sollte. Das ist keine Schikane, sondern macht durchaus Sinn.
Das Problem aus Sicht von Screenreader-Nutzer:innen
Menschen, die auf einen Screenreader angewiesen sind, navigieren oft nicht linear durch eine Seite. Stattdessen lassen sie sich alle Links einer Seite als Liste vorlesen oder springen mit Tastenkombinationen von Link zu Link.
Dann hören sie im obigen Fall aber Folgendes:
- „Link: Weiterlesen“
- „Link: Weiterlesen“
- „Link: Weiterlesen“
- „Link: Weiterlesen“
Ohne visuellen Kontext ist völlig unklar, welcher Link wohin führt. Führt der Link jetzt zum Artikel über Webdesign? Oder zu dem über Barrierefreiheit? Oder doch zu einem anderen? Unmöglich zu sagen.
Das macht die Navigation zur Glückssache und sorgt für unnötig Frustration, weil auf Screenreader Angewiesene jetzt nicht von Link zu Link springen können, sondern sich zusätzlich den Text drumherum vorlesen lassen müssen, um den Kontext des Weiterlesen-Links zu verstehen.
Im schlimmsten Fall verlassen sie Deine Seite, weil sie sich nicht zurechtfinden.
Die Lösung: Versteckter Text nur für Screenreader
Die gute Nachricht: Du musst das Design Deiner Seite nicht ändern. Mit einem cleveren Trick und einem CSS Code Schnipsel fügst Du zusätzliche Informationen hinzu, die nur Screenreader „sehen“ bzw. vorlesen können.
Code zum Kopieren
/**NUR FÜR SCREENREADER SICHTBAR**/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}Diese CSS-Klasse macht Elemente visuell praktisch unsichtbar, aber Screenreader können den Inhalt trotzdem erfassen und vorlesen.
So geht’s Du vor
Schritt 1: Widget Icon-List einfügen und optisch anpassen.
Schritt 2: Als Link wählst Du Post-URL sowie als Text wählst Du den Beitrags Titel als dynmaische Inhalte aus.
Schritt 3: Den Beitragstitel bearbeitest Du zusätzlich, indem Du folgenden Text inklusive span-Elemente unter Bearbeiten (Klick auf das Werkzeugsymbol) hinzufügst:
Dort gibst Du im Feld „Vorher“ folgendes ein:
Weiterlesen<span class="sr-only">: Und im Feld „Nachher“:
</span>Schritt 4: Speichern.
Et voilà, das Problem ist gelöst.
Was bedeutet das für verschiedene Nutzer:innengruppen?
Für sehende Menschen: Gar nichts! Das Design bleibt unverändert. Sie sehen weiterhin nur „Weiterlesen“ als Linktext, genau wie vorher.
Für blinde Menschen und Screenreader-User:innen: Der Link wird jetzt vorgelesen als „Weiterlesen über Webdesign-Trends 2024“. Beim Durchspringen der Links oder beim Anhören der Linkliste ist sofort klar, wohin jeder Link führt. Das macht die Navigation deutlich effizienter und benutzerfreundlicher.
Zusätzlicher Bonus: Auch Suchmaschinen profitieren von aussagekräftigeren Linktexten, da sie den Kontext besser verstehen können.
Fazit: Kleine Änderung, große Wirkung
Mit wenigen Zeilen CSS löst Du ein wichtiges Barrierefreiheitsproblem, ohne Dein Design zu ändern. Deine Weiterlesen-Links werden zu aussagekräftigen Navigationshilfen für alle Besucher:innen – ein perfektes Beispiel dafür, wie gute Barrierefreiheit allen zugutekommt.
Minimale Änderunge, großer Nutzen. Und Dein Accessibilitytool ist auch happy!
Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website
3 Antworten
Hallo Britta, ich verstehe das so, dass diese Anleitung für Elementor gilt, oder? Wenn meine Seite auf Twenty Twenty Five läuft, gibt es dann auch einen CSS-Schnipsel, den ich im Customizer oder im Blogtemplate als Extra-CSS im TExtauszugsblock einfügen kann?
Liebe Grüße
Angela
Hallo Angela,
der CSS Code .sr-only ist eigentlich universell einsetzbar.
Von The Admin Bar gibt es auf Youtube eine Video „Fix Your Read More Links with These Simple Tweaks“ in dem er ab etwa 03:20 zeigt, wie er das mit dem Block Editor macht.
Liebe Grüße
Vielen Dank! Da habe ich wieder eine Menge Input zum Reinknien 🙂
Liebe Grüße
Angela