As part of my R&D on Accessible Rich Internet Applications ARIA I have found few attributes useful to notify various kinds of text fields. The ARIA attributes described below may be useful with other HTML elements as well. However I want to cut down my writing into simpler concepts. I will be discussing only on text fields in this post.
ARIA-required
In certain form fields we come across few mandatary fields. Usually developers use different color to indicate those fields. Often the mandatary fields are also marked with * (star). When either of them are used an instruction should be provided saying that “Fields marked with * are mandatary. Otherwise users of screen reading technology might not be aware of the same. In some cases screen readers will not announce the star mark if the punctuation settings of screen reader are off or changed to minimum. In such cases aria-required attribute announces that the field is “required†to the user.
Aria-required attribute has two values “true†and “falseâ€. Aria-required attribute should be switched to true to indicate the mandatary field while the false state is the default mode.
Syntax
<label for=â€nameâ€>Name</label>
<input type=â€text†aria-required=â€true†id=â€name†/>
Screen Reader Behavior
- JAWS announces as required on Internet explorer, Firefox and Google chrome.
- NVDA announces as required on Internet explorer, Firefox and Google chrome.
- Voiceover on IOS recognizes required field and announces to the user.
- Talkback picks the aria-required element perfectly on android
ARIA-Readonly
Though often we overlook the importance of non-editable text fields, in many forms we come across the non-editable text elements. These elements are also called as read only text fields.
For instance if you have a date field in a form and a calendar picker is provided to fill the same the text field will be read only. The text field will be filled depending on the date selection from the calendar picker. To provide an another example, When a calculation is to be performed on a page the result text field will be read only. The text field will be filled from the system up on performing some calculation and cannot be provided manually.
The aria-readonly element will announce the user of screen reader that it is a read only text field and cannot be edited manually. The aria-readonly state has two values True and false. When aria-readonly is set to true the text field will announce the same to the screen reader user whereas false is the default value.
Syntax
<label>Date of Birth</label>
<input type=â€text†aria-readonly=â€true†id=â€treadonly†/>
Screen Reader Behavior
- JAWS do not recognize aria-readonly in any of the three browsers.
- NVDA has support with Google Chrome but not with Firefox or Internet explorer.
- Voiceover on IOS could not pick the aria-readonly.
- Talkback on android identified aria-readonly perfectly.
ARIA-hidden
Not so often but sometimes we need the text fields hide from the screen and revoke when certain action is performed. In such instances screen readers might not handle the hide and seek game perfectly. Using aria-hidden element this can be handled more effectively.
ARIA-hidden also have two values True and False. When aria-hidden element is put in true state the text field is not announced to the screen reader user while the false state is the default one. The aria-hidden attribute can be used with many other html elements.
Syntax
<label for=”hide”>Name hidden</label>
<input type=â€text†aria-hidden=â€true†id=”hide”/>
Screen Reader behavior
- JAWS handles the hidden text field perfectly. However the label associated with hidden text field is read for the screen reader user.
- NVDA also has the similar behavior as JAWS do.
- Voiceover on IOS is also handling similar to JAWS. The text field is not rread but the label is announced.
- Talkback on Android is handling perfect. Both label and the text field are not announced.
ARIA-multiline
In many of the forms we encounter fields such as “Descriptionâ€, “Summary†etc. These kind of fields provide the option to the user to enter more content. To provide the user to enter multiple lines the HTML text area element is used. When textarea element is used screen reader user do not find any difference with a general text field. To bridge this gap aria-multiline element can be used.
Aria-multiline element can be used to inform the screen reader user that more than one line of text can be entered in the given text field. Aria-multiline has two values. “true†denotes that the text field is a multiline text field and false is a default option.
Syntax
<label>Description</label>
<textarea aria-multiline=â€trueâ€>
Screen Reader Behavior
- JAWS do not announce as multiline in any of the three browsers.
- NVDA announces the element as multiline in all the three browsers.
- Voiceover on IOS do not announce the aria-multiline element.
- Talkback on android supports and announces the text field as multiline text field.
Conclusion
Talkback picks all the different ARIA elements perfectly. Google Chrome has good support with all the elements with Talkback, NVDA and JAWS in their respective operating systems.