Page Comparison

...

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 to complete.

• 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

...

...

Anchor
requiredforminputfield requiredforminputfield

Required Form Input Field

...

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

<label for="fname">First Name*</label>
<input id="fname" required aria-invalid="false">

View HTML Markup on Github

...

Anchor
requiredgroupofradiobuttons requiredgroupofradiobuttons

Required Group of Radio Buttons

...

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.

<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

.required { 
  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] {

View HTML Markup on Github

...

Anchor
requiredgroupofcheckboxes requiredgroupofcheckboxes

Required Group of Checkboxes

...

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

<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;
}

View HTML Markup on Github

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.

...

Anchor
requiredsinglecheckbox requiredsinglecheckbox

Required Single Checkbox

...

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

<input id="searchagreement" type="textcheckbox" required titlearia-invalid="Searchfalse">
<button>Search</button>

View HTML Markup on Github

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>
<label for="agreement">All the information I have submitted in this application is true</label>

View HTML Markup on Github