Form Landmark
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. main or search).
ARIA 1.2 Specification: form landmark
Design Patterns
- Use the
searchlandmark instead of theformlandmark when the form is used for search functionality. - A
formlandmark should have a label to help users understand the purpose of the form. - A label for the
formlandmark should be identified usingaria-labelledbyto visible heading element (e.g. anh1-h6) orlegendelement. - If a page includes more than one
formlandmark, each should have a unique label. -
Whenever possible, controls contained in a
formlandmark in an HTML document should use native host semantics:buttoninputselecttextarea
- Use the
formlandmark to identify a region of the page; do not use it to identify every form field.
- Use a
formelement with a label to create aformlandmark. - Use an
aria-labelledbyreference to visible heading element (e.g. anh1-h6) orlegendelement for the label.
HTML Form Landmark Example
Assume the following two forms (e.g. add contact and add organization) can be independently submitted from the same web page.
Source Code
<form aria-labelledby="contact">
<fieldset>
<legend id="contact">Add Contact </legend>
... form controls add contact ...
</fieldset>
</form>
...............
<form aria-labelledby="organization">
<fieldset>
<legend id="organization">Add Organization </legend>
... form controls add organization ...
</fieldset>
</form>
<fieldset>
<legend id="contact">Add Contact </legend>
... form controls add contact ...
</fieldset>
</form>
...............
<form aria-labelledby="organization">
<fieldset>
<legend id="organization">Add Organization </legend>
... form controls add organization ...
</fieldset>
</form>