skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible design for the Third Sector
Creating inclusive websites since 1996
Jim Byrne Web Designer

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

Related content

Written by :

Avatar of JamesByrne

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.

07810 098 119