HTML 5 Client-side Validations with Untitled Pattern

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.

From an accessibility point of view, Internet Explorer is not only good practice, but it’s a clear requirement. Because if an input requires a specific pattern, but has no title, JAWS does not announce any validation error. So while a visual user at least sees a small popup “You must use this format” (admittedly not being of much help), a JAWS user will feel totally frustrated as there is no clue about a specific format.

The following example is especially problematic, as the field not only requires a specific pattern – it is also marked up as required: so users feel like they have done everything right after filling something into the input, but still, they cannot submit the form.

Working Example

Code

<form>
  <div class="control">
    <label for="password">Password</label><input id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" required="" type="password" />
  </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;
}

input + label {
  width: auto;
}

.error {
  color: red;
  margin-top: 0;
  margin-left: 120px;
}

label + .error {
  margin-left: 0;
}

fieldset .error {
  margin-left: 0;
}

NIL