Is Smart Slider 3 Accessible?

Slider accessibility

The slider is marked with role="region" and has an aria-label attribute. Upon arriving to the slider's region, this aria-label is read by the screen reader. You can customize the slider's aria-label attribute at Slider settings → General → ARIA label.

Slides accessibility

After slide switching, screen readers announce the slide using the slide title. Make sure you set a descriptive tile to each slide at Slide → Content tab → Slide Title.

Links accessibility

At the JavaScript based links (such as at the Slide, Row and Column) you can find an ARIA label field where you can set the name screen readers will use to announce the link.

Controls accessibility

Controls, such as arrows or bullets, have the role="button" attribute, and also tabindex="0". These attributes allow focusing on them with keyboard.

After switching slides, the focus jumps back to the start of the slide.

Arrows

The arrows have their own aria-label attribute, what you can customize at Slider settings → Controls tab → Arrow → Previous alt tag and Next alt tag.

Bullets

The bullets use the Slide title as their aria-label attribute. The currently active bullet is marked with aria-current="true".

Outline CSS code

When you are doing your tests, you are probably using tab on your keyboard, to switch from element to element. Our code won't highlight the currently focused element, but you can use a CSS code to outline it:

body .n2-ss-slider a.n2-ow:focus,
body .n2-ss-slider .n2-ow-all a,
body .n2-ss-slider .n2-ow-all a:focus,
body .n2-ss-slider *:focus {
  outline: 2px dashed red !important;
}

You could go to our slider's Developer tab and insert the code into the CSS field.

Please note, that we do not support custom coding! If you want to modify this sample code, you have to do it yourself.