Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 388
user664833 Avatar asked Feb 20 '14 23:02

user664833


People also ask

What is the role attribute used for?

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. Screen Readers will read this element as “button” instead of “link”.

What is the role of form in HTML?

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

When would you use role button?

The button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality.

What is accessibility & aria role means in a web application?

Accessible Rich Internet Applications ( ARIA ) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.


2 Answers

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.

like image 73
Andre Polykanine Avatar answered Sep 24 '22 22:09

Andre Polykanine


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.

like image 27
Nelu Avatar answered Sep 25 '22 22:09

Nelu