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.
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”.
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With