Vibes

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!