form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form.
<div role="form" id="contact-info" aria-label="Contact information"> <!-- form content --> </div>
This is a form that collects and saves a user's contact information.
Important: Use an HTML
<form> element to contain your form controls, rather than the ARIA
form role, unless you have a very good reason. The HTML
<form> element is sufficient to tell assistive technologies that there is a form.
form role is a landmark used to identify a form. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. A
form landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g.
<form>element will automatically communicate a section has a role of
formlandmark when it has an accessible name. Developers should always prefer using the correct semantic HTML element over using ARIA.
Use the HTML
<form> element if possible. The <form> element defines a
form landmark when it has an accessible name (e.g.
title). Make sure to have a unique label on each form in a document to help users understand the purpose of the form. This label should be visible to all users, not just assistive technology users. Use the
search landmark instead of the
form landmark when the form is used for search functionality.
role="form" to identify a region of the page; do not use it to identify every form field. Even if you are using the form landmark instead of <form>, you are encouraged to use native HTML form controls like
Associated WAI-ARIA Roles, States, and Properties
No role specific states or properties.
No role specific keyboard interactions
- The onSubmit event handler handles the event raised when the form is submitted. Anything that is not a
<div role="form" id="send-comment" aria-label="Add a comment"> <label for="username">Username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">Email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">Comment</label> <textarea id="comment" name="comment"></textarea> <input value="Comment" type="submit"> </div>
It is recommended to use <form> instead.
<form id="send-comment" aria-label="Add a comment"> .... </form>
Landmark roles are intended to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
Inputs are not forms
You do not need to declare
role="form" on every form element (inputs, text areas, selects, etc.). It should be declared on the HTML element that wraps the form elements. Ideally, use the
<form> element as the wrapping element and do not declare
If a form is used to search, you should use the more specialized
<form> element and form landmark
role needs to have a label. This label will allow an assitive technology user to be able to quickly understand the purpose of the form.
There are two ways to label a form. Use the
<legend> element as an immediate descendant of a
<form> element. If you are using a declaration of
role="form", use aria-label applied to whatever element
role="form" has been declared on. Ideally, use the
<legend> technique to label your forms.
<form id="address"> <legend>Update your address</legend> <!-- form content --> </form>
<div role="form" id="gift-cards" aria-label="Purchase a gift card"> <!-- form content --> </div>
Screen readers will announce the type of role the landmark is. Because of this, you do not need to describe what the landmark is in its label. For example, a declaration of
role="form" with an of
aria-label="Contact form" may be announced redundantly as, "contact form form".
<form> element will automatically communicate a section has a role of
form. If at all possible, prefer using it instead.
Certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA Form Role' in that specification.
|WAI-ARIA Authoring Practices
The definition of 'Role Form' in that specification.
Screen reader support
- <form>: The Form element
- <legend>: The Legend element
- form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- Using HTML sections and outlines
- Landmark roles: Using ARIA: Roles, States, and Properties
- Accessible Landmarks | scottohara.me
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group