Whist reading through the articles at A List Apart I came across this one on Making Compact Forms More Accessible, which explains how to go to a whole lot of trouble to create labels for username and password fields in a compact login form. The effect is good, but the reams of CSS and JavaScript needed to accomplish it are a little bloated, I think.
Here’s a quick and lite alternative that I wrote a couple of years back;
The words “username” and “password” are set with centred background images with the following css;
.username { background: url(images/form_un_bg.gif) center center no-repeat;}
.password { background: url(images/form_pw_bg.gif) center center no-repeat;}
By adding the appropriate class to the input fields you give the user a subtle hint as to what’s expected of them in each field, and all it takes is a couple of small images and a few lines of css. Unlike the solution in the article, it’ll work if JavaScript has been turned off, too.
If you want to include the label fields for the visually impaired, then they can be hidden with display: none; for normal “screen” use, but revealed for screen readers.
I’m not saying that this is as fully featured a solution as that found in the article, but there’s a lot to be said for accomplishing something with less time and effort, especially as, for the most part, it’s just dressing up something that the user will only see for a relatively short time.
