Um das Ziel oder den Zweck eines Links mit generischem Link-Text zu beschreiben, kann man das HTML Tag link title nutzen: <a href=“/sommerfest/“ title=“Mehr über das Sommerfest erfahren“>Mehr erfahren</a>. Der Link Title kann aber nicht dynamisch (wie bspw. das Link Ziel) in Elementor festgelegt werden. Als Workaround muss deshalb mit Javascript der Inhalt des Beitragtitels genommen und als Link-title festgelegt werden.
- Title Element die Klasse „post-title“ geben
- Button Element die Klasse „post-button“ geben
- Card-Container die Klase „post-card” geben
- Auf der Seite mit dem Loop Grid (nicht im Template der Loop Items selbst) folgenden Javascript Code als HTML-Element hinter das Loop Grid packen
<script>
const titleElements = document.querySelectorAll(
".post-title .elementor-heading-title"
);
const buttonElements = document.querySelectorAll(".post-button a");
const cardElements = document.querySelectorAll(".post-card");
if (titleElements.length === buttonElements.length) {
titleElements.forEach((title, index) => {
const titleText = title.textContent; //get title content
buttonElements[index].setAttribute("title", titleText); //find button and set attribute
cardElements[index].setAttribute("title", titleText); //find card and set attribute
});
} else {
console.log("Fehler: Es gibt unterschiedlich viele Titel und Buttons.");
}
</script>Sonderfall: Die gesamte Card ist ein Link, nicht nur der Button
Wenn über das Happy Addons Feature „Wrapper Link“ dem gesamten „Card“ Container ein Link gegeben wurde, zählt die gesamte Card als Link – man kann klicken, wo man möchte. Screenreader erkennen die Card aber nicht als Link, semantisch ist es ein normales <div>. Deshalb muss trotzdem der Link dynamisch in einem Button gesetzt werden. Der oben stehende JS Code funktioniert trotzdem:
- Die Card wird visuell als klickbares Element präsentiert, beim Hovern erscheint der title tag als Tooltip. Screenreader lesen die Card nicht vor.
- Der Button wird visuell als klickbares Element präsentiert, beim Hovern erscheint der title Tag als Tooltip. Screenreader lesen den Button Text und den Tooltip vor.
Dieser Effekt funktioniert nicht, wenn statt dem Happy Addons Feature das native Elementor Feature genutzt wird, das via „zusätzliche Optionen“ den Container als <a> tag setzt. Dabei muss der Link im Button entfernt und der JS Code angepasst werden, weil es sonst zu Bugs kommt.
Sonderfall: Andere Elemente wie der Titel oder das Bild sollen auch als Link funktionieren
Wenn bspw. das Titelbild auch als Link fungieren soll, kann der JS Code erweitert werden:
- Elementor Element eine Klasse geben: .post-image
- Mit Developer tool prüfen, wo im HTML Code der Link gesetzt wird: .post-image a
- In JS variable für Array definieren: const imageElements = document.querySelectorAll(“.post-image a”);
- In JS in der forEach Schleife das Attribut setzen: imageElements[index].setAttribute(„title“, titleText);
Hinweis: Idealerweise würde das Ziel direkt im Button Text stehen, bspw. „Mehr über das Sommerfest erfahren“. Das könnte theoretisch durch ein Custom Feld durch Advanced Custom Fields gelöst werden, ist in der Praxis aber vollkommen überdimensioniert.