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.1 Specification: form landmark

Design Patterns

Use the search landmark instead of the form landmark when the form is used for search functionality.
A form landmark should have a label to help users understand the purpose of the form.
A label for the form landmark should be identified using aria-labelledby to visible heading element (e.g. an h1-h6 element).
If a page includes more than one form landmark, each should have a unique label.
Whenever possible, controls contained in a form landmark in an HTML document should use native host semantics:
- button
- input
- select
- textarea

HTML Techniques
ARIA Techniques

If a form element has an accessible name it is considered form landmark.

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>

The role="form" attribute defines a form landmark.
Use the role="form" to identify a region of the page; do not use it to identify every form field.

ARIA Form Landmark Example

Assume the following two forms (e.g. add contact and add organization) can be independently submitted from the same web page.

Add Contact Name E-mail Phone

Add Organization Organization WWW

Source Code

  <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>