Today I Learned - Rocky Kev

TIL reduce-motion-blur

POSTED ON:

TAGS: accessibility css

What is vestibular balance disorder? Dizziness and vertigo are symptoms of a vestibular balance disorder. Balance disorders can strike at any age, but are most common as you get older. Your ear is a complex system of bone and cartilage.

via What is vestibular balance disorder?

If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that.

As web developers, we can also support them.

.animation {
  animation: pulse 1s linear infinite both;
}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 2s linear infinite both;
  }
}

via the MDN - prefers-reduced-motion

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.