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.
How does role=form help accessibility?
-
14-10-2022 - |
题
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.
解决方案
其他提示
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.
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.