How does role=form help accessibility?
I have read that the role
attribute was added to Bootstrap for accessibility, and I would like to know how <form role="form">
helps accessibility. See http://getbootstrap.com/css/#forms-example for an example of this specific usage.
I searched Bootstrap's repo for "role" to no avail.
My issue is that the information seems redundant. The notion that the element is a form is already expressed by the HTML tag itself (<form>
), so what does it help if we also add that the element is playing the role
of form
? It would make sense to add role="..."
if role
was going to be different than form
(I don't know what - but let's pretend); as it stands (especially without concrete reasoning / use case examples), it is puzzling at best.
If you add a role="form"
to a form, a screen reader sees it as a region on a webpage. That means that a user can easily jump to the form with his/her region quick navigation keys (for example, in JAWS 15 you use R for this). And also, your user will be able to easily find where the form starts and ends because screen readers mark start and end of regions.
I'd like to point out that the article @user664833 mentioned in a comment states that role="form"
shouldn't go on <form>
elements, but rather on a <div>
or some other element which does not semantically indicate that it contains form elements.
The <form>
element is probably already handled properly by modern screen readers.
Quote (link):
Recommend using [
role="form"
] on a semantically neutral element such as a<div>
not on a<form>
element, as the element already has default role semantics exposed.
In fact, the ARIA 1.1 W3C recommendation states clearly one should not change the host language semantics in section 1.4 (source):
"It is not appropriate to create objects with style and script when the host language provides a semantic element for that type of object. While WAI-ARIA can improve the accessibility of these objects, accessibility is best provided by allowing the user agent to handle the object natively."
So, writing <form role='form'>
is not only redundant but against the recommendation.
Semantically speaking, a form by default is, well, a form. However, not all accessibility applications(screen readers, etc) are designed the same and some can use elements (even the form element) with the role=form
attribute differently even if they understand that the parent form element will have the same semantic meaning with or without the role=form
attribute.