Skip to main content

Forms

The form role is used to identify a group of elements on a page that provide functionality for an HTML form.

Examples​

✅ Correct

<form id="news-letter" aria-label="subscribe to our newsletter">
  <!-- form content -->
</form>

❌ Incorrect

<div role="form" id="contact-info" aria-label="Contact information">
  <!-- form content -->
</div>

👍 Do's​

  • Use a <form> element to contain your form controls.
  • Provide a accessible name through attributes for forms with either:
    • aria-labelledby
    • aria-label
    • title
  • Use <form> elements sparingly
  • Use the role="search" if a form is used for search

👎 Don'ts​

  • Use the role="form" attribute unless you have a very good reason
  • Use the role="form" attribute for control elements, (filter options, client side setting, audio playback)