Clearly Identify Required Form Fields
Ensuring that required fields are clearly identified can help users avoid errors when completing a form and neglect information they need to provide within a form. Requirements for identifying required fields include making sure the "required" indicator is visible to sighted users and available to assistive technology users. Here are a couple of different ways to mark up fields as required fields to prevent form errors.
Methods for Required Field Markup
- Put the word "required" in the
<label>. Sighted users see the word and screen reader users can hear the word when the label is read to them.
<label for="firstname">First Name (required)</label> <input id="firstname" name="firstname" type="text">
- Put instructions above the form, use an asterisk in the
<label>, and use the
aria-required="true"attribute. When the
aria-required="true"attribute is used in the code, a screen reader will say "required" when focus is placed in the field, and sighted users can see the asterisk in the label (though instructions need to be clear that fields with asterisks are required).
<p id="formInstructions">Fields marked with an asterisk (*) are required.</p>
<label for="firstname">First Name*</label> <input id="firstname" name="firstname" type="text" required aria-required="true">
Note: Older screen readers that do not support ARIA may not say "required" if the word is not published in the