How to Fix the “ARIA role=list is Missing Required listitem Children” Error in Swiper.js

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children

If you’ve ever run Google Lighthouse or Axe against a Swiper.js slider, you may have seen exactly that daunting message. In this post you’ll learn why it happens, how to solve it in under a minute, and where to drop the one-line fix into your Swiper init code.

What the error means

Under the hood, Swiper’s Accessibility module by default generates markup like this:

<div role="list" class="swiper-wrapper">
  <div role="group" class="swiper-slide">…</div>
  <div role="group" class="swiper-slide">…</div>
  <div role="group" class="swiper-slide">…</div>
</div>

‍According to the ARIA spec, a container with role="list" must have direct children with role="listitem". If they’re anything else—role="group", a bare <div>, etc.—Lighthouse/Axe will flag:

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

The one-line solution

Simply tell Swiper to use role="listitem" for each slide instead of group. In each Swiper initialization object, add:

a11y: {
  enabled: true,
  slideRole: 'listitem'
}

‍
That’s it—no manual DOM tweaks, no extra wrappers, and you keep all of Swiper’s built-in a11y announcements (e.g. “Slide 2 of 5”).

You can place this code directly within your Swiper, just like on this example below:

<script>
  const mySwiper = new Swiper('.swiper.my-slider', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // ↓ UNIVERSAL ARIA FIX ↓
    a11y: {
      enabled: true,
      slideRole: 'listitem'
    }
  });
</script>

How to test this solution

Now that you've added the one-line fix, test it with Google Lighthouse or Axe and you should see that Accessibility score go higher. If it hasn't recheck your code and make sure that you have the proper syntax in place. You can use ChatGPT to see if you've done it correctly.

Why this solution works

1. ARIA Spec Compliance
   A role="list" container must have role="listitem" children.
2. Keeps Built-In A11y
   You retain Swiper’s announcements (“Slide 2 of 5”, focus management, etc.).
3. No Manual Markup Changes
   One line in your JS—no extra wrappers, no HTML surgery.