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
<form novalidate> <label for="fname">First Name:</label> <input id="fname" required> </form>
Required Group of Radio Buttons
Apply a “title” attribute to the <input> field. If a form field has a title attribute but no <label>, screen readers will treat the title as a label.
This approach is generally less reliable as some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element.
The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.
<input id="search" type="text" title="Search"> <button>Search</button>
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>