Building Accessible Carousels, Webinar, 23 March 2017

Building Accessible Carousels

AbilityNet webinar23 March 2017

DOWNLOAD THESE SLIDES NOW ATwww.slideshare.com/abilitynet

Building Accessible Carousels, Webinar, 23 March 2017

Welcome

Alladin ElteiraSenior Accessibility and Usability ConsultantAbilityNet

MARK WALKERHead of Marketing & CommunicationsAbilityNet

Building Accessible Carousels, Webinar, 23 March 2017 3

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

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

Building Accessible Carousels, Webinar, 23 March 2017 5

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

Building Accessible Carousels, Webinar, 23 March 2017 6

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.

Building Accessible Carousels, Webinar, 23 March 2017 7

Popularity of Carousels

Disadvantages: • User testing proved that

content tends to be missed• Few users interact with

them• Carousels pose many

accessibility issues

Building Accessible Carousels, Webinar, 23 March 2017

Carousel Accessibility Issues

1. Keyboard Users2. Assistive Technology Users3. Visual and cognitive impairments

8

Building Accessible Carousels, Webinar, 23 March 2017 9

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..

Building Accessible Carousels, Webinar, 23 March 2017 10

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

aria-hidden

Building Accessible Carousels, Webinar, 23 March 2017 11

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.

2. Assistive Technology Users

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/

Building Accessible Carousels, Webinar, 23 March 2017 13

3. Visual and cognitive impairments

• Many users get distracted by automatic movement. • Provide a button to allow users to stop and resume the animations.

Example of a carousel containing a pause/play button: www.abilitynet.org.uk

Building Accessible Carousels, Webinar, 23 March 2017 14

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

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

Building Accessible Carousels, Webinar, 23 March 2017 16

Additional Resources

Anatomy of an accessible carousel• www.accessiq.org/create/content/anatomy-of-an-accessible-carous

el

Carousel concepts• https://www.w3.org/WAI/tutorials/carousels/

Building Accessible Carousels, Webinar, 23 March 2017

Any questions?

17

Building Accessible Carousels, Webinar, 23 March 2017

Thank you

Next webinars

More details on AbilityNet website

Request a quote from our accessibility serviceswww.abilitynet.org.uk/request-a-quote

Call our free helpline 0800 269 545

18