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!
