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
Technique One - Hidden Label and Markup
Hide the <label> element for sighted users by using CSS. The label will not appear visually, but screen readers will still announce it.
Markup Example 1
<label class="hiddenlabel" for="search">Search</label> <input type="text" id="search"> <button>Search</button>
CSS - Example 1
.hiddenlabel {
display: none;
}
Markup Example 2
<form id="sfgov-search-form" class="sfgov-search-form"> <label for="edit-search-input">Search</label> <input type="text" id="edit-search-input"> <button>Search</button> </form>
CSS - Example 2
.sfgov-search-form label[for=edit-search-input] {
display: none;
}
Technique Two - Title Attribute and Markup
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>
Technique Three - ARIA Label and Markup
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>