Lots of websites still have a carousel feature on the homepage - ie, a box featuring scrolling slides highlighting the latest/ most interesting content on the site.
The problem is that most web developers and designers don’t make carousels accessible, so a whole range of people - from those using screen readers, to those with motor difficulties, will struggle as soon as they arrive on a site, and often click away in frustration.
If you want to cater for a wider audience, AbilityNet’s senior accessibility and usability expert, Alladin Elteira, recently gave some great advice on accessible carousels in our webinar. Of those who tuned in, 91% said they found the session useful. You’ll find the video and tips below covering:
Creating accessible carousels for keyboard users
Creating accessible carousels for screen readers and voice over equipment
Creating accessible carousels for users with cognitive impairments
1 The first rule of accessible carousels is, don’t have a carousel if you can avoid it! They are generally problematic for a number of different disabilities as well as for accessibility equipment such as screen readers.
2 Secondly, you could hide the carousel, if the information available in it is presented elsewhere.
3 Some people, such as those with motor conditions might not be able to use a mouse. So, all interactive features of a carousel should be accessible/ reachable using the tab keys on the keyboard. This includes clickable images, the pause and play and the numbers - ie 1, 2, 3 - which are sometimes used to click from one slide to another.
4 Users who have low vision or cognitive impairments may get confused by quickly moving content which updates automatically, which many carousels have. It’s advisable to implement a pause button, or better still to make sure the carousel doesn’t update automatically.
5 Ensure the visual focus indicator (normally the arrow on screen which indicates where the mouse is) works with tab keys too.
6 If there is no tab focus, a designer can use the tabindex attribute, which makes elements that aren't accessible using the tab key, easier to use for keyboarders.
7 Make sure the carousel is not using a keyboard trap, ie, that people using a keyboard rather than a mouse don’t get stuck in the page of a carousel without being able to get out of it.
8 Screen readers often have big issues with carousels. It’s good practice to inform screenreader users that they’re within a carousel, including when they’re at the beginning and end of a carousel. Most sites currently don’t.
9 Use Aria Hidden to hide slides 2 and 3 while someone is on/ reading slide 1, or vice versa. Otherwise the screenreader will just read through all the information on the series of slides in one go - this can become very confusing for a user/ listener.
10 Labels, buttons, the ‘next’ and ‘previous’ buttons, 'play' and 'pause' buttons, headings, links that open in a new window, images and so on should have descriptive labels / equivalent script alternatives, as well as be accessible using the tab keys.
Useful links for more information
You might also be interested in: