Empty controls (WCAG1 10.4)

To meet requirement 10.4, you could use unobtrusive JQuery:

function defaultText(field) {
	if ($('#'+field).val() == 'Enter your '+field) {
		$('#'+field).css('color', '#aaa');
	}

	$('#'+field).focus(function() {
		$(this).css('background-color','#ff9');
		if ($(this).val() == 'Enter your '+field) {
			$(this).val('');
			$(this).css('color', '#000');
		}
	});

	$('#'+field).blur(function() {
		$(this).css('background-color','#fff');
		if ($(this).val() =='') {
			$(this).val('Enter your '+field);
			$(this).css('color', '#aaa');
		}
	});
}

var fields = Array('name', 'email', 'phone', 'message');
for (var i=0; i<fields.length; i++)
	defaultText(fields[i]);

Something like that? Then set the ID on the controls to 'xxxx', default value 'Enter your xxxx', and css color #000 (so users without Javascript won't need to squint at the form).

Update: I already did this turkey a while ago, but the above is slightly better for functioning it and less obtrusive. And the AJAX-style yellow background: swish.

Posted 02 Jun 2008, tagged with a11y jquery