문제

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.

도움이 되었습니까?

해결책

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.

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top