Required Input with Hidden Asterisks 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 footnotes 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.We can try to remove them also using aria-hidden:

Working Example

Explanation

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

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

NIL