Falsches Aria-Label aus Testimonial-Widget entfernen

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

  1. Das Script läuft nach DOMContentLoaded.
  2. Es sucht alle Sterne-Icons im Testimonial-Widget (.elementor-testimonial__icon).
  3. 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.