69

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.

user664833
  • 18,397
  • 19
  • 91
  • 140
  • 1
    11 months on, the version of Bootstrap just released (v3.3.2) has removed a lot of the instances of `role="form"`. Here's the pull request: https://github.com/twbs/bootstrap/pull/15125 – Phil Gyford Jan 20 '15 at 15:33
  • There are a bunch of frameworks, authoring tools and libraries which, in the rush for a11y support simply added ARIA attributes, without checking whether those attributes were actually necessary. Now they're scrambling to remove them again after the a11y audits have started rolling in. I suppose we are getting somewhere. – brennanyoung Aug 10 '18 at 09:27

4 Answers4

84

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.

Andre Polykanine
  • 3,291
  • 18
  • 28
  • 5
    Why would such a program (JAWS 15) not jump to the `
    ` tag with *`R`* - why does it only jump to the `form` **role**?
     – user664833 Feb 21 '14 at 02:27
  • 7
    Because the *R* key is designed to move through ARIA regions (such as articles, navigational elements, content info etc.). That's why you only have a region if you mark it up with a `role` attribute. Then your screen reader would say: "Page contains X headings, Y links, and Z regions". – Andre Polykanine Feb 21 '14 at 16:11
  • 5
    Thanks for mentioning ARIA (Accessible Rich Internet Applications). [This page and embedded video](http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/) helped me gain an appreciation for [the `role` attribute](http://www.w3.org/TR/role-attribute/). Now I understand that `role` defines *ARIA landmark regions*. JAWS users use specific keys to move from one landmark to the next, and when a landmark is reached JAWS announces the purpose of the landmark (e.g. "banner landmark", "search landmark", "navigation landmark", "main landmark") thereby assisting visually impaired users. – user664833 Feb 21 '14 at 19:17
  • Here is [a list of WAI-ARIA roles](http://www.w3.org/TR/wai-aria/roles#landmark_roles). Though I had to read [this page](http://accessibility.oit.ncsu.edu/training/aria/landmarks-xhtml.html#pageFooter) to discover that the ARIA role `contentinfo` marks "footers". I guess the info on best practices is still sparse. – user664833 Feb 21 '14 at 20:05
  • By the way, I am still thinking about `role="form"` - it seems it should not be used for all forms - for instance, I have a button labeled "Publish" that sends a `POST` request (really a `PATCH`) to the server... obviously the button (``) is in the form. The only purpose of the form is this button. In this case, it seems `
    ` should *not* be marked with `role="form"`, and rather the button should be marked with [`role="button"`](http://www.w3.org/TR/wai-aria/roles#button). Do you concur?
     – user664833 Feb 21 '14 at 20:11
  • Yes, you're right about the button. However, consider this change: JAWS is announcing them as regions now, not as landmarks. I don't actually know why this has been changed, but still :). – Andre Polykanine Feb 21 '14 at 21:49
  • 1
    Thanks for your reply. I have now discovered that [JAWS is a proprietary screen reader](https://en.wikipedia.org/wiki/JAWS_(screen_reader)) developed by [Freedom Scientific](http://www.freedomscientific.com/) for *Microsoft Windows*; so although Freedom Scientific / JAWS may drop references to "landmark", I think we should take cue from W3C (the web standards community), which continues to define **landmark** as [a type of region on a page to which the user may want quick access](http://www.w3.org/TR/wai-aria/terms#def_landmark). – user664833 Feb 21 '14 at 22:10
  • This [UML class diagram of the WAI-ARIA taxonomy](http://www.w3.org/TR/wai-aria/rdf_model) is helpful (just click *SVG diagram* or *PNG diagram*) - it shows the relationship between different elements (such as "landmark" and "region" for example). By the way, I just found out that *WAI* stands for *Web Accessibility Initiative* - see http://www.w3.org/WAI/ – user664833 Feb 21 '14 at 22:40
  • 1
    The diagram is not accessible to screen readers, so I can't appreciate it, but I trust you in this :) – Andre Polykanine Feb 22 '14 at 09:59
  • Sorry to resurrect but... why, especially considering the accessibility aspects of role="form" does it NOT validate W3C? I always get "Bad value form for attribute role on element form". – ben.kaminski Jun 17 '15 at 22:30
  • Please, correct this answer this is NOT valid information! – mas-designs Aug 27 '18 at 07:29
  • What is not valid exactly? – Andre Polykanine Aug 27 '18 at 12:42
11

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.

Community
  • 1
  • 1
Nelu
  • 16,644
  • 10
  • 80
  • 88
  • Agree - I've had troubles with having a
    on the page. JAWS keeps wanting to read out the form from the start when you tab to an element.
     – Desmond Nov 08 '16 at 11:51
6

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.

Nielsim
  • 3
  • 3
Jaccoud
  • 99
  • 1
  • 4
3

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.

salmanxk
  • 315
  • 5
  • 19
  • 4
    This seems quite abstract. Can you point to any concrete examples, so I can appreciate this distinction? – user664833 Feb 21 '14 at 02:29
  • 3
    I think that @salmanxk means that there maybe several forms on the page, but only one form is the real form. Example: on the contact us page there is usually a form to fill in: this form will have role="form". However there may also be a search form in the navigation bar and/or a join-our-mail-list form on every page. The nav form might have role="search" and the mail list might have role="join". Each form has a different role to play and the role tag helps denote what that role is. – David Newcomb Feb 26 '15 at 14:56