Flickity

Summary

• Workaround required: Library sets aria-hidden on inactive slides but leaves focusable elements (links, buttons) inside them, creating focus traps
• Fix: Manage tabindex on focusable elements when slides change

Accessibility Analysis

Score: 74.6% — 44/59 accessibility issues resolved Median resolution time: 69 days

Open Issues (15)

• aria-hidden incorrectly applied to visible elements
• Previous/next buttons lack accessible names
• Page dots not keyboard accessible
• Screen readers crash after clicking navigation
• Slides outside viewport remain focusable

Recommendation

The accessible-carousel-boilerplates project recommends avoiding wrapAround and accessibility options.

Our Workaround

Flickity sets aria-hidden="true" on non-visible slides, but links and buttons inside remain focusable. Screen reader users can tab into content they can’t see.

const updateFocusableElements = (selectedIndex) => {
  slides.forEach((slide, i) => {
    const focusables = slide.querySelectorAll('a, button, input, select, textarea')
    focusables.forEach((el) => {
      el.setAttribute('tabindex', i === selectedIndex ? '0' : '-1')
    })
  })
}

flkty.on('select', () => {
  updateFocusableElements(flkty.selectedIndex)
})

// Initial setup
updateFocusableElements(0)