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
<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.
- ARIA1sufficientAttach help text to inputs with aria-describedby
- ARIA9sufficientAssemble one label from several text pieces
- ARIA17sufficientGroup related form fields with ARIA roles
- G83sufficientTell users which required fields they missed
- G89sufficientShow the expected format with an example
- G131sufficientWrite labels that describe their fields
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.