Overview
Required fields are commonly identified with an asterisk.
However, the asterisk character is typically not announced by screen readers.
Following are different techniques to use in order to notify screen reader users that form elements are required.
Required form input field
Required group of radio buttons
Required group of checkboxes
Required single checkbox
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
The “aria-label” attribute can also be used for screen reader users.
<input id="search" type="text" aria-label="Enter search criteria"> <button>Search</button>
Required Single Checkbox
The “aria-label” attribute can also be used for screen reader users.
<input id="search" type="text" aria-label="Enter search criteria"> <button>Search</button>