[thelist] [Usability] Where does the "*" required-marker go?

aardvark roselli at earthlink.net
Mon Oct 14 11:33:19 CDT 2002

> From: Steve Cook <steve.cook at evitbe.com>
> I tend towards a red star to the right of the label text -
> <b>Name<span class="red">*</span>
> With the following class definition:
> .red {color: #ff0000;}
> At the bottom of the form I use the following:
> (<span class="red">*</span><i> - Required field</i>)

i see some problems with that -- at least based on the way i build
forms (your forms may avoid these by other means):
- colorblind users will only see grey...
- non-CSS browsers will see default text color...
- the class name means nothing if you change the color...
- the class name doesn't describe the purpose...
- red implies an error, but nothing is wrong yet...

consider this...
<label for="foo"><strong>bar</strong></label>

and this:
label strong	{	color : #ff0000 ; }

of course, you can use other styles to drive the point further home,
including aural styles and print styles...

but this way, you've added no new classes to the HTML, so the
code is nice and, um, pure...

(<span> is a gateway tag)

Read the evolt.org case study
Usability: The Site Speaks for Itself
ISBN: 1904151035

More information about the thelist mailing list