Accessibility

SliderKit is built with screen-reader and keyboard users in mind.

ARIA attributes

The slider automatically manages these ARIA attributes:

Element	Attribute	Value
Container	role	"region"
Container	aria-label	Slider label (configurable)
Slide	aria-hidden	"true" when not active
Arrow buttons	aria-label	"Previous" / "Next"
Pagination dots	aria-label	"Go to slide N"
Pagination dots	aria-current	"true" for active dot

Keyboard navigation

Key	Action
Tab	Move focus through interactive elements inside slides
← / →	Previous / next slide (when arrows are focused)
Enter / Space	Activate focused button (arrows, dots)

Autoplay and motion

The autoplay plugin pauses when any element inside the slider receives focus. This prevents content from moving while a keyboard user is reading a slide.

Respect the prefers-reduced-motion media query in your CSS:

@media (prefers-reduced-motion: reduce) {
  .c--slider-a__wrapper {
    transition: none !important;
  }
  .c--slider-a__slide {
    transition: none !important;
  }
}

Focus management

By default the slider does not move focus on slide change. If your slides contain important interactive content, you can manually focus the active slide's first focusable element using the afterSlideChange event:

slider.on('afterSlideChange', ({ index }) => {
  const slide = slider.slides[index]
  const focusable = slide.querySelector('a, button, input')
  focusable?.focus({ preventScroll: true })
})