make prominent visual elements accessible!
TRANSCRIPT
Esther Brunner
Make prominent visual elements accessible!
@ebr76
ZÜRICH, SWITZERLAND
• You can find what you need
• Content
• Everything makes sense
• Structure
• Guidance
Information architecture
Carousels
1. Highlight key features and content
2. Draw users’ attention to the slides
• Visual prominence
• Motion
Why use a carousel?
“Hey there, I'm new, I'm important, I'm sexy!”
The implicit guiding message:
1. Highlight key features and contentWe know how to make content and structure accessible:
• Semantic markup
2. Draw users’ attention to the slidesBut how can we transport the implicit guiding message for visually impaired users?
What about accessibility?
• Don’t use autoplay together with aria-live!
• Autoplay and aria-live will disrupt the reading experience every time a slide changes
• Try to avoid autoplay entirely. If you can’t …
• There must be a mechanism to pause, stop, or hide (WCAG 2.0, success criterion 2.2.2)
Don’t
• Use words!
• Visually hidden heading
• Follow the recommendations of W3C for accessible carousels:https://www.w3.org/WAI/tutorials/carousels/
Do
Thank you!
Esther Brunner@ebr76