More than meets the eye

4 tips for accessible animation

🐦 @ashkyd

fast GIFs can give me an epileptic fit

I love what you do, but

Texas grand jury charged a man with

aggravated assault
with a deadly weapon

after tweeting a flashing GIF designed to trigger epilepsy

I'm new here 👋

Tell me your customs

2.3.1 - Three Flashes or
Below Threshold

G19: Ensuring that no component of the content flashes
          more than three times in any 1-second period

G176: Keeping the flashing area small enough

G15: Using a tool to ensure that content does not violate the
          general flash threshold or red flash threshold

SC 2.2 (paraphrased)

“ there is a mechanism for the user

   to pause, stop, or hide it unless [it]

   is part of an activity where it is

   essential”

Guideline 2.3

“ Do not design content in a way that

   is known to cause seizures.”

🍺

🗺

🚌

🤢

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
const prefersReducedMotion = 
  window.matchMedia("(prefers-reduced-motion: reduce)")
    .matches;

😮

😕

Network information API

type

cellular, ethernet, wifi

effective type
slow 2g, 2g, 3g, 4g

 

// bluetooth, cellular, ethernet, mixed, none, other,
// unknown, wifi, wimax
navigator.connection.type

// slow-2g, 2g, 3g, or 4g
navigator.connection.effectiveType

4 tips for accessible animation

  • Be aware of seizure triggers
  • Let the user pause
  • Consider the reduced motion preference
  • Optimize for the network state

🐦 @ashkyd

🎉

🏳️‍🌈

🐦 @ashkyd

🐦 @ashkyd

4 tips for accessible animation - NLHTML5 edition

By Ash Kyd

Made with Slides.com

4 tips for accessible animation - NLHTML5 edition

More than meets the eye: there's a number of interesting things to consider when looking at motion accessibility.

  • 89

More from Ash Kyd