Elementor Loop Carousel – ARIA-Fehler beheben

Status: Erfolgreich getestet
Einbindung: PHP-Snippet über Code Snippets

Problem

Google PageSpeed Insights meldet beim Elementor Loop Carousel fehlende erforderliche untergeordnete ARIA-Rollen.

Ursache

Elementor setzt am äußeren Swiper-Container
role="list". Die einzelnen Slides verwenden
jedoch role="group" und
aria-roledescription="slide".

Diese Struktur erfüllt die Anforderungen an eine ARIA-Liste nicht. Die zusätzliche Swiper-Wrapper-Ebene erschwert die Korrektur durch das Ergänzen von role="listitem".

Lösung

Die fehlerhafte Listenrolle wird vom äußeren Container entfernt. Die Swiper-Semantik der Slides bleibt bestehen.

PHP-Snippet

add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        function fixLoopCarouselAria() {
            document.querySelectorAll(
                '.elementor-widget-loop-carousel .swiper.elementor-loop-container[role="list"]'
            ).forEach(function (el) {
                el.removeAttribute('role');
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', fixLoopCarouselAria);
        } else {
            fixLoopCarouselAria();
        }
    })();
    </script>
    <?php
});

Einbindung

  • Snippet-Typ: PHP
  • Ausführung: Frontend bzw. überall
  • Kein zusätzliches PHP-Opening-Tag einfügen

Test

  1. Snippet aktivieren und Cache leeren.
  2. Swiper-Container im Browser-Inspektor prüfen.
  3. Kontrollieren, dass role=“list“ entfernt wurde.
  4. PageSpeed Insights erneut ausführen.

Ergebnis: Der ARIA-Strukturfehler wurde beim getesteten Elementor Loop Carousel behoben.

Hinweise

Der Fix betrifft ausschließlich Elementor Loop Carousel und verändert keine normalen Loop Grids.

Dynamisch nachgeladene Karussells werden nicht automatisch erfasst. Nach Elementor-Updates sollte der Fix erneut überprüft werden.