Required Fields

Input Required

Marking inputs as required in HTML should be both programmatically determinable and clearly communicated to all users. There are two different aspects to this, making the input both programmatically required and visibly required.

Programmatic

HTML has a required attribute that should be used for all required input elements.

<input id="email" name="email" type="email" required>

There is also an aria-required attribute which can be used when non-standard html elements are used to create form inputs:

<div role="combobox" aria-required="true" aria-labelledby="country-label" aria-expanded="false">
</div>

Visible

In addition to the programmatic indication, required needs to be a indicated visibly. The simplest way is to add this information to the label:

<label for="email">Email (required)</label>

Often designers will use an * characters, but that is not sufficient by itself. An instruction needs to be added that indicates what the mark means.

<p>Fields with asterisks (*) are required.</p>
<label for="email">Email*</label>

Additionally, you can also use aria-describedby on the input to point to the required description.

Combined

A complete required input then would look something like this:

<p id="req-hint">Fields marked with * are required.</p>
<label for="name">Name*</label>
<input id="name" name="name" required aria-describedby="req-hint">