Skip to main content
WCAGrules
Quick navigation

Mark required fields in the label itself

A required field has to say so where everybody can perceive it, and H90 puts that in the label, or in the legend for a group of controls. Email address (required) is the whole technique. W3C lists it as sufficient for 3.3.2 Labels or Instructions when it is used with G131, the descriptive-labels technique, so the pair passes rather than the marker on its own. Two boundaries are worth knowing before you build it. The required attribute and aria-required are good practice, and they are not H90. This technique is about the words in the label, and the code half belongs to other techniques, ARIA2 among them. If you use a symbol rather than a word, its meaning has to be given before the first control that uses it. That rules out a key at the foot of the form, and it rules out explaining it afterwards. W3C also advises against shortening the word to req., on the anecdotal evidence that the short form confuses people, and the whole word costs nothing.

How we find it in an audit

We submit every audited form empty and map which fields complain, then hold that map against what the labels promised. Fields that turn out to be required without ever having said so are the finding. So is the asterisk whose key sits below the form, where a screen reader user meets it several minutes after the field it was meant to explain. Both need a person, because a scanner can see the attribute and cannot see whether the page ever explained the star.

How affected users experience it

With the requirement in the label, the field announces it on arrival. Email address, required, edit text. Without it, requirements get discovered by failing, one rejected submission at a time. Each rejection means finding the error summary, working out which field it means, and going back for it. A sighted visitor learns the same thing from a red star in a tenth of a second. That gap is the whole of this technique.

Passes vs. fails

Passes: a label that stays put. Fails: placeholder-only fields.

Passes

<p>Fields marked * are required.</p>
<form>
  <label for="email">Email *</label>
  <input id="email" name="email" required>
</form>

Fails

<label for="email">Email *</label>
<input id="email" name="email" required>
<p>* indicates a required field</p>

Other ways to satisfy this rule

17 guides on this site are filed under 3.3.2 Labels or Instructions. W3C lists this one as sufficient for that rule only alongside G131, so the pair is what passes and neither half does on its own.

This guide is our interpretation of W3C technique H90: Indicating required form controls using label or legend. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations