GIF by kirokaze - https://kirokazepixel.tumblr.com/
An accessible GIF player
& the things you don't consider
when designing an app
🐦 @ashkyd
fast GIFs can give me an epileptic fit
I love what you do, but
Guideline 2.3
“ Do not design content in a way that
is known to cause seizures.”
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”
Features
- Play/pause
- Disable autoplay
Alt Text
aria-describedby & aria-labelledby
Features
- Play/pause
- Disable autoplay
- Alt text
Features
- Play/pause
- Disable autoplay
- Alt text
- Respect prefers-reduced-motion setting
Network information API
type
cellular, ethernet, wifi
effective type
slow 2g, 2g, 3g, 4g
Features
- Play/pause
- Disable autoplay
- Alt text
- Respect prefers-reduced-motion setting
- Respect user's connection status
the tab
order is
wrong
WAI-ARIA
(a whole talk on its own)
WAI-ARIA Roles
Keep the focus
- open
- focus the dialog
- close
- return the focus
(on keyboard interaction at least)
Features
- Play/pause
- Disable autoplay
- Alt text
- Respect prefers-reduced-motion setting
- Respect user's connection status
- keyboard & AT accessible dialog
Demo time
Key points
- Be aware of seizure triggers
- Let the user pause
- Consider the reduced motion setting
- Optimize for the network
- Consider assistive technology
An accessible GIF player
& the things you don't consider
when designing an app
🐦 @ashkyd