Avoid Default Field Validation

HTML5 gives us form field validation for free. The problem is that the default messages browsers provide are not always useful and typically do not work with assistive technology.

I made an example on CodePen that uses an email field (type="email"), is required (required), and uses a pattern to restrict the email address to the domain foo.com (pattern=".+@foo.com").

<form action="#" method="get">
  <p>
    <label for="email">Email</label><br>
    <input type="email" id="email" required pattern=".+@foo.com">
  </p>
  <p>
    <input type="submit">
  </p>
</form>

I then fired up three Windows screen readers across four browsers and recorded the output. Note how in each case the browser announces the field as invalid as soon as it gets focus. It also does not identify what the pattern is for the field, nor when the field has become valid (meaning we got the format right).

Firefox 65 and NVDA 2018.3.2.
Internet Explorer 11 and JAWS 2018.
Chrome 71 and JAWS 2018.
Edge and Narrator on Windows 10 as February 2019.

Using required on its own will not identify to all users in plain text that a field is required. You will still need to indicate it in the text label otherwise you could fail 3.3.1 Error Identification (A).

If you use a pattern, you cannot rely on the browser to show the user what the pattern is. If you do not explain it as part of the accessible name, you can fail 3.3.2 Labels or Instructions (A) and 3.3.3 Error Suggestion (AA).

The default browser error indicator, when one is shown, tends to be a red outline. With a default contrast ratio of 4.0:1 on a white background, it would not fail 1.4.11 Non-text Contrast (AA) as noted in John’s comment below, but that is still not very good. Relying only on the outline would also fail 4.1.2 Name, Role, Value (A).

I am making some broad statements here. But by the time you amend the default error handling, replace the text, create better styles, and ensure states are conveyed to assistive technology, you might as well skip the built-in and write your own.

Don’t take my dismissive tone to mean that writing your own is easy. It takes some rigor, as this post on required and aria-required demonstrates. But it is part of the job.

4 Comments

Reply

Hi Adrian,

I (and friends) tried to see how this default behaviour can be altered. It’s still being discussed: https://github.com/whatwg/html/issues/4818

In response to Stéphane. Reply

Awesome. I appreciate you pushing it.

Reply

Isn’t the error outline contrast requirement 3:1? At 4:1 this would pass 1.4.11 Non-text Contrast (AA). You’re spot on in that the outline alone would be insufficient.

John Lukosky; . Permalink
In response to John Lukosky. Reply

Oops. Yeah. I am so used to always running at this with a 4.5:1 minimum that I got carried away. Will fix.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.