W3C Logo

ARIA Landmarks Example

Visually outline the landmarks and/or headings on the page using the following buttons.

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

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

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