The MetaSlider team works hard to make sure the plugin is accessible for people using screen readers and/or people with disabilities.
If you see any way that we can improve our support for accessible users, please do not hesitate to get in touch with us.
Core Accessibility Features
The main MetaSlider plugin provides accessibility features that do not require you to configure any settings. One key feature is our use of ARIA (Accessible Rich Internet Applications) which defines define ways to make the web more accessible.
MetaSlider uses aria-roledescription and aria-label. Screen readers can use this to identify why an element is on the website and what it does. Mozilla has good introductions to aria-roledescription and aria-label. This screenshot below shows an example of that code in the MetaSlider output for a slideshow.
Next, here’s a second example using a single slide. MetaSlider again uses aria-roledescription and aria-label. In this example, we also use aria-hidden to indicate that this slide is off-screen and not currently in use.
Accessibility Options
In addition to our core accessibility features, MetaSlider also provide some options in the “Accessibility Options” area of the slideshow editing screen:
- Keyboard Controls: Use the forward and back arrows on your keyboard to navigate through the slides
- Tabindex for navigation: This helps to hide inactive slides from screenreaders.
- ARIA Live: Screenreaders will announce when the slides change.
- ARIA Current: This helps screenreaders to understand which slide is currently active.
Keep scrolling down for more detailed guides to each of these features.
Keyboard Controls
The Keyboard Controls feature allow you to use the forward and back arrows on your keyboard to navigate through the slides. This is helpful to users who do not use a mouse to navigate your website.
Tabindex for navigation
This is a feature that impacts the dots navigation in your slideshow. If this option is enabled, MetaSlider will add tabindex="-1" to the items that are not active. This removes the slideshow from the natural tab order of the page. This hides the slideshow from the screen if you are using keyboard or screenreader navigation.
The code sample below is the output for a MetaSlider slideshow where the first slide is active. The “Tabindex for navigation” issue has added tabindex="-1" to the slides that are not visible. This Mozilla guide has a helpful introduction to using tabindex.
Aria Live
ARIA Live is a feature that impacts slideshows when they are autoplaying. If this option is disabled, autoplay will happen quietly and screen readers will not account any changes. If this option is enabled, screen readers will announce that the slides are changing. This Mozilla guide has a helpful introduction to ARIA Live.
MetaSlider’s ARIA Live feature uses the “off” (when autoplay is on) and “polite” (when autoplay is off) values. Here’s what those value mean:
- off: This value tells the screen reader to ignore any updates or changes to that part of the webpage. It’s like saying, “Don’t bother telling the user about changes here.”
- polite: This value tells the screen reader to announce updates when the user is not actively engaged with something else. It’s like politely waiting for the right moment to speak up.
This screenshot shows how the ARIA Live code appears when a MetaSlider slideshow loads:
ARIA Current
ARIA Live is a feature that helps screenreaders to understand which slide is currently active. This Mozilla guide has a helpful introduction to ARIA Current.
Here’s an example of navigation that benefit from ARIA Current. The first icon is a different color and indicates that the first slide is current active and visible.
This next screenshot shows the MetaSlider code for that navigation. The first slide is marked with aria-current=”true”.
