Technology Engineered

Label: Use the Right Tags

The longer you surf the web, the more common design elements you notice. One of things that clients (and bosses) asked me to do repeatedly, was to format forms in a two-column table, with the left column containing bold tags that labeled the input in the right column, with each column aligned in the opposite direction so that they lined up nicely in the center. There are three problems with this approach:

1. Bold tags, while making it easier to tell that they are describing the input rather than just adding content to the page, don't translate well to non-visual presentation media. And...
2. Non-visual browsers can't easily relate the inputs back to their label text, so you have to keep moving back and forth to figure out what input you're filling in.
3. Bonus problem: A table is meant for holding tabular data, rather than for laying out text. In a two-column layout with only labels and text inputs, this isn't much of a problem, as we can just fill in the summary and caption with "for layout purposes." However, if you're trying to do things like placing tons of descriptive text into the label column and making it render as multi-line, then you run into problems with screen readers; they'll read the first line, then the input, then the rest of the label lines.
   

The issue of how to column-format forms is a whole other can of worms, so I'll address that another time. For now, lets focus on the benefits of label tags:

1. Non-visual browsers gain a way to easily tell the intent of an input field.
2. Users of visual browsers can click the label text and send focus to the input, making it easier to move to it by giving a larger clicking target.
3. You can use the label to convey an access key through visual styling like underlining, and allow users to instantly jump to an input without having to tab through all of the preceeding inputs.
4. When using scripts (server- and client-side) to inform the user of validation errors, you can apply distinctive styles to the label to catch the user's attention. For instance, make it red. Your script gains the same benefit as a non-visual browser in that you can more easily find the label text associated with the input.
   

posted by Adam Payne @ 8:39 AM permalink