Problem
Das Elementor Testimonial-Widget setzt bei den Sterne-Icons automatisch ein aria-label.
Dieses Label beschreibt den Inhalt jedoch falsch oder redundant, weil die Sterne nur eine visuelle Bewertung darstellen und keine eigene semantische Bedeutung haben.
Für Screenreader entstehen dadurch zwei Probleme:
- Screenreader lesen unnötige Informationen vor
- Die Sterne werden als eigenständige Elemente interpretiert, obwohl sie rein dekorativ sind
Damit verstößt das Markup faktisch gegen die Accessibility-Empfehlung für decorative icons.
Lösung
- Die Sterne werden per JavaScript nach dem Laden der Seite angepasst:
- aria-label wird entfernt
- aria-hidden=“true“ wird gesetzt
Damit ignorieren Screenreader die Sterne vollständig.
Code
<?php add_action('wp_footer', function(){ ?>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll(".elementor-testimonial__icon").forEach(function(el){
el.removeAttribute("aria-label");
el.setAttribute("aria-hidden","true");
});
});
</script>
<?php }); ?>
Funktionsweise
- Das Script läuft nach DOMContentLoaded.
- Es sucht alle Sterne-Icons im Testimonial-Widget (.elementor-testimonial__icon).
- Für jedes Element wird
- das vorhandene aria-label entfernt
- aria-hidden=“true“ gesetzt
Dadurch behandeln Screenreader die Sterne korrekt als dekoratives Element.
Einbau
Den Code in die functions.php des Child-Themes oder in ein eigenes Snippet einfügen.
Hinweis
Der Fix ist nur nötig, weil Elementor aktuell falsche Accessibility-Attribute setzt.
Sollte Elementor das Widget künftig korrigieren, kann das Script entfernt werden.