The MCU: Accessible web design consultancy : This weeks tip: test the accessibility of your web page with your own web browser.

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, and will have no chance of WAI AAA compliance. Guideline 10.4 exists to ensure visitors using some older screen readers (which don't recognize 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).

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

From the WAI Guidelines:

10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3] For example, in HTML, do this for TEXTAREA and INPUT.

Contributed by Jim Byrne
Updated Friday 6 Feb 2004

Free weekly accessible web design tip

Comments

1) I want to add a default cursor to the textbox when the page opens using javascript. 2)I have a OK Button, I want to have the ENTER functionality, when clicked on OK Button. Means when the OK Button is displayed, i will press enter and it should process further, so i need ENTER functionality on OK Button using Javascript.

Lalu | Mon Dec 19 2005

Well this was good. I just wanted to knw if we can record the initial value of a property in a dynamic variable that gets created automatically when text field is selected and then record the final change in value so that finally we can alert a message of type: You changed property val from this to this.

Sagar Samant Sinhar | Thu Sep 29 2005

pls help me in my java script code. i wanna add pic in backend of text box. it mean when some one wrote love then it must appear on heart image. if any one help me then pls mail me!!!!

ravi raj | Mon Aug 01 2005

I've also been using this technique on sites for a while now, and am unaware of any accessibility issues. One minor change I would make to the code you give, Jim, is to make it more universal, like so: onfocus="if(this.value==this.defaultValue)this.value=''" By adding in "defaultValue", you save having to code specifically for each input.

Jon Gibbins | Fri Mar 12 2004

Interesting point and one I have considered many times however, I never add any such 'work-arounds' unless they've been physically tested. All too often in this field, people rely solely on theory, the WCAG, and Bobby. Many even say that they do heuristic analysis without ever having tested with people with disabilities - either as contextual studies (in their homes/offices) or even in a lab setting! Sorry - a bit of a rant there. The first question I was leading to is: "Has anyone identified which older screen readers pose this problem, and if so, have they tested this (as the field may still remain invisible to screen readers if the text is removed onFocus)?" The second question I would like to pose (to anyone who has done contextual studies with people using screenreaders), is: "How many people using screen readers exclusively (I'm ruling out those who use them with a monitor to assist with dyslexia and/or those that use them with screen magnifiers (even though these people count for the majority of screen reader users here in Australia), as they are able to see the field), have a browser capable of handling JavaScript?" I have only ever come across a couple in my time - and they had the latest and greatest screen readers to go with their shiny new browsers (in an office setting). Please note: I have never come across the problem of screen readers not picking up form fields - even in contextual testing. Therefore unless the field is critical, I often ignore that guideline as it makes form fields far less usable for everyone (especially the much greater majority of people with motor disabilities vs. those using screen readers exclusively). Just my two cents. :)

Ash Donaldson | Wed Mar 10 2004

I've been using this same technique on my own site for some time. I've never run into an accessibility problem since introducing it.

Bill Mason | Sat Mar 06 2004

Ok Patrick, your wish is my command - any URLs in future comments will be turned into links automatically, like this one: http://www.mcu.org.uk.

Jim Byrne | Fri Feb 06 2004

...you should really consider getting some automatic parsing done on these comments... here are the clickable links: the single post with my solution | the post in context

Patrick H. Lauke | Fri Feb 06 2004

interestingly enough, i discussed something like this in june 2003 over at the sitepoint forums, and came up with a decent enough solution to automate something like this, using titles to provide the default values. see http://www.sitepoint.com/forums/showpost.php?postid=815298&postcount=18 to put it into context, here's the whole thread http://www.sitepoint.com/forums/showthread.php?t=113717 )

Patrick H. Lauke | Fri Feb 06 2004

Email: