800,000+ WordPress sites are already using MetaSlider!

Accessibility Options in MetaSlider

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.

Aria role description code

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.

ARIA Label

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
  • ARIA Live: Screenreaders will announce when the slides change.
  • Tabindex for navigation: This helps to hide inactive slides from screenreaders.

Keep scrolling down for more detailed guides to each of these features.

Accessibility Options

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.

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:


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.

Tabindex for slideshow

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.