Glide.js

Summary

• Workaround required: Library provides pagination bullets but doesn’t set aria-current on the active one
• Fix: Add aria-current handling on slide change
• Has open issues with cloned elements affecting focus

Accessibility Analysis

Score: 44.4% — 4/9 accessibility issues resolved

Open Issues (5)

• Focus management on hidden cloned elements (633+ days old)
• Cloned item handling affects linked elements
• Breakpoint-based enable/disable issues

Our Workaround

Glide.js provides bullet pagination but doesn’t set aria-current on the active bullet. Screen readers can’t determine which slide is currently active.

const bullets = document.querySelectorAll('.glide__bullet')

const updateAriaCurrent = (index) => {
  bullets.forEach((bullet, i) => {
    bullet.setAttribute('aria-current', i === index ? 'true' : 'false')
  })
}

const glide = new Glide('.glide', { type: 'carousel', perView: 1 })

glide.on('run', () => {
  updateAriaCurrent(glide.index)
})

glide.mount()

Built-in Pagination

Glide has built-in pagination via data-glide-el="controls[nav]":

<div class="glide__bullets" data-glide-el="controls[nav]">
  <button class="glide__bullet" data-glide-dir="=0" aria-label="Go to slide 1"></button>
  <button class="glide__bullet" data-glide-dir="=1" aria-label="Go to slide 2"></button>
  <button class="glide__bullet" data-glide-dir="=2" aria-label="Go to slide 3"></button>
</div>