Indicate if a form has a required field

Applicable Role(s): Developer

Overview

Knowing which fields are required to submit a form makes filling that form much easier to do, and less likely to return an error message that confuses the user.

Best Practices

  • Consider whether or not a input is required to successfully complete the form. The more inputs that are optional means less time a user has to spend on a form.
  • Include a required attribute on inputs that are required to be completed.
    • This should convey to most assistive technologies just fine, but if testing shows it doesn't, include aria-required="true" as a fallback.
  • Ensure the visible required indicator (text, asterisk, star, etc.) has enough contrast with the background color.

Pattern Examples

Asterisk with required attribute

* = required
<label for="fn-1">First Name *</label>
<input id="fn-1" type="text" required 
name="input-a" value="a">

Required text in label

<label for="fn-1">First Name (required)</label>
<input id="fn-1" type="text" 
name="input-a" value="a">

Required Text in input with aria-required

<label for="fn-1">First Name (required)</label>
<input id="fn-1" type="text" required 
aria-required="true" name="input-a" value="a">

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson