When to use the disabled attribute vs the aria-disabled attribute for HTML elements?
I'm trying to make a form accessible. Should I make my inputs have both disabled
and aria-disabled
attributes, or just one?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
Or like this?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true">
Or like this?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>
I can take your example, put it in a CodePen, and check it in JAWS and NVDA (sorry, no VoiceOver today):
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>
You will be happy to know that both NVDA and JAWS skip the field (or if explicitly focused, announce that is disabled).
In short, you do not need aria-disabled
any longer. Just use disabled
.
You can read a bit more about the ARIA attributes you can dump in this article by Steve Faulkner (one of the editors of the ARIA spec) from 2015 (though aria-disabled
is not explicitly listed, the concept is the same): http://html5doctor.com/on-html-belts-and-aria-braces/
If my answer looks similar to your other question about required
versus aria-required
, that is because it is essentially the same answer.
An important distinction is that when using voice-over the item with just the 'disabled' property will not be tabbed to. However the item with aria-disabled="true" will still be able to receive focus and report to the screen reader as dimmed.
In short, you do not need aria-disabled any longer. Just use disabled.
To complete @aardrian answer.
When you use an HTML control which supports natively the disabled
attribute, you do not need the aria-disabled
attribute.
If you use a custom control then you can use the aria-disabled
attribute. For instance, in the following code, the "Pause" button will be disabled until the "Play" button is pressed (our javascript will then change tabindex
and aria-disabled
attributes).
<img src="controls/play.png"
id="audio-start"
alt="Start"
role="button"
aria-disabled="false"
tabindex="0" />
<img src="controls/pause.png"
id="audio-pause"
alt="Pause"
role="button"
aria-disabled="true"
tabindex="-1" />
Note that according to W3C:
Disabled elements might not receive focus from the tab order. [...] In addition to setting the aria-disabled attribute, authors SHOULD change the appearance (grayed out, etc.) to indicate that the item has been disabled.