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
Markup
<form novalidate> <label for="fname">First Name:</label> <input id="fname" required> </form>
Required Group of Radio Buttons
Markup
Use the “aria-required” attribute in combination with the “radiogroup role” in the fieldset tag.
<fieldset aria-required="true" role="radiogroup"> <legend>Select your shipping option:</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
When it comes to making a group of checkboxes required you cannot use the same technique that’s used to make a group of radio buttons required.
The required attributes on the fieldset will not work and there is no equivalent checkboxgroup role.
Basically, what you can do here is to 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.
Markup
<form> <input id="agreement" type="checkbox" required aria-invalid="false"> <label for="agreement">All the information I have submitted in this application is true</label> </form>