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

Keyboard

Keyboard Shortcuts

Keyboard shortcuts are enabled as default by listening to the keydown event of the document. Here is the list of shortcuts:

Arrow LeftGo to previous page in LTR mode or next page in RTL mode
Arrow RightGo to next page in LTR mode or previous page in RTL mode
Arrow UpGo to previous page in TTB mode.
Arrow DownGo to next page in TTB mode.

If there are multiple sliders in a page, all sliders correspond with shortcuts simultaneously because the handler is attached to the document. If you want to control them individually, set the keyboard option to 'focused', which makes sliders focusable by adding tabindex="0" to their root element.

Tab Control

Arrows, visible slides and pagination items can be navigated by Tab key. Try it in the following slider.

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

This is achieved by adding tabindex="0" to visible slides. This can be disabled by setting the slideFocus option false.

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
Integration