Overview
Required fields are commonly identified with an asterisk.
However, the asterisk character is typically not announced by screen readers.
Following are techniques to use in order to notify screen reader users that form elements are required to complete.
Required Form Input Field
When the form input field has keyboard focus:
the screen reader should announce/notify the user that it is a required field
Markup
<label for="fname">First Name:</label> <input id="fname" required>
Required Group of Radio Buttons
Markup
Add an invisible required label, within the legend tag. that will be announced by the screen reader.
A sighted user will not see this text.
<fieldset> <legend>Select your shipping option:<span class="required">required</span></legend> <input id="overnight" type="radio" name="shipping" value="overnight"> <label for="overnight">Overnight</label><br> <input id="twoday" type="radio" name="shipping" value="twoday"> <label for="twoday">Two day</label><br> <input id="ground" type="radio" name="shipping" value="ground"> <label for="ground">Ground</label> </fieldset>
Required Group of Checkboxes
Add an invisible required label, within the legend tag. that will be announced by the screen reader.
A sighted user will not see this text.
Markup
<fieldset> <legend>I enjoy the following activities:<span class="required">required</span></legend> <input id="hiking" type="checkbox" name="toppings" value="hiking"> <label for="hiking">Hiking</label><br> <input id="biking" type="checkbox" name="toppings" value="biking"> <label for="biking">Biking</label><br> <input id="running" type="checkbox" name="toppings" value="running"> <label for="running">Running</label><br> <input id="dancing" type="checkbox" name="toppings" value="dancing"> <label for="dancing">Dancing</label> </fieldset>
CSS
.required {
display: none;
}
Required Single Checkbox
You can make standalone/single checkboxes mandatory to complete by applying the “required” attribute to the input tag.
When the checkbox has keyboard focus:
the screen reader should announce/notify the user that it is a required field
Markup
<input id="agreement" type="checkbox" required aria-invalid="false"> <label for="agreement">All the information I have submitted in this application is true</label>