How does role=form help accessibility?

HtmlFormsTwitter Bootstrap-3AccessibilityRole

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser664833View Question on Stackoverflow
Solution 1 - HtmlAndre PolykanineView Answer on Stackoverflow
Solution 2 - HtmlNeluView Answer on Stackoverflow
Solution 3 - HtmlJaccoudView Answer on Stackoverflow
Solution 4 - HtmlsalmanxkView Answer on Stackoverflow