WordPress Weiterlesen Button mit Beitragstitel für Screen Reader

Es ist nun schon viele Jahre her, da ich mich in diesem Beitrag damit beschäftigt habe, wie sich der WordPress Weiterlesen Button mit dem Beitragstitel auszeichnen lässt. Damals wie heute steht dahinter die Frage der Barrierefreiheit. Denn so ein Weiterlesen Button an sich ist nicht zwangsläufig barrierefrei. Im Sinne des Barrierefreiheitsstärkungsgesetzes, das in wenigen Tagen in Kraft tritt, sollte er es aber sein.

Aus dem alten Text geht bereits hervor, dass sich dieser Aspekt der Barrierefreiheit gar nicht so leicht umsetzen lässt. Wesentlicher Grund dafür ist das aktive Theme. Die Standardthemes gelten bereits als barrierefreie Themes. Die meisten anderen sind es allerdings nicht. Und allzu oft kochen Themes derart ihr eigenes Code-Süppchen, dass die Anpassung durchaus herausfordernd ist.

Im alten Text habe ich am Beispiel des Themes Wilson gezeigt, wie die Anpassung für einen barrierefreien Weiterlesen Button funktionieren kann. Und das klappt auch sechs Jahre später noch so, wenngleich sich auch bei Wilson in der Zwischenzeit einiges getan hat.

Viel getan hat sich ohnehin bei WordPress. Mittlerweile gibt es die Block Themes. Und um den barrierefreien Weiterlesen Button in Block Themes soll es am Ende dieses Beitrags nun gehen.

Warum WordPress Weiterlesen Button mit Beitragstitel?

Im Jahr 2019 hatte ich gedacht, schon alles über den Weiterlesen Button geschrieben zu haben, was sich so schreiben lässt. Aber irgendwie lernt man ja nie aus. So machte mich damals ein Kunde darauf aufmerksam, dass ein schlichtes »Weiterlesen« (Read more, Mehr lesen, wie auch immer) im Sinne der Barrierefreiheit nicht zielführend ist.

Stattdessen sollte der WordPress Weiterlesen Button mit Beitragstitel ausgegeben werden. Konkret würde das dann ungefähr so aussehen:

Das würde aber keiner Sehgewohnheit entsprechen. Und so macht es auch kein mir bekanntes Theme.

Aber so muss es ja auch nicht sein. Im Sinne der Barrierefreiheit reicht es, wenn der Weiterlesen Button den Beitragstitel für Screen Reader nur bereithält. Dann steht der Beitragstitel im Code, wo die Vorlese-Software ihn findet.

Doch warum muss da überhaupt der Beitragstitel nochmal erscheinen – der steht doch bereits über dem Auszug / Teaser?

Durch die Zusammenarbeit mit meinem Kunden, der extrem viel schlechter sieht als ich, habe ich gelernt, dass für Nutzer wie ihn diese Zuordnung nicht zwangsläufig existiert.

Für schwer Sehbehinderte, die Screen Reader nutzen und mit ihm von Link zu Link springen, heißt es dann bei jedem dieser Weiterlesen Button nur »Weiterlesen« . Ohne jegliche Information, was konkret damit gemeint ist.

Das geht natürlich gar nicht. Und das entspricht nun auch in keiner Weise der Forderung nach aussagekräftigen oder sprechenden Links.

WordPress Barrierefreiheit

Die gute Nachricht vorweg: Es gibt ein WordPress Accessibility Team, das sich um alle Aspekte der Barrierefreiheit kümmert. Das heißt, dass sich WordPress dieser Herausforderung stellt und hoffentlich weitgehend den vielfältigen Ansprüchen gerecht wird.

Keineswegs bin ich so vermessen, deren Arbeit weiter beurteilen zu wollen. Mein Kunde damals war allerdings nicht so begeistert. Oder wie er mir so schön sagte: Er wolle mir gerne den Unterschied zwischen der Theorie und der gelebten Praxis erklären. In Sachen Barrierefreiheit war er mit seiner Sehbehinderung sicherlich der Experte. Und mich hatte er nur zurate gezogen, ihm bei der Einrichtung des von ihm gewählten Themes zu helfen.

Mittlerweile ist meine Kenntnis durch ihn immerhin um ein Mü (oder genauer: ein Mµ) angewachsen. Und so folgt mit meinen Erkenntnissen auch die schlechte Nachricht: Mal wieder hängt alles vom Theme ab.

Deshalb ist es leider gar nicht möglich, hier den ultimativen Kniff zu eingangs gestellter Frage herauszuhauen. Mit anderen Worten gibt es für die Aufgabenstellung, den WordPress Weiterlesen Button mit Beitragstitel für Screen Reader auszuzeichnen, nicht die eine einfache Antwort. Immerhin kann ich vielleicht ein paar Ansätze verdeutlichen.

Hinweis: In diesem Beitrag benutze ich immer wieder die Begriffe Teaser, automatischer Auszug und manueller Auszug. Auf den Unterschied bin ich schon einmal im Beitrag WordPress Auszug: Wie funktioniert das WordPress Excerpt? eingegangen. Im Zweifel also erst einmal dort nachlesen!

Die einfachste Variante für den Weiterlesen Button mit Beitragstitel

Die wohl einfachste Möglichkeit für die Ausgabe des Weiterlesen Buttons mit Beitragstitel ist das Bearbeiten des More tags im jeweiligen Beitrag. Also jenen Weiterlesen Button zu ändern, der nach dem Teaser erscheint.

Allerdings funktioniert dieser More tag nur, wenn das Theme für die Archivseiten den gesamten Beitragsinhalt nutzt. Kommt der More tag zum Einsatz, findet sich auf der Archivseite dann der Teaser.

Für den More tag gibt es mittlerweile auch den passenden Block: den More Block. Der bietet dann auch die Möglichkeit, den Beitragstitel manuell zu ergänzen. So entsteht also genau der oben dargestellte Effekt: Beitragstitel als Überschrift und unter dem Teaser noch einmal als Link.

Aus einem schlichten

<!--more--> 

wird also das differenziertere

<!--more TITEL DES BEITRAGS--> 

Bleibt die Frage, ob das wünschenswert ist.

Und wenn wir schon bei Gutenberg sind: Der neue Editor bietet übrigens auch die Option

 <!‐‐noteaser‐‐> 

an, die dafür sorgt, dass auf der Beitragsseite der Teaser nicht mehr ausgegeben wird. Dies müsste man im klassischen Editor hingegen tatsächlich manuell in der HTML-Ansicht eingeben.

Das Dumme ist nur: Dieses Vorgehen funktioniert bei Weitem nicht bei jedem Theme. Die Standardthemes wie zum Beispiel Twenty Seventeen setzen es um. Viele andere Themes, mit denen ich es ausprobiert habe, verstehen es nicht. So auch nicht das Theme meines Kunden. Oder das Theme Wilson, mit dem ich das weitere Vorgehen darstelle.

Außerdem funktioniert dieses Vorgehen ausschließlich im Rahmen des Teasers, nicht aber bei den beiden Auszugstypen automatisch und manuell.

WordPress Plugin WP-Accessibility – auch für den Weiterlesen Button

Nun gibt es ja für fast alle WordPress Lebenslagen das passende Plugin. In diesem Fall heißt es WP-Accessibility. Das macht noch eine ganze Menge mehr, erweitert das Theme aber auch um einen Weiterlesen Button mit Beitragstitel.

Allerdings kann das Plugin nicht wissen, wie genau das aktive Theme mit der Read More Funktion umgeht. Deshalb ist es auch nicht in der Lage, die vorhandene Funktion zu entfernen. Das wiederum bedeutet, dass im Zweifel nun zwei Aufforderungen zum Weiterlesen unter dem Teaser / dem Auszug stehen: eine mit, die andere ohne Beitragstitel.

Ich habe das Plugin in dieser Hinsicht mit einer Reihe von Themes getestet. Unschwer lässt sich folgende Tendenz erkennen: Je komplexer das Theme, desto wahrscheinlicher, dass es mit WP-Accessibility gleich zwei Read More Buttons gibt.

Immerhin zeichnet das Plugin das eigene Weiterlesen anders aus, als WordPress Themes dies hinlänglich tun. Mit anderen Worten: Durch die unterschiedlichen Klassen lässt sich so wenigstens der Weiterlesen Button des Themes ausblenden. Meistens heißt diese Klasse .more-link, weshalb die passende Definition dann wie folgt lautet:

.more-link {display:none;}

Elegant ist dies natürlich nicht. Besser wäre es, die vorhandene Funktion zu finden und im Rahmen des eigenen Childthemes zu entfernen. Aber auch hier kommt es sehr darauf an, wie genau der Theme-Autor vorgegangen ist.

DIY: WordPress Weiterlesen mit Beitragstitel für Screen Reader

Wenn man sich dann schon der Aufgabe stellt, das vorhandene Vorgehen des Themes zu entfernen, kann man auch versuchen, die Ausgabe des WordPress Weiterlesen Button mit Beitragstitel selbst zu übernehmen. Allerdings ist das nicht gerade eine Übung für Einsteiger. Vor allem gilt diese Anleitung nicht uneingeschränkt für alle denkbaren Eventualitäten.

Als Beispiel habe ich das Theme Wilson gewählt. Das finde ich sehr schön und auch sehr gut zu bearbeiten, da mit Standardtheme-Kenntnissen gut zu verstehen.

So greift hier auch das Vorgehen, das der WordPress Codex (Customizing the Read More) vorschlägt, um Wilson dazu zu bringen, den More tag zu nutzen.

Schritt 1: Vorhandene Funktion für den More tag entfernen

Wilson ist eins von den Themes, das die Änderung des More-tags nicht einfach mal so umsetzt. Allein um das zu erreichen, gilt es, die vorhandene Funktion in Sachen More Link zu entfernen.

Für das Entfernen der vorhandenen Funktion braucht es ein Childtheme. In der functions.php des Childthemes entfernen Sie nun die Funktion des Parentthemes:

function child_theme_setup() {
// override parent theme's 'more' text for excerpts
 remove_filter( 'the_content_more_link', 'wilson_custom_more_link' ); 
}
add_action( 'after_setup_theme', 'child_theme_setup' );

Schritt 2: Änderung in der content.php des Childthemes

In der content.php, die Sie in Ihr Childtheme kopieren, ändern Sie nun die Zeile 45 (mittlerweile ist es Zeile 63). Dort steht im Moment noch innerhalb des DIVs mit der Klasse .post-content

<?php 
   the_content(); 
   wp_link_pages();
?>

Daraus machen Sie

<?php
the_content("Weiterlesen" . ": " . the_title('', '', false)); ?>

Nun gibt jeder Beitrag, bei dem Sie den More tag nutzen und ihn um den Beitragstitel ergänzt haben, den WordPress Weiterlesen Button mit Beitragstitel aus.

Soll der Beitragstitel nur für Screen Reader lesbar sein, lautet der Content-Aufruf:

<?php
the_content("Weiterlesen" . ' <span class="screen-reader-text">:
' . the_title('', '', false) . '</span>'); ?>

Oder: einfach the_excerpt nutzen!

Weit eleganter ist es, wenn Sie für die Archivseiten statt the_content für den Textauszug (automatisch oder manuell) the_excerpt nutzen.

Auch in diesem Fall braucht es ein Childtheme. Es sind aber keine Änderungen in der functions.php nötig. Allein in der content.php geht es wieder der Zeile 45 63 an den Kragen. Statt

<?php the_content();?>

heißt es nun

<?php the_excerpt();?>

Und für den WordPress Weiterlesen Button mit Beitragstitel für Screen Reader kommt eine Zeile hinzu:

<a class="more-link" href="<?php echo get_permalink();?>">Weiterlesen<span class="screen-reader-text">: <?php the_title(); ?></span></a>

Egal, welches Vorgehen Sie wählen: Das Ganze setzt aber auch voraus, dass das Theme für die Klasse .screen-reader-text keine Defintion im Sinne des display:none; nutzt. Stattdessen sollte die Definition so lauten, wie Make WordPress Accessible es als Best Practice vorschlägt: The CSS class screen-reader-text.

Leider ist es nicht immer so einfach…

…wobei einfach schon sehr relativ zu verstehen ist. Für das Theme meines Kunden half jedenfalls keine der hier genannten Vorgehen gut weiter. Mit Weaver Xtreme kam er zwar beeindruckend gut zurecht. Für die Ausgabe im Sinne der Barrierefreiheit mussten wir aber an der ein oder anderen Stelle kreative Lösungen finden.

Für die Ausgabe des WordPress Weiterlesen Button mit Beitragstitel half hier tatsächlich der Theme-Autor schon ein bisschen weiter. So liefert er für sein Theme ein Verzeichnis mit allen für ein Childtheme notwendigen Dateien mit. Und in der functions.php für dieses Childtheme hat er bereits die Möglichkeit des Änderns des Read More vorgesehen. Die hebt die vorhandene Funktion auf und ermöglicht so, das eigene Vorgehen festzulegen.

WordPress Weiterlesen Button mit Beitragstitel in Block Themes

Auf eine besondere Art Theme, nämlich die Block Themes, bin ich bei der ersten Fassung dieses Beitrags noch gar nicht eingegangen. Das konnte ich auch nicht, denn damals steckte die Technik des Full Site Editing noch in den Kinderschuhen. Und genau diese Technik hat bei mir in den letzten Wochen und Monaten für reichlich Kopfzerbrechen gesorgt.

Obwohl sich zu guter Letzt alles als extrem viel einfacher erwiesen hat als alles andere, was ich bislang zum Thema geschrieben habe.

Das verwirrende Weiterlesen-Problem der Block Themes

Wer keine Angst vor den WordPress Blöcken hat, ist vielleicht schon mal über den Abfrage-Loop-Block (auch Abfrage-Schleife-Block) gestolpert. Dieser Block sorgt für den WordPress Loop. Das heißt, mit ihm lassen sich zum Beispiel Beiträge einer bestimmten Kategorie oder eines Schlagwortes abfragen und auf einer Seite ausgeben. Das kann auf einer ganz normalen Seite oder im Rahmen eines Beitrags passieren. Oder Sie nutzen diesen Block im Rahmen eines Templates für zum Beispiel alle Kategorie-Seiten.

So oder so bietet der Abfrage-Loop-Block die Möglichkeit zu entscheiden, welche Elemente eines Beitrags ausgegeben werden sollen. Beitragstitel, Testauszug und Weiterlesen Button wären eine brauchbare Auswahl.

Wenn Sie aber wie ich im folgenden Beispiel den Weiterlesen Button des Blocks Textauszug benutzen, gibt dieser nicht den Beitragstitel für Screen Reader aus!

Was habe ich mir in den letzten Wochen den Kopf darüber zerbrochen, wie ich es hinbekomme, dass er es tut. Immerhin funktioniert das Full Site Editing ja auf Basis von vordefinierten WordPress Blöcken. Da hat sich nicht irgendein Theme-Autor irgendwas zur Gestaltung gedacht, das man dem Theme irgendwie abgewöhnen muss. Theme-Autor/in ist man schließlich in diesem Kontext selbst.

Doch muss ich ernsthaft einen eigenen Block registrieren, der mir zusätzlich zum Beitragsauszug einen Weiterlesen-Link produziert, der seinen Beitragstitel für Screen Reader mit ausgibt?

Viel habe ich herumprobiert. Und dann bin ich über die Lösung des Problems völlig zufällig gestolpert.

Die Antwort lautet: Nutze auf nicht den Weiterlesen-Link des Blocks Textauszug. Nutze stattdessen den Weiterlesen-Block!

Nur so lässt sich im Sinne der Barrierefreiheit die gewünschte Auszeichnung des Weiterlesen Buttons mit Beitragstitel für Screen Reader erreichen!

Fazit: Für wen ist das alles wichtig?

Anders als bisher können sich Unternehmen der Privatwirtschaft nicht länger zurücklehnen und in Sachen Barrierefreiheit nichts tun. Das Barrierefreiheitsstärkungsgesetz nimmt nun nicht mehr nur öffentliche Unternehmen in die Pflicht, sondern verlangt von allen den barrierefreien Zugang zu ihren Produkten und Angeboten. Somit auch zu ihren Websites.

Einzig Kleinstunternehmen, die Dienstleistungen erbringen, sind von dieser Pflicht befreit. Wer weniger als zehn Mitarbeiter/innen hat und weniger als zwei Millionen Umsatz im Jahr macht, könnte sich also auf den Standpunkt stellen, nichts tun zu müssen.

Doch macht das Sinn? Der Anforderungskatalog mag sehr umfangreich und überfordernd erscheinen. Aber für wesentliche Aspekte wie zum Beispiel die Bedienbarkeit mit Tabulator sorgt WordPress ohnehin schon. Weitere zentrale Aspekte lassen sich auch immer umsetzen, so zum Beispiel:

• Alternativtexte für Bilder und Grafiken
• Farben und Kontraste
• saubere Hierarchie der Überschriften
• gut lesbare Texte
• sprechende Linktexte
• barrierefreie Formulare
• etc.

Überdies bewerten auch die Suchmaschinen Websites von Kleinstunternehmen nach ihrer Zugänglichkeit. Wer also keine Alternativtexte für Bilder ausgibt, Überschriften nicht passend auszeichnet und hellgrüne Schrift auf knallrotem Grund ausgibt, wird bei Google und co nicht punkten.

Mit anderen Worten: Wer sich nicht kümmert, wird im Laufe der Zeit immer mehr ins Hintertreffen geraten. Und das wäre ja blöd, oder?

Beitragsbild: Britta Kretschmer