WAI-ARIA: Role=Form
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.
Description
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search.
A form may be a mix of host language form controls, scripted controls, and hyperlinks. Authors are reminded to use native host language semantics to create form controls, whenever possible. For search facilities, authors SHOULD use the search role and not the generic form role. Authors SHOULD provide a visible label for the form referenced with aria-labelledby. If an author uses a script to submit a form based on a user action that would otherwise not trigger an onsubmit event (for example, a form submission triggered by the user changing a form element’s value), the author SHOULD provide the user with advance notification of the behavior.
User agents SHOULD treat elements with the role of form as navigational landmarks.
Role=Form Example
HTML Example
<div role="form" aria-labelledby="contact">
<fieldset>
<legend id="contact">Add Contact </legend>
... form controls add contact ...
</fieldset>
</div> <div role="form" aria-labelledby="organization">
<fieldset>
<legend id="organization">Add Organization </legend>
... form controls add organization ...
</fieldset>
</div>Characteristics
Superclass Role
- landmark
Base Concept
- HTML form
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML <form> tag.
<form action=”/action_page.php” method=”get”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
</form>
Recommend using on a semantically neutral element such as a div not on a form element, as the element already has default role semantics exposed.
Reference
- W3C (opens new window)
