Splide attempts to enhance accessibility by supporting keyboard control and adding ARIA attributes.

Keyboard

Arrows, visible slides and pagination items can be focused by Tab key. Try it in the following slider emphasizing a focused element.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

While one of elements inside a slider has a focus, a Left/Right Arrow key moves the slider to previous/next page.

You need to style a focused element by yourself with border, background-color or outline etc, so that it adapts to your design.

ARIA Attributes

ARIA attributes are added to following elements if accessibility option is enabled. Note that all texts can be modified through an i18n object.

Slides

  • aria-hidden: true for slides out of a view port. false, otherwise.

Arrows

  • aria-controls: ID of a track.
  • aria-label: "Previous slide" or "Go to last slide" for a prev arrow. "Next slide" or "Go to first slide" for a next arrow.

Pagination

  • aria-controls: ID or IDs of slides.
  • aria-label: "Go to slide {number}" or "Go to page {number}".

Play/Pause

  • aria-controls: ID of a track.
  • aria-label: "Start autoplay" for a play button. "Pause autoplay" for a pause button.

Slides in Navigation Slider

  • role: 'button' because a slide is not button element but clickable.
  • aria-controls: ID of a slide in a main slider.
  • aria-label: "Go to slide {number}"
User's Guide
Tutorials
Extensions