Using the form landmark

ARIA landmarks allow developers to associate structural significance to web page elements. Common landmarks define navigation, header, the main content, and the page's footer. It's also possible to define more specific subelements, such as a search form. This page will test the use of role="form" to define multiple forms on a single page. While this may seem uncommon, it could be seen on a page that has a search, sign up, and login form.

Markup

The role attribute is placed on the form tag. In general, you do not want to put a landmark above a similar semantic object, so <form role="form">, <nav role="navigation">. Add aria-label to let the user know what the form will include. This is especially helpful when navigating by landmarks.

Search Form

This form will use role="search"


<form role="search" action="#" method="get">
  <label for="search">Search</label>
  <input type="search" id="search" name="search" placeholder="ARIA tips">
  <button type="submit">Go</button>
</form>

Log In Form

This form will use role="form" and aria-label="Log In"


<form action="#" role="form" aria-label="Subscribe">
  <label for="email">Email *</label>
  <input type="text" id="email" name="email" required placeholder="sample@example.com">
  
  <input type="radio" required id="agree" name="agree" value="true">
  <label for="agree"> I agree that I want to subscribe to the mailing list</label>
  <button type="submit">Subscribe</button>
</form>

Subscribe Form

This form will use role="form" and aria-label="Subscribe"

Support

The form landmark is not supported, at this time, by VoiceOver on Mac. NVDA announces the landmark, but is not announcing the aria-label value.


<form action="#" role="form" aria-label="Log In">
  <label for="uname">User Name *</label>
  <input type="text" id="uname" name="uname" required>
  
  <label for="pword">Password *</label>
  <input type="password" required id="pword" name="pword">
  
  <button type="submit">Log In</button>
</form>