Vibes

Reduced motion in life anyone?

If, like me, you have some fancy scroll animations on your site, this tip is for you. Such animations can cause discomfort for people with vestibular motion disorders. Animations like scaling or panning large objects can be vestibular motion triggers, which is why users can turn them off in the browser. But we need to listen for that preference in our code as well, which is easy to do with media queries.

@media (prefers-reduced-motion: no-preference) {
  /* Turn on the animation */
}

@media (prefers-reduced-motion: reduce) {
  /* Turn off the animation */
}

For a few years now, operating systems have allowed users to opt out of animations, typically within Accessibility settings. ‘no-preference’ is the default value, while ‘reduce’ indicates that the user has enabled reduced motion on their device.

Be kind to users and make the web more inclusive for everyone!

Disabled all over or just a bit?

When we disable buttons or other interactive elements, we usually rely on the disabled attribute in HTML, styling the element accordingly. But if we’re aiming for accessibility and inclusivity, there’s an issue, the disabled attribute makes the element non-focusable. That means users can’t reach it with the keyboard or assistive technologies. If it’s unreachable, how will they know it’s disabled?

A better, more inclusive approach is to use aria-disabled instead, which allows the element to stay focusable while still conveying its disabled state to assistive technologies.

Before:

button:disabled {
  color: grey;
}

Now:

button[aria-disabled="true"] {
  color: grey;
}

With aria-disabled, the element remains focusable and is properly announced as disabled (or dimmed) by assistive technologies. Meanwhile, visually, it still looks disabled, just like before. Better for everyone!

Do you know the stylish ARIA?

When working to make the web more accessible and inclusive, we often add ARIA attributes to our components. But did you know that you can easily use those same attributes when styling your components?

nav button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

button[aria-disabled="true"] {
  color: grey;
}

With this approach, we don’t need extra CSS classes to handle states like ‘expanded’ or ‘disabled’. The examples above show how useful it can be, and there are plenty more possibilities. Once you start experimenting, you’ll find even more ways to take advantage of it, so give it a go!

Making stylish lists accessible

You know those HTML lists with the plain look and that little dot as a default bullet point? Sure, they’re not that bad, but we often use this CSS snippet to get a clean slate when we want to style our lists.

ul {
  list-style: none;
}

But did you know that by doing this, you also remove the semantic meaning of the list in older versions of Safari? The list will no longer be detected as a list in the accessibility tree. But don’t worry, we have a solution, role to the rescue!

<ul role="list">
  <li></li>
  <li></li>
</ul>

With the help of ‘role’ we can style our lists however we want without losing support for assistive technologies. Simple!