Required Inputs with HTML 5 and ARIA

HTML 5 client-side validations are a very useful feature: they allow rudimentary validation of user data without submitting anything to the server. They are supported to a high degree by modern browsers and screen readers. Still, you should obviously never think of them as a complete replacement for server-side data validation.

Many of HTML 5’s attributes for client-side validation also have a relative aria-* attribute.

For example, there is both a required and an aria-required attribute, as well as invalid and aria-invalid.

This is due to the fact that the ARIA attributes have been introduced much longer ago to allow developers to mark form controls as required (or invalid, or whatever). Meanwhile, many of those ARIA attributes have found their way into the official HTML specification.

Both attribute types in general trigger the same screen reader announcements. Their main difference is that HTML 5 attributes also trigger client-side validation in the browser, while the ARIA attributes do not.

In the following example, both HTML 5 (required) and ARIA (aria-required) validations are present. Do you spot the differences in screen reader and browser behavior?

Working Example

Explanation

Technically this is much easier and cleaner. 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.

In general, we suggest using the HTML 5 validations; if you need to target legacy browsers and screen readers, you can have both types side by side. And if for some reason you do not want to have client-side validations but still need to mark the fields for screen readers, you can rely on ARIA validations.

Code

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

NIL