Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Making Accessible Web Animations

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Making Accessible Web Animations

  1. 1. Making Accessible Web Animations CSUN 2020 Julie Grundy Digital Accessibility Consultant @stringy 12 March 2020Slides: http://bit.ly/mawa3
  2. 2. New animation tools • CSS transitions and keyframes • CSS queries • Web Animations API for JavaScript
  3. 3. Inaccessible Animations
  4. 4. Attention deficits
  5. 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. 6. Seizures and migraines
  7. 7. Why animate?
  8. 8. Animation has brain benefits! Val Head Source: Designing Interface Animation, 2016
  9. 9. Visual processing
  10. 10. Visual processing Margaret Livingstone, The Biology of Seeing Where System What System
  11. 11. What System • Colour •Shapes • Objects •Faces Margaret Livingstone, The Biology of Seeing
  12. 12. Where System • Motion •Edges • Contrast Source: Margaret Livingstone, The Biology of Seeing
  13. 13. By JJ Harrison (https://www.jjharrison.com.au/) - Own work, CC BY-SA 4.0
  14. 14. Animation itself is a visual representation of change over time Rachel Nabors Source: Animation At Work, 2017
  15. 15. Two systems Where System What System
  16. 16. Differences
  17. 17. Feedback
  18. 18. Orientation
  19. 19. The best of both worlds
  20. 20. Give your users control over animation with a toggle or setting
  21. 21. www.variablefonts.dev
  22. 22. Respect your user's OS or browser settings for reduced motion
  23. 23. /* Type query */ @media screen and (min-width: 900px) {} /* User preference query */ @media (prefers-reduced-motion: reduce) {} Media queries
  24. 24. .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
  25. 25. Support Source: www.caniuse.com
  26. 26. Don't flash too quickly
  27. 27. How quickly? www.bigassmessage.com
  28. 28. How quickly? www.bigassmessage.com
  29. 29. 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
  30. 30. 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
  31. 31. Hide things for everyone, not just mouse users
  32. 32. function makeUnfocusable(where) { // find all the focusable elements const focusableThings = where.querySelectorAll(focusableElements) } Manage tabindexes
  33. 33. 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
  34. 34. 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
  35. 35. // animate closed by adding a CSS class sbSidebar.classList.add('closed-sidebar') Adding display: none …
  36. 36. // animate closed by adding a CSS class sbSidebar.classList.add('closed-sidebar') // update button content, ARIA, etc updateButtonState(sbToggler) Adding display: none …
  37. 37. // 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 …
  38. 38. // 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 …
  39. 39. // remove display: none ASAP sbContent.classList.remove('hidden-all') // animate open sbSidebar.classList.toggle('closed-sidebar') // update button updateButtonState(sbToggler) Removing display: none
  40. 40. 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
  41. 41. Let’s chat @Intopi a Intopia intopia.digital hello@intopia.digita l Slides: http://bit.ly/mawa3 Twitter: @stringy

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

Views

Total views

182

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×