This document summarizes a webinar presented by AbilityNet on building accessible carousels. It discusses what carousels are and their advantages and disadvantages. Common carousel accessibility issues for keyboard users, assistive technology users, and users with visual or cognitive impairments are outlined. Guidelines are provided for making carousels accessible, such as ensuring keyboard navigation, adding pause buttons for auto-updating carousels, and maintaining sufficient color contrast. An accessibility checklist is also included. Additional resources on carousel accessibility are recommended for further information.

1. Building Accessible Carousels, Webinar, 23 March 2017
Building Accessible Carousels
AbilityNet webinar
23 March 2017
DOWNLOAD THESE SLIDES NOW AT
www.slideshare.com/abilitynet

2. Building Accessible Carousels, Webinar, 23 March 2017
Welcome
Alladin Elteira
Senior Accessibility and Usability Consultant
AbilityNet
MARK WALKER
Head of Marketing & Communications
AbilityNet

3. Building Accessible Carousels, Webinar, 23 March 2017
About AbilityNet
AbilityNet is a charity that helps disabled people achieve their goals at
home, at work and in education
• Digital Accessibility Testing and Consultancy
• Workplace Assessments
• DSA Assessments
• IT Support at Home
• Free expert resources on our website
• Free helpline: 0800 269 545
3

4. Building Accessible Carousels, Webinar, 23 March 2017
Accessible Carousels
What are carousels?
Advantages and disadvantages of Carousels
Common Carousel Accessibility issues, and how to address them
• Keyboard users
• Assistive technology users
• Users with visual and cognitive impairments
Carousel Accessibility Checklist

5. Building Accessible Carousels, Webinar, 23 March 2017
What is a Carousel?
• Consists of a number of slides with content
• Slides are displayed one at a time
• Carousels are also known as slide shows / sliders
Structure of carousel
5

6. Building Accessible Carousels, Webinar, 23 March 2017
Popularity of Carousels
Advantages:
Carousels were initially used by
designers to solve two main
design concerns:
• More content in little space.
• Determining the most
important content to display.
6

7. Building Accessible Carousels, Webinar, 23 March 2017
Popularity of Carousels
Disadvantages:
• User testing proved that
content tends to be missed
• Few users interact with
them
• Carousels pose many
accessibility issues
7

8. Building Accessible Carousels, Webinar, 23 March 2017
Carousel Accessibility Issues
1. Keyboard Users
2. Assistive Technology Users
3. Visual and cognitive impairments
8

9. Building Accessible Carousels, Webinar, 23 March 2017
1. Keyboard Users
• Carousel navigation should be possible with keyboard only
• Use of “tabindex” attribute for clickable elements that don’t receive
tabbing focus
• Ensure that there is Visible focus indicator
• Avoid outline:0, or outline:none..
9

10. Building Accessible Carousels, Webinar, 23 March 2017
2. Assistive Technology Users
Eg. Users of screenreaders and voice recognition software
• Screenreader users should be informed where the carousel starts
and ends.
• Carousel items that are visually hidden should also be hidden from
screenreaders by using aria-hidden attribute
10
aria-hidden

11. Building Accessible Carousels, Webinar, 23 March 2017
Use WAI-ARIA attributes to inform users about the selected page in the
carousel.
• E.g. Aria-current attribute
• Use descriptive text alternatives for all controls.
11
2. Assistive Technology Users

12. Building Accessible Carousels, Webinar, 23 March 2017
2. Assistive Technology Users
Descriptive Alt Text example :
12
Example of descriptive alternative text: http://www.lloydsbank.com/

13. Building Accessible Carousels, Webinar, 23 March 2017
3. Visual and cognitive impairments
• Many users get distracted by automatic movement.
• Provide a button to allow users to stop and resume the animations.
13
Example of a carousel containing a pause/play button: www.abilitynet.org.uk

14. Building Accessible Carousels, Webinar, 23 March 2017
3. Visual and cognitive impairments
• Carousel text should have sufficient colour contrast
• This also included images of text
Tools to test contrast:
Colorsafe: www.colorsafe.co
Colour Contrast Checker:
webaim.org/resources/contrastchecker
14

15. Building Accessible Carousels, Webinar, 23 March 2017 15
Accessible Carousels Checklist
All interactive elements can be navigated to by using the “Tab” key, and
they all receive a clear visual indicator.
There is no automatic change on screen when an icon is on focus either
by using the “Tab” key, or with mouse hover.
All controls and icons are properly described.
Carousel does not cause keyboard trap.
Wai-aria attributes to specify the selected page.
Auto-updating carousels contain a pause / play button.
Text and images of text have a sufficient colour contrast

16. Building Accessible Carousels, Webinar, 23 March 2017
Additional Resources
Anatomy of an accessible carousel
• www.accessiq.org/create/content/anatomy-of-an-accessible-
carousel
Carousel concepts
• https://www.w3.org/WAI/tutorials/carousels/
16

17. Building Accessible Carousels, Webinar, 23 March 2017
Any questions?
17

18. Building Accessible Carousels, Webinar, 23 March 2017
Thank you
Next webinars
More details on AbilityNet website
Request a quote from our accessibility services
www.abilitynet.org.uk/request-a-quote
Call our free helpline 0800 269 545
18