WordPress Weiterlesen Button mit Beitragstitel für Screen Reader

Ich hätte nicht gedacht, dass ich noch einmal über den Weiterlesen Button schreiben müsste. Aber irgendwie lernt man ja nie aus. So machte mich 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. Das aber macht kein mir bekanntes Theme. Hingegen stellen die im WordPress Theme Verzeichnis als »für Barrierefreiheit geeigneten« Themes hier den Beitragstitel für Screen Reader bereit. Doch was tun, wenn das Theme der Wahl keiner dieser beiden Anforderungen entspricht?

Warum WordPress Weiterlesen Button mit Beitragstitel?

Bislang war es für mich keine Frage, weshalb so ein Button, der mit »Weiterlesen« beschriftet ist, nicht genügen sollte. Als mehr oder weniger gut Sehende ordne ich diesen Button jedenfalls direkt dem Teaser beziehungsweise Auszug zu und fände es eher seltsam, würde der den Beitragstitel noch einmal wiederholen. Der steht ja immerhin bereits unweit entfernt über dem Teaser / Auszug.

Durch die Zusammenarbeit mit meinem Kunden, der extrem viel schlechter sieht als ich, ist mir allerdings bewusst geworden, dass für Nutzer wie ihn diese Zuordnung nicht zwangsläufig existiert. Für Blinde jedenfalls, die Screen Reader nutzen, 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.

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. Oder wie sagte mein Kunde zuletzt so schön: Er wolle mir gerne den Unterschied zwischen der Theorie und der gelebten Praxis erklären. Schließlich hat er mich nur zurate gezogen, ihm bei der Einrichtung des von ihm gewählten Themes zu helfen. In Sachen Barrierefreiheit ist er mit seiner Sehbehinderung der Experte.

Mittlerweile ist meine Kenntnis durch ihn immerhin um ein Mü (oder genauer: ein Mµ) angewachsen. Und so folgt mit meinen neuesten 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: Für die Aufgabenstellung, den WordPress Weiterlesen Button mit Beitragstitel für Screen Reader auszugeben, gibt es 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

Es gibt die Möglichkeit, den More tag im jeweiligen Beitrag zu bearbeiten. Also jenen Weiterlesen Button, der nach dem Teaser erscheint, direkt beim Erstellen des Beitrags zu ändern. Interessanterweise lässt sich dieser im Gutenberg Editor direkt bearbeiten, ohne auf die HTML-Ansicht zugreifen zu müssen. So ist es hier also möglich, einfach den Beitragstitel manuell zu ergänzen. Auf diese Weise kann aus einem schlichten

<!--more--> 

das differenziertere

<!--more TITEL DES BEITRAGS--> 

werden.

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.

Außerdem funktioniert dieses Vorgehen ausschließlich im Rahmen des Teasers, nicht aber bei den beiden Auszugstypen automatisch und manuell. Sprich: Wenn Sie vergessen, den More tag zu setzen, erscheint der automatische Auszug so, wie das Theme es vorsieht.

Plugin WP-Accessibility

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, dass der WordPress Codex (Customizing the Read More) vorschlägt.

Schritt 1: Vorhandene Funktion entfernen

Zuerst gilt es, die vorhandene Funktion zu entfernen. Dazu braucht es natürlich 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

Nun braucht es noch einen zweiten Schritt: In der content.php, die Sie in Ihr Childtheme kopieren, ändern Sie die Zeile 45. Dort steht im Moment noch innerhalb des DIVs mit der Klasse .post-content schlicht

<?php the_content(); ?>

Daraus machen Sie

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

Nun gibt jeder Beitrag, bei dem Sie den More tag nutzen, 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!

Im Falle von Theme Wilson funktioniert es aber noch leichter, wenn Sie statt the_content einfach 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 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 am besten so lauten, wie Make WordPress Accessible es als Best Practice vorschlägt: The CSS class screen-reader-text.

Theme Wilson definiert es schlicht so:

.screen-reader-text {
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}

Leider ist es nicht immer so einfach…

…wobei einfach schon sehr relativ zu verstehen ist. Für das Theme meines Kunden hilft jedenfalls keine der hier genannten Vorgehen gut weiter. Mit Weaver Xtreme kommt er zwar beeindruckend gut zurecht – vor allem, seit wir für ihn die Einstellungsoptionen für den Customizer auf das Minimum reduziert haben und mit den Weaver Xtreme Admin Einstellungen arbeiten. Für die Ausgabe im Sinne der Barrierefreiheit müssen wir aber wohl an der ein oder anderen Stelle noch eigene kreative Lösungen finden.

Wie auch immer mein Kunde es für sein Projekt wünscht, ob nun nur für Screen Reader oder für jeden Nutzer lesbar: Für die Ausgabe des WordPress Weiterlesen Button mit Beitragstitel hilft 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 dieses Read More vorgesehen. Die hebt die vorhandene Funktion auf und ermöglicht so, das eigene Vorgehen festzulegen.

Beitragsbild: Britta Kretschmer