Presented at the CSUN Assistive Technology conference 2020. How to use web animation to support understanding, without excluding people with cognitive or vestibular issues. Presentation based on developer and accessibility auditor experience. How to use web animation to help enhance people’s understanding without creating barriers for people with cognitive or vestibular issues. Learn how to provide useful, fun interface animation to enhance people’s understanding while giving everyone control over what they see so no one is excluded

1. Making Accessible Web Animations
CSUN 2020
Julie Grundy
Digital Accessibility Consultant
@stringy
12 March 2020Slides: http://bit.ly/mawa3

2. New animation tools
• CSS transitions and keyframes
• CSS queries
• Web Animations API for JavaScript

3. Inaccessible Animations

4. Attention deficits

5. 35% of adults aged 40 years or older
in the United States—approximately
69 million Americans—have
experienced some form of vestibular
dysfunction.
Vestibular Disorders Association
www.vestibular.org

6. Seizures and
migraines

8. Why animate?

10. Animation has brain benefits!
Val Head
Source: Designing Interface Animation, 2016

11. Visual processing

12. Visual processing
Margaret Livingstone, The Biology of Seeing
Where System
What System

13. What System
• Colour
•Shapes
• Objects
•Faces
Margaret Livingstone, The Biology of Seeing

15. Where System
• Motion
•Edges
• Contrast
Source: Margaret Livingstone, The Biology of Seeing

16. By JJ Harrison (https://www.jjharrison.com.au/) - Own work, CC BY-SA
4.0

17. Animation itself is a visual
representation of change over time
Rachel Nabors
Source: Animation At Work, 2017

18. Two systems
Where System
What System

19. Differences

20. Feedback

21. Orientation

22. The best of both worlds

23. Give your users control over
animation with a toggle or setting

24. www.variablefonts.dev

25. Respect your user's OS or browser
settings for reduced motion

27. /* Type query */
@media screen and (min-width: 900px) {}
/* User preference query */
@media (prefers-reduced-motion: reduce) {}
Media queries

29. .modal-dialog {
transition: transform 1s ease-out;}
.modal-zoom .modal-dialog {
transform: scale(0.1);
}
@media (prefers-reduced-motion: reduce) {
.modal-zoom .modal-dialog {
transition: none;
}
}
Prefers reduced motion

31. Support
Source: www.caniuse.com

32. Don't flash too quickly

33. How quickly?
www.bigassmessage.com

34. How quickly?
www.bigassmessage.com

35. Flash speed
Web pages do not contain anything that flashes
more than three times in any one second period,
or the flash is below the general flash and red flash
thresholds.
WCAG SC 2.3.1

36. Flash speed
Web pages do not contain anything that flashes
more than three times in any one second period,
or the flash is below the general flash and red flash
thresholds.
WCAG SC 2.3.1

37. Hide things for everyone,
not just mouse users

41. function makeUnfocusable(where) {
// find all the focusable elements
const focusableThings = where.querySelectorAll(focusableElements)
}
Manage tabindexes

42. function makeUnfocusable(where) {
// find all the focusable elements
const focusableThings = where.querySelectorAll(focusableElements)
// turn them into an array
focusableThings = Array.prototype.slice.call(focusableThings)
}
Manage tabindexes

43. function makeUnfocusable(where) {
// find all the focusable elements
const focusableThings = where.querySelectorAll(focusableElements)
// turn them into an array
focusableThings = Array.prototype.slice.call(focusableThings)
// loop through the array to change their tabindex values
focusableThings.forEach(function(thing) {
thing.setAttribute('tabindex', '-1')
})
}
Manage tabindexes

44. // animate closed by adding a CSS class
sbSidebar.classList.add('closed-sidebar')
Adding display: none …

45. // animate closed by adding a CSS class
sbSidebar.classList.add('closed-sidebar')
// update button content, ARIA, etc
updateButtonState(sbToggler)
Adding display: none …

46. // animate closed by adding a CSS class
sbSidebar.classList.add('closed-sidebar')
// update button content, ARIA, etc
updateButtonState(sbToggler)
// add display: none via a CSS class
sbSidebar.classList.add('hidden-all')
.hidden-all { display: none; }
Adding display: none …

47. // animate closed by adding a CSS class
sbSidebar.classList.add('closed-sidebar')
// update button content, ARIA, etc
updateButtonState(sbToggler)
// add display: none via a function
sbSidebar.addEventListener('transitionend', hideMe(sbContent))
function hideMe(me) {
me.classList.add('hidden-all')
}
.hidden-all { display: none;}
Adding display: none …

48. // remove display: none ASAP
sbContent.classList.remove('hidden-all')
// animate open
sbSidebar.classList.toggle('closed-sidebar')
// update button
updateButtonState(sbToggler)
Removing display: none

49. Accessible Animations
• Give your users control with a toggle or setting
• Respect settings for reduced motion
• No more than 3 flashes per second
• Make sure hidden content is hidden from
everyone

50. Let’s chat
@Intopi
a
Intopia intopia.digital
hello@intopia.digita
l
Slides: http://bit.ly/mawa3
Twitter: @stringy