Overview
In some cases form controls don't need visible text labels.
For example, a text input adjacent to a Search button makes its purpose clear to sighted users.
An additional visual text label would be redundant.
Screen reader users typically navigate forms by using the “TAB” key on the keyboard. Then navigate from one form control to the next.
When the form control or label receives keyboard focus, the invisible label will still be announced by the screen reader.
In this scenario, one of the following three techniques could be used:
Only one of these techniques should be implemented.
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
Code Block |
---|
<label class="hiddenlabel" for="search">Search</label>
<input type="text" id="search">
<button>Search</button> |
CSS - Example 1
...
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.
...
Anchor | ||||
---|---|---|---|---|
|
...
Make the form element mandatory to complete by applying the “required” attribute to the input tag.
By default, when a form element has been marked as required and receive keyboard focus, the screen reader will announce the form element as “required invalid”.
The form element should be announced as invalid only after it has lost keyboard focus.
Add the “aria-invalid=”false” attribute to the default state to prevent screen readers from announcing the form element as invalid.
When the form input field has keyboard focus:
the screen reader should announce/notify the user that it is a required field
the screen reader should NOT announce that it is an invalid entry, the form element should be announced as invalid after it has lost keyboard focus
Markup
Code Block |
---|
<label for="fname">First Name*</label>
<input id="fname" required aria-invalid="false"> |
...
Anchor | ||||
---|---|---|---|---|
|
...
When the legend is announced by the screen reader:
it should notify the user that it is a required form element
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.
Code Block |
---|
<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> |
CSS
Code Block | ||
---|---|---|
| ||
.required {
display: none;
} |
...
Anchor | ||||
---|---|---|---|---|
|
...
Markup Example 2
Code Block |
---|
<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
...
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.
When the legend is announced by the screen reader:
it should notify the user that it is a required form element
Markup
Code Block |
---|
<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
Code Block | ||
---|---|---|
| ||
.required { 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.
...
Anchor | ||||
---|---|---|---|---|
|
...
You can make standalone/single checkboxes mandatory to complete by applying the “required” attribute to the input tag.
By default, when a form element has been marked as required and receive keyboard focus, the screen reader will announce the form element as “required invalid”.
The form element should be announced as invalid only after it has lost keyboard focus.
Add the “aria-invalid=”false” attribute to the default state to prevent screen readers from announcing the form element as invalid.
When the checkbox has keyboard focus:
the screen reader should announce/notify the user that it is a required field
the screen reader should NOT announce that it is an invalid entry, the form element should be announced as invalid after it has lost keyboard focus
Markup
Code Block |
---|
<input id="searchagreement" type="textcheckbox" required titlearia-invalid="Searchfalse"> <button>Search</button> |
Technique Three - ARIA Label and Markup
The “aria-label” attribute can also be used for screen reader users.
Code Block |
---|
<input id="search" type="text" aria-label="Enter search criteria"> <button>Search</button> <label for="agreement">All the information I have submitted in this application is true</label> |