ARIA Landmark Region Patterns
Based on the W3C ARIA Authoring Practices for Landmark Regions

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 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 h2-h6) or legend 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
  • Use the form landmark to identify a region of the page; do not use it to identify every form field.
The form element is a form landmark when it has a label.
The recommended labeling technique is to use an aria-labelledby reference to a visible heading (e.g. an h2-h6) or legend element.

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.

Add Contact
Add Organization

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 with label to define a form landmark.
The recommended labeling technique is to use an aria-labelledby reference to a visible heading (e.g. an h2-h6) or legend element.

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.
The recommended labeling technique is to use an aria-labelledby reference to a visible heading (e.g. an h2-h6) or legend element.
Add Contact
Add Organization

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>