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.
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.
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>
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="firstname.lastname@example.org"> <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>
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.
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.