Expanded Compact Accessible Forms
· Dec 4, 07:57 AM
Mike Brittain’s recent Making Compact Forms More Accessible elucidates a simple and sound method of placing labels within form fields and clearing them when the field is focused, doing it all with the properly accessible <label> elements. Take a look at his working example before you continue.
The compact form appeals to me for its economy of size and natural grid-friendliness, so much so that I’ve occasionally used the technique even when I had plenty of room in the layout or was placing fields in a vertical column.
Example 1: Brittain’s method with vertical field arrangement
However, I’m not a big fan of hiding descriptive information while you’re committing an action, and the compact form makes the clue go away when you click the field. The potential is there for the user to momentarily forget the purpose of the field, requiring a click or other interaction to get the visual clue back again.
Rather than hide the label this time around, I wanted to position the label to the left of the input (my layout provides a convenient gutter). To do so (and to avoid putting more styling in the script) I had to make a small tweak to Mr. Brittain’s method, abstracting the style to the CSS.
I first created a new style in my CSS called “filled” and put the text-indent rule there. Then I changed this (all on one line):
labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
to (all on one line):
labels[i].className = (hide) ? 'overlabel-apply filled' : 'overlabel-apply';
Remember, you can use multiple classes on an element.
Example 2: Repositioned labels on focus
I also style the borders on my form fields, eliminating the default bevel appearance. Altering the familiar operating system-based appearance of text fields is dangerous ground, as they might cease to be recognizable as editable areas.
I added a subtle gradient to the background of the input elements, along with 16px of right padding and a small arrow background image to the label. This helps to indicate user action can take place there.
Example 3: Form + added visual clues
Enjoy! Next up: making this all play nice with zem_contact_reborn, that is to say, making it work even if you have preexisting classes on your label elements.