The main reason why most web homepages are inaccessible and how to change this with an accessible carousel

Claudia.Cahalane | 11 Apr 2017

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. 

s screen shot of a carousel in automatic motion from The Times newspaper website

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: