Published at
Updated at
Reading time

I'll definitely reference the following blog post in the future. Kitty Giraudel describes when to use disabled and aria-disabled.

Ready? Because here comes some solid HTML attribute advice.

The disabled attribute is totally fine and should be used when relevant! What’s important is not to use it when the element’s interactivity is necessary to proceed, or when the lack of discoverability is problematic. In these cases, the aria-disabled attribute is better to still convey the same semantics, without impairing on usability.

Generally, Kitty shares the following guidelines on when to use which attribute:

  1. Use readonly on elements which's values still matter to the user and should be sent to the server.
  2. Use disabled on elements which's values became irrelevant for some reason.
  3. Use aria-disabled on elements which's interactivity is essential to succeed, because they'll stay focusable and can still trigger validations.

Great great guidelines!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 10 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles