Required fields should be identifiable in two ways. Sighted users need a clear visual indication that a field is required, while screen reader users need a programmatic indication that assistive technologies can detect.
The examples below explore each of these requirements separately.
In this section, focus on whether sighted users can visually identify which fields are required.
This example has no visual identification.
Not recommended. Sighted users have no visual indication that the field is required.
<label for="q1">What is your family name?</label>
<input id="q1" required>This example has visual identification via (*) symbol.
Acceptable. Sighted users can identify the field as required. However, some users may not notice or understand the asterisk.
<label for="q2">What is the name of your first pet? *</label>
<input id="q2" required>This example has visual identification via (Required).
Recommended. Sighted users can clearly identify that the field is required.
<label for="q3">What is your favourite colour?
(Required)</label>
<input id="q3" required>In this section, focus on whether screen reader users can programmatically determine which fields are required.
This example has no programmatic identification.
Not recommended. Screen reader users receive no programmatic indication that it is required.
<label for="q4">What is your favourite song?</label>
<input id="q4">This example has programmatic identification via aria-required="true".
Acceptable. Screen reader users can determine that the field is required.
<label for="q5">What is your favourite movie?</label>
<input id="q5" aria-required="true">This example has programmatic identification via required.
Acceptable. Screen reader users can determine that the field is required.
<label for="q6">What is your favourite soft drink?</label>
<input id="q6" required>This example has programmatic identification via required and aria-required="true".
Not recommended. Screen reader users can determine that the field is required. However, using both required and aria-required="true" is redundant.
<label for="q7">What is your favourite video game? </label>
<input id="q7" required aria-required="true">This example has a field that is not required and uses aria-required="false".
Not recommended. Form fields are optional by default, so adding aria-required="false" provides no benefit.
<label for="q8">What is your favourite season?</label>
<input id="q8" aria-required="false">