Using the ARIA 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="http://blogs.intuit.com/accessibility/" method="get"> 
  <label for="search">Search</label>
  <input type="search" id="search" name="s" 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="Log In">
  <label for="un">User Name *</label>
  <input type="text" id="un" name="un" required>
  
  <label for="pw">Password *</label>
  <input type="password" required id="pw" name="pw">
  
  <button type="submit">Log In</button>
</form>

Subscribe Form

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

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

View the Test Page

Support

The form landmark is not fully supported at this time. VoiceOver on Mac does not recognize the role. NVDA announces the landmark, but is not announcing the aria-label value. Adding this attribute will not cause any visual change and won’t cause any harm.

Suggested Use

Use role=”search” on your search forms. This is well supported and allows users to directly access the search function. Use role=”form” if your pages include multiple forms. While it may not be of much use now, the browser/screen readers will begin to add support in the future. It’s a small change that can be useful. I wouldn’t prioritize this for pre-existing code.