I'm trying to make a form accessible. Should I make my inputs have both required
and aria-required
attributes, or just one?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>
Or like this?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true">
Or like this?
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true" required>
The article Accessible HTML5 Forms – Required Inputs claims it is best to implement both.
When John Foliot wrote that article in 2012 it was very much true. You needed both.
Today that is no longer the case. 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" required>
You will be happy to know that both NVDA and JAWS announce the field as required.
In short, you do not need aria-required
any longer. Just use required
.
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: http://html5doctor.com/on-html-belts-and-aria-braces/