Is Smart Slider 3 Accessible?
In this article
Yes, any content you add to Smart Slider is accessible for screen readers. Textual layers (like the Heading or Text) are read as any other text you have on your site.
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" .
Tabbing
On your keyboard you can use the tab key to go through the slider's focusable elements. These elements are:
Elements (layers, structures) without links cannot be accessed by using tab, because tabindex should only be used on elements, which have interactions.
So the slider is interactive, because you can use keyboard to switch between slides, controls are interactive for the same reason, and links can be clicked to access them.
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.