Hello everyone. This is Luke with Online ADA and in this video we’re gonna be talking about carousels and how to make them accessible by following WCAG 2.1 guidelines.
Throughout this video I will be referencing this example I have here. A very simple carousel to help better demonstrate the topics we’re gonna be discussing about carousels. I’ll be going over keyboard operability and focus indicators, having a pause feature for your carousel and lastly properly naming all interactive elements on your carousel, like the ‘next’ and ‘previous’ buttons, ‘pause’ and ‘play’ and dot navigation, stuff like that.
First let’s go over the WCAG rules that directly apply to carousels. First, we have WCAG 1.3.1, info and relationships. Any information and relationships between elements needs to be programmatically determined or available in text. For example, we know that by looking at this carousel here, that all these icons here are related to this carousel. But a user using a screen reader would not be inherently aware of this or how these are related.
Next we have WCAG 2.1.1, just titled, keyboard. This just states all functionality of content needs to be easily and clearly keyboard operable. As an example, all these carousel controls need to be usable and navigable using the keyboard. So I’m gonna go tab through and operate all these functions just using the keyboard itself.
Okay, lastly we have WCAG 2.2.2. This is titled pause, stop and hide. For moving and blinking, scrolling or auto up-to-date information, there needs to be a mechanism in place for the user to pause, stop or hide those elements. In this case it would be applicable to the sliding, fading or just simply hiding and showing different slides on your carousel.
Okay, now that we’ve gone through all the rules that directly apply to making a carousel, let’s dive into actually constructing a carousel that is compliant. Let’s start with keyboard operability and focused indicators. We need to be able to tab through the function elements in your carousel in the order they appear, and that just makes sense. As you can see in this example, we can start by tabbing, first into the content the slide, the link and then onto the controls. Pause/play button. And then we have a dot navigation, we can also control via the keyboard navigate, easily via keyboard. I’ve also, in this example, decide to programmatically determine the tab index of the different slides. So, if you look at the HTML here, I had the initial slides set at the tab index of zero, because that is the slide is initially visible. And then via my script that I’ve written, as we step through the arrows here these are changed from zero to negative one and vice versa.
Now as we tab through these functional elements there needs to be a very clear indicator of the focus state. So, as you can see, I have achieved by applying a simple green outline for the currently focused element. You need to make sure that the indicator is following the WCAG guidelines for the minimum contrast ratio between it and the background. Now I’ve obviously achieved this using the outline, but you can easily do this using a box shadow or a border. Now, along with the focus indicator, the currently selected functional element needs to be activated via either the enter key or the space key.
As you can see here, I can do both. Alright, let’s move on to the pause feature. The pause feature is important, as we are required by WCAG 2.2.2, to add a mechanism that allows to cease any unwanted animations. And since our carousel might automatically start swapping between slides, there needs to be a way for the user to stop in, or to pause and start the animation at will. I’ve obviously achieved this by adding this very simple pause or play button directly beneath the slides themselves. So, as the user navigates through the carousel they have the option to stop and play the carousel at will. Alright, that’s all we have for the pause feature.
Let’s talk about accessibility names. It is essential to remember how the function elements within your carousel are gonna be read by the screen reader and not just how they are visually presented to the user. As you can see here, we have icons that clearly indicate, visually, that this will navigate to the previous or the next slide. But, if there’s no text indicating what these buttons do, a screen reader is just gonna skip right over them and the user is not gonna have any idea what it’s supposed to do or how to navigate back and forth between slides. Therefore, a user using a screen reader will be completely lost and unable to access content that you would otherwise want them to read and easily be able to access. This is actually one of the most commonly overlooked aspects of creating a carousel because you will almost always use icons to represent the navigation between the carousel slides. This is fine, as long as you also add textual representation of what these elements are supposed to achieve.
In this case, I have simply added ARIA labels to all of these icons to read to the screen reader what they’re supposed to do. So here I have an ARIA label of, let’s close this down here… here for the previous button I have previous slide and then next slide. I also have label for pause carousel/ play carousel and so on so forth. This can also be achieved by simply putting an element within the button with a text that will be read by the text reader. I have a good example of that here. In this example here, and we inspect this right here. We can see that we open the button up, it has a span that has visually hidden class, which is obviously, hiding it visually, and it has a text stop admission. This will achieve the same thing as my example of an ARIA label. It will be read the same way by a screen reader.
And last, but not least, I’ve added a role to the parent of the pause and play controls here, of alert. That’s, simply, as the user goes through this and pause and plays will be read aloud to them that it’s been paused and it hasn’t played and is showing the new control to the user. Okay.
That’s all I have for you today on carousels. Thank you for watching.