HTML5 allows you to specify several useful input types, such as
url, and so on. When I updated Juicy Studio, I implemented the
url input types along with the
required attribute for the comment section. The
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
Basic browser validation with HTML5
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.
If the user attempts to submit the form, an error message is displayed.
When an input with
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.
If the user doesn't provide a valid URL, an error message is displayed.
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.
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.
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
Firefox's implementation of HTML5
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.