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">
- Note: adding the required attribute to the input will trigger the browser's built-in validation features, and will prevent form submission if the field is empty. If you are using some other form of error prevention, you may want to suppress the browser's built-in validation by using the novalidate attribute.
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 <label>.