Required Input with Asterisk and ARIA

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 easily accessible.

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 such that they do not read all special characters, thus ignoring asterisks completely.

As we know from Placing non-interactive content between form controls, the text “required field” can be associated with the form control by using aria-describedby.

Working Example

Explanation

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

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

NIL