Counting chars 29 Dec 2006

Presenting the "You can enter up to 33 more characters" message below the text field is great for sighted users, as they can simply glance down to refer to it at any point. Blind users, however, won't have this luxury. Their screen-readers will voice the label, text field and character counter in strict linear sequence - i.e. "Title...Text field...You can enter up to 50 characters". Our experience tells us that most users will pause after hearing "Text field" in order to fill it in, which means that they won't hear the message alerting them to the character limit until after they're done typing. This could potentially cause a great deal of frustration ("Why didn't you tell me I only had 50 characters to play with before I started typing?!?!").

It may therefore be worth incorporating the character counter into the field's label - e.g. "Title (You can enter up to 50 characters)" - so that blind users are told of the character limit prior to attempting to fill in the field. This way the design sets their expectations at the outset, instead of giving them a nasty surprise after they've finished typing (and, once they know that the message exists, they'll know that they can return to it as required to check how many characters they have left).

Note: CSS could even be used to extract the character counter message from the label and reposition it beneath the text field (per Robert's suggested design), if this is deemed the best solution for sighted users. Our accessibility tweak only affects the sequence in which the underlying HTML elements are coded (and thus are voiced by screen-readers); it doesn't have to affect their visual appearance.

Related: Top rated (analysis of the "star rating" user interface).