disabled vs aria-disabled on form elements
- Published at
- Updated at
- Reading time
- 1min
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:
- Use
readonlyon elements which's values still matter to the user and should be sent to the server. - Use
disabledon elements which's values became irrelevant for some reason. - Use
aria-disabledon elements which's interactivity is essential to succeed, because they'll stay focusable and can still trigger validations.
Great great guidelines!
Join 5.5k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.