Effects & accessibility
Effects can affect
- Animations can be a distraction
- Flashing images can cause seizures
- A contrast levels work differently for everybody
- Some of you are using dark-mode, some light-mode
We each have preferences—let’s help our users get the content the most efficient way for them.
Animated GIFs
Never use an animated GIF—ever.
- They cannot be stopped
- If there’s too much flashing it could induce seizures
- They could distract users from their task
- They are huge files & terrible for performance
Instead, use a MP4: stoppable, pausable, streamable.
Autoplay
Don’t autoplay anything on your website.
- It’s distracting
- It’s bandwidth hogging
- It’s poor accessibility
Thankfully most browsers have features to prevent autoplay now—which I have enabled.
Prefers colour scheme
Some of you prefer the dark colour scheme—some prefer the light colour scheme.
Accomodate that in your CSS.
CSS
main {
background-color: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
main {
background-color: #111;
}
}
Prefers reduced motion
Animations are distracting & annoying to lots of people’s concentration—or cause more serious problems.
Accomodate that in your CSS.
CSS
.ball {
animation: spin 1s infinite;
}
@media (prefers-reduced-motion) {
.ball {
animation: none;
}
}
Other preferences
Upcoming media features worth knowing:
prefers-contrast— Determine if a high-contrast interface is requestedprefers-reduced-transparency— Determine if a reduced use of transparency is requested