Accessibility
What are the requirements for an accessible slider?
Transcript
Introduction
Let’s explore how to use a plugin to create a carousel slider. Web carousels are often an elegant way to group or organize related content into one space, enabling you to create visual connections between related pieces of information.
Plugins
There are a variety of slider plugins available in the Plugins Directory, for example, MetaSlider, Smart Slider 3, and Carousel Slider Block for Gutenberg. Please note that we don’t endorse any of the plugins mentioned. They are intended to illustrate potential options available for users.
MetaSlider
If you are using a plugin such as MetaSlider, you need to make your way to the plugin, click on “Add New”, “Add slide” and then select the relevant images from your Media Library. Once you add the slideshow, there are a variety of options to choose from: Mobile options, advanced options, accessibility options, and even developer options.
Carousel Slider Block for Gutenberg
In this session, I will briefly show you how to use the Carousel Slider Block for Gutenberg plugin, as you can add it as a block, and it supports adding other blocks to slides. And it is compatible with WooCommerce. You can open a page or post once you have installed and activated the plugin. To add the block, I will type in /slider and select carousel slider and then we can start adding blocks within. In this example, I will add 3 Image blocks. Once inserted, you can modify it like any other block. Let’s go ahead and open the List View, select the parent block and then change the alignment to wide width. Then, we can make our way to our sidebar settings and adjust the number of slides to show. Below, you can select how many slides you want to scroll at a time and then slide animation speed. At the bottom, the arrows and dots navigation have been toggled on.
It is also advised to avoid auto-scrolling and autoplay to give your audience more control and avoid any accessibility problems. If the slider auto-plays, there should be a pause control. And if you were wondering RTL in WordPress refers to the support for languages written from right to left. Below the responsive settings, you can add a breakpoint and decide how many slides you want to display when it reaches that screen size. When you select an Image block, you can set an aspect ratio to ensure that all images appear the same size. Then we can check it out on the front end.
As mentioned, this block allows you to add an Image block and other blocks as well. So, in this example, I have added a Cover block and inside the Cover block, a Heading block, a Spacer block, and a Buttons block. I have also decided to select the parent block and to change the amount of slides to show to one.
Accessibility
Before we end, I wanted to note that sliders can sometimes cause accessibility issues. It is therefore important to add alt text to images so that the slider you are using can be operated via the keyboard and interact with screen readers. I will add a link below this video about the requirements for an accessible slider.
Conclusion
Happy creating and use sliders wisely.
Practical
Install and activate a slider plugin of choice and test it out.