Summary

HTML5 allows you to specify several useful input types, such as email, url, and so on. When I updated Juicy Studio, I implemented the email and url input types along with the required attribute for the comment section. The email and url input types and required attribute are implemented in the latest versions of Firefox, Chrome, and Opera, but only the Firefox implementation is completely accessible.

Author: Gez Lemon

Thanks to Maria Ramos for providing a Spanish translation of this article.

Basic browser validation with HTML5

Using the email, url input types and the required attribute is very useful for developers, as the validation is done by the browser without the developer having to do anything. For example, the developer adds the required attribute to an input element, and the browser checks there is a value before submitting the form.

Indicating a required field
<label for="contactname">Name: </label>
<input required id="contactname" ⋯>

If the user attempts to submit the form, an error message is displayed.

Error message for required field

Firefox alert: please fill in this field

When an input with type="url" or type="email" is used, the browser validates the field to ensure the value is a valid email or URL if provided. The following example would check for a valid URL.

Indicating input type of URL
<label for="url">URL: </label>
<input type="url" size="30" name="url" id="url">

If the user doesn't provide a valid URL, an error message is displayed.

Error message for invalid URL

Firefox alert: please enter a url

The actual validation is a bit hit and miss. Firefox and Chrome both reject anything that doesn't start with http:// (just http: is all that's required for Firefox), and Opera will accept anything providing some text has been entered.

Validation for an email is also very simple, and just requires text around an @ symbol, so entries such as b@t are accepted as valid email addresses.

Indicating input type of email
<label for="email">Email: </label>
<input type="email" size="30" name="email" id="email">
Error message for invalid email

Firefox alert: please enter an email address

Browser validation accessibility

Firefox has implemented these attributes accessibly. All browsers that have implemented validation for these attributes do so before the form is submitted, and focus is placed on the first field that doesn't conform to the validation rules with a tooltip indicating the error. If a user submits a form where a required field has no value, focus is placed on the field and an error message is displayed. For the "Name" field used in this example, JAWS with Firefox announces, "Alert please fill in this field, Name edit required invalid entry".

Unfortunately, these attributes are not supported at all in IE9, and are not accessible in IE10, Chrome or Opera. The solution for now is to use the attributes, but also add the accessible information using WAI-ARIA. In browsers that support these attributes, the validation is performed before the onsubmit event is fired, so the simplest solution is to unobtrusively validate the fields when they lose focus. Unobtrusively indicating errors is preferable to forcing the user back to a field, or announcing that the field is in error, as the user should be able to navigate unhindered through the page.

For a required field, the aria-invalid and aria-required attributes should be used to programmatically indicate the field is required and in error. If the user does submit the form without providing the information, focus on the field (or the browser will focus on it if it's supported), and the information is programmatically available for assistive technology users. CSS can be used to target the error so there is also a visual indication of an error. The following uses an attribute selector, but you could use a class if you want to support older browsers.

Using CSS to provide a visual indication of an error
[aria-invalid=true]
{
    outline: 2px solid #c66;
}

For emails and URLs, it's a good idea to supplement the error with a message. The safest method of ensuring that the message is conveyed to the user is to append the error to the existing label element. Alternatively, you could use the aria-describedby attribute to associate the error message if it's not included in the label element.

Using aria-describedby to programmatically associate error message
<label for="url">URL: </label>
<input type="url"
       aria-invalid="true"
       aria-describedby="urltip"
       id="url"
       name="url">
<div id="urltip">Please enter a valid email URL</div>

Conclusion

Firefox's implementation of HTML5 email, url input types and the required attribute is completely accessible and works well with screen readers. The attributes are useful and save developers time, but until the attributes are supported accessibly in all the main browsers, developers should use WAI-ARIA and the techniques outlined in this article to provide the missing accessibility information.

Category: Accessibility.

Comments

  1. [accessible_browser_validation_html5.php#comment1]

    I think it is important to point out that these attributes affect validation and not the accessible name for the control that is exposed through the API. For example, using <input email> or <input url> does not notify a user of assistive technology that an E-mail address or URL needs to be entered into the input field. This information still needs to be provided using the label of the form field or instructive text, and any form field constraints should be included in the label to minimize error generation in the first place.

    Similarly, aria-invalid will notify of an invalid response for a form field but not that the field is required. All form fields should have an aria-invalid value initially set to false until an error is triggered or else the assistive technology will announce "invalid" even if the field is not errant which is likely to lead to confusion. To indicate that a field is required, the aria-required state can be set to true for those form fields.

    Posted by Sam on

  2. [accessible_browser_validation_html5.php#comment4]

    Hi John,

    I hadn't seen it, so thanks for the link to your post on HTML5's required attribute. It's an interesting read, and relevant to Sam's point about using aria-invalid="false" on required fields so that "invalid" isn't announced when the user first visits the empty field.

    Posted by Gez on

  3. [accessible_browser_validation_html5.php#comment6]

    Thanks Gez for this article and the information about the input types and especially WAI-ARIA. As usual, that's a pity that we, designers and developers, should wait and use two or more ways of coding because of the browsers that don't support everything altogether (Firefox standing for only 25% in the world).

    Posted by Tim on

  4. [accessible_browser_validation_html5.php#comment7]

    Thanks for the heads up on how to provide the missing accessibility information. The techniques are easy to understand and implement, I just hope the other browsers fix the problem one day so its not needed.

    Posted by Alice on

  5. [accessible_browser_validation_html5.php#comment8]

    Hi Gez,

    Very nice to see you writing again! Excellent and timely post. FWIW, I think this could form the basis of a good WCAG technique on accessible form validation. Ping me, if you'd like to chat about it. Good points from Sam too.

    Cheers

    Josh

    Posted by Joshue O Connor on

Comments are closed for this entry.