Required Input with Asterisks as Icons

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.

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.

Working Example

Explanation

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).

Code

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

NIL