Use Javascript to add default text to input fields

For as long as I can remember I’ve puzzled over whether or not to put in default characters in edit boxes and text areas in my web forms. On the one hand if I don’t my page will not will not pass Guideline 10.4 (WCAG 1), and will have no chance of WAI AAA compliance.

Guideline 10.4 exists to ensure visitors using some older screen readers (which don’t recognise empty form fields) – can fill in web forms.

Unfortunately, if I add default text in my form fields I create problems for another set of users, i.e. those who have to delete my text before entering their own. I also create additional work for my forms processing script; which has to check for, and remove any remaining default characters (many people don’t bother deleting the default characters when adding their own text).

I have gone through periods of not adding default text – and having to explain why my forms don’t pass AAA web accessibility tests – and adding text, and dealing with the associated problems. I had resigned myself to the thought that this was one of those web accessibility problems that has no simple solution.

However, it looks like I may have been too quick to give up on it. While surfing on the Juicy Studio website I notice that Gez Lemon (the owner of the site) was using Javascript to add default text to his forms – and that the text disappeared when I clicked in the form field. The form passed the 10.4 Guideline, and caused no problems either for users or my form processing script. The surprising thing was that it was very easy to add this facility to my own forms:

Here is an example from a field in my comments form (only the relevant attributes are shown).

<input type = "text" name = "membername" value = "Name" onfocus="if(this.value=='Name')this.value=''">

The value of the filed is set to ‘Name’. The inline Javascript code ‘says’ if there is focus on the form field (i.e. I have clicked so my cursor is in the field), check the default value and if it is ‘Name’ make it an empty string. The relevant short script is as follows:

onfocus="if(this.value=='Name')this.value=''"

Fantastic – one more accessibility compliance problem solved. Get back to me if you are aware of any issues with this technique that I have failed to appreciate.

Links and references

Juicy Studio
From the WAI Guidelines: Web Content Accessibility Guidelines 1.0
Patrick H. Lauke technique

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.