Validating the form
Take this simple booking form: attribute for the label tag matches up with the id attribute of the associated input tag.
This keeps our HTML semantic, with the labels helping to give meaning to the input controls.
Another option would be to continue to use solely Java Script for your client-side validation, and not add any of the new features discussed above.
As such, current best practice recommends supplementing the required attribute with the aria-required=”true” attribute: Now that our users get prompted to complete required fields, we need to make sure that the data they submit is in the format we require.
We'll want the 'Name' field to be submitted in the format 'Firstname Lastname', and to only contain letters and a space (NB in real world scenarios, you might need to take account of other locales – this example has been kept simple deliberately).
To recap—or in case you haven’t read Sandeep’s article—with the dawn of HTML5, a raft of new input types and attributes were added to tags that allow the browsers themselves to perform the client-side validation for us: no Java Script required.
To start using the new input types and attributes, you don't really need to do anything other than start using the new input types and attributes.
Ian Oxley has been building stuff on the Web professionally since 2004.
He lives and works in Newcastle-upon-Tyne, England, and often attends local user groups and meetups. When he's not in front of a computer Ian can be found playing guitar, and taking photos.
We can achieve this by adding a pattern attribute to the 'Name' field, setting it's value to the regular expression we want the data to be compared against: The text in the title attribute is then appended to the built-in validation message: Note that some screen reader / browser combinations might lead to the title attribute being read out in addition to the aria-describedby text, so watch out for this e.g.
I found that using NVDA with IE10 caused the title attribute and the aria-describedby element's text to be read out, but using NVDA with Chrome and Firefox didn’t exhibit this behaviour. Later on we’ll revisit this and show you one solution using CSS3.
I’m also using the WAI ARIA attribute now, so if we leave ‘required’ in the label tag screen reader users will have ‘required’ read to them twice, which they could find rather annoying.
A word of warning though: not all browsers implement the attribute accessibly, so it might not be picked up correctly in certain browser / screen reader combinations.
It also means that if you click the label, the associated input tag receives the focus.