Form

A form is a section containing interactive controls that collect input from the user. It should be used whenever users submit data, such as registering an account, signing in, or completing a checkout. A form is often comprised of various input fields that may be divided into input groups.

Accessibility Features

  • A native <form> element enables built-in browser validation: required fields prevent submission, receive focus on error and display error hints automatically. It also improves browser autofill accuracy. Without a <form> element, these features are not available and must be implemented manually.
  • Required input fields must be indicated clearly with text. If a symbol like an asterisk (*) is used, it must be explained at the top of the form. The fields must also be programmatically marked required to indicate them to the browser.
  • autocomplete helps users fill in common fields such as name, email and address.
  • Correct input types should be used (<input type="email">, <input type="tel">, etc.) so that the browser can provide the most accurate feedback possible about the expected input format.
  • Even though using the <form> element is usually enough to fulfill the standard accessibility requirements, using it alone has disadvantages. For example, if several errors are present, only the first one is exposed. The user has to correct the error and resubmit the form for the next error to be identified.
    → Due to this, other accessibility features should be used in conjunction, such as field specific custom error messages. The messages must clearly indicate the nature of the error and provide guidance on how to correct it.
  • aria-label or aria-labelledby provides an accessible name for a <form>, which exposes it as a landmark to screen readers.

Example

Leave the form fields empty and click the submit button to see the error messages.

Code Snippet