When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

Question

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> 

Answer 1

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.

Answer 2

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.