A field marked required must say so programmatically

Rule field-required-state · Forms · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An asterisk in the label tells sighted users the field is mandatory. A screen reader announces the field name and nothing else, so the user only discovers the requirement when the form rejects them after submission — by which point the error may be far from the field.

How to fix#

Add the required attribute (or aria-required="true" for a custom control) to every field the label marks as mandatory, so it is announced as "required" when focused. Keep the visual marker as well.

Example#

<label for="e">Email *</label><input id="e" type="email">

<label for="e">Email *</label><input id="e" type="email" required>

Example#

<label for="n">Name (required)</label><input id="n">

<label for="n">Name (required)</label><input id="n" aria-required="true">

WCAG success criteria#

3.3.2 Labels or Instructions — Level A#

Inputs need labels or instructions so users know what to enter.

Understanding 3.3.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Labels or Instructions