Indicating form controls as required using asterisks (*)

Asterisk (*) next to a form control's label usually indicates it as "required". Oftentimes, this asterisk's purpose is then explained somewhere else on the page. Many users (especially screen reader users) may be confused with that, so be sure to make this information is easily accessible.

Foot notes explaining asterisks

It is a common technique to add an asterisk * to a form control's label. Then, somewhere else on the page, for example below the form, this asterisk is explained to indicate a required input (in allusion to foot notes in text documents).

While visual users usually see both the asterisk and the explanation at a glance and can connect them with each other intuitively, screen reader users have to manually search for the asterisk's purpose. In addition to this, screen readers are often configured in such that they do not read all special characters, and thus ignoring asterisks completely.

Bad example

In the following example, the required input field is announced as "Full Name Asterisk" in most screen readers. An experienced user will probably know what this is intended for, but many users will have no clue.

Required input with asterisk

Show HTML code

Show CSS code

<form>
  <div class="control">
    <label for="name">Full name<span class="required">*</span></label><input id="name" type="text" />
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography" type="text"></textarea>
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
  <p>
    <span class="required">*</span>Required field
  </p>
</form>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

.required {
  color: red;
}

As the text explanation "required field" even is below the submit button of the form, a screen reader user probably will never read it, as activating the button usually is the last thing a user does when filling a form.

First approach: using ARIA

As we know from Placing non-interactive content between form controls, the text "required field" can be associated to the form control by using aria-describedby. And as we now do not need the text by itself anymore for screen readers, we can also hide it from them using aria-hidden (see Hiding elements from screen readers using aria-hidden).

Required input with asterisk and ARIA

Show HTML code

Show CSS code

<form>
  <div class="control">
    <label for="name">Full name<span class="required">*</span></label><input aria-describedby="required-description" id="name" type="text" />
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography" type="text"></textarea>
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
  <p aria-hidden="true" id="required-description">
    <span class="required">*</span>Required field
  </p>
</form>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

.required {
  color: red;
}

The screen reader now announces the control as required - but it also announces the confusing asterisks.

We can try to remove them also using aria-hidden:

Required input with hidden asterisks and ARIA

Show HTML code

Show CSS code

<form>
  <div class="control">
    <label for="name">Full name<span aria-hidden="true" class="required">*</span></label><input aria-describedby="required-description" id="name" type="text" />
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography" type="text"></textarea>
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
  <p aria-hidden="true" id="required-description">
    <span aria-hidden="true" class="required">*</span>Required field
  </p>
</form>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

.required {
  color: red;
}

But aria-hidden does not seem to be respected in focus mode. What a bummer.

Better approach: using an icon

Instead of trying to work around the problem using ARIA, we can take an approach that works perfectly using plain old HTML.

Instead of trying to hide the plain text asterisk * in the label, we replace it with a decent icon. In our case, it is a fancy SVG graphic. Then we simply add the text "required" as a visually hidden element (for more info, see Hiding elements correctly).

Required input with asterisks as icons

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<svg id="definition" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="required" viewbox="0 0 128 128"><g><path d="M110.1,16.4L75.8,56.8l0.3,1l50.6-10.2v32.2l-50.9-8.9l-0.3,1l34.7,39.1l-28.3,16.5L63.7,78.2L63,78.5   l-18.5,49L17.2,111l34.1-39.8v-0.6l-50,9.2V47.6l49.3,9.9l0.3-0.6L17.2,16.7L45.5,0.5l17.8,48.7H64L82.1,0.5L110.1,16.4z"></path></g></symbol></defs></svg>
<form>
  <div class="control">
    <label for="name">Full name<svg class="icon" focusable="false"><use xlink:href="#required"></use></svg>
      <div class="visually-hidden">
        required
      </div>
    </label><input id="name" type="text" />
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography" type="text"></textarea>
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
  <p aria-hidden="true">
    <svg class="icon" focusable="false"><use xlink:href="#required"></use></svg>Required field
  </p>
</form>

*:focus {
  outline: 2px solid;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

.control {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

svg#definition {
  display: none;
}

.icon {
  width: 0.5em;
  height: 0.5em;
  fill: red;
  vertical-align: top;
}

;(function () {}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-5-14
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-5-8
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-5-20
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-5-7

To prevent Internet Explorer from making the SVGs focusable, the focusable="false" attribute is used. Instead of an SVG, you could also use a traditional image with empty alternative text (<img src="..." alt="" />).

And if you really want to make it fancy, you could combine this technique with a tooltip showing "Required" on hover: Tooltip widgets (or: screen tip, balloon).

Using HTML 5 client side validations

Instead of a applying a visually hidden text "required", one can set a required attribute to the input: this makes screen readers announce an input as a required one.

Required inputs with HTML 5 and ARIA

Show HTML code

Show CSS code

⚠ (pass with comments) ,

⚠ (pass with comments)

<form>
  <div class="control">
    <label for="first_name">First name</label><input id="first_name" required="" type="text" />
  </div>
  <div class="control">
    <label for="middle_name">Middle name</label><input aria-required="" id="middle_name" type="text" />
  </div>
  <div class="control">
    <label for="last_name">Last name</label><input aria-required="" id="last_name" required="" type="text" />
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
</form>

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

.required {
  color: red;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-15
NVDA 2018.1 + FF Quantum 59.0.2	⚠ (pass with comments) pass	The name of an invalid field is not automatically announced. This is nasty, but the user can find this information manually.	2018-6-6
JAWS 2018.3 + IE 11	⚠ (pass with comments) pass	The name of an invalid field is not automatically announced. This is nasty, but the user can find this information manually.	2018-5-20
JAWS 2018.3 + FF ESR 52.7.3	⚠ (pass with comments) pass	The name of an invalid field is not automatically announced. This is nasty, but the user can find this information manually.	2018-5-7

Technically this is much easier and cleaner (more information here: HTML 5 client side validations). But browser support is still rather shaky and the user experience with screen readers is shaky.

And often there may be cases where other texts than simply "required" are needed (and where there is no standard HTML attribute available), so it's good to have a more flexible solution: namely hidden texts.

You could also be interested in

Knowledge is power! Our guide has more to offer about:

You are here:

Indicating form controls as required using asterisks (*)

Foot notes explaining asterisks

Bad example

First approach: using ARIA

Better approach: using an icon

Using HTML 5 client side validations

You could also be interested in

Previous/next navigation