Inidicating Mandatory Form Fields

[Chasser]

In terms of accessibilty/usability, where is the correct place to position an asterix (*) to indicate that a form field is mandatory?

And.. is using an asterix enough or should we be implementing titles or some such?

Thanks

[samanime]

I think the typical placement is after.

As far as accessibility goes, I haven't read any studies on this or anything, and it's likely most disabled users are used to it, but I think there are better ways to make things more accessible. Titles are one way, by placing "required" in the title. Another way could be to use a small icon indicating required to sighted users, while having the alt tag read "required" or "required field".

Then, instead of screen-readers reading something like "name asterisk", it would read "name required field". Or maybe even put the icon before so it could read "required field name".

Just my personal thoughts on the matter.

[Kravvitz]

Using an <img> is good.

Check out this previous discussion of this: Best way to mark a form control as required.

[Tailslide]

My personal opinion is to avoid the asterisk thing and just to write (required) after the label. It's just simpler all round and looks fine.

Another alternative is to have the required fields enclosed by a separate fieldset with the legend "Required Information"

[JackP]

In terms of accessibilty/usability, where is the correct place to position an asterix (*) to indicate that a form field is mandatory?

within the label. If it's not marked as part of the label itself, it might not be usable to some...

and if you want the label before, then the box, then the asterisk, wrap the asterisk in a span or equivalent, and use css positioning to move that to the right of the text box, whilst still being part of the label.

<label for="txtSurname">Surname <span>*</span></label>

Oh, and while it is better to use 'required' or 'mandatory' for usability purposes, but many users of assistive technology are familiar with the concept of * = mandatory when relating to forms.

You could - if you're using a span or similar - give it a title of "mandatory", but a lot of assistive technology wouldn't expand this anyway...

[samanime]

While I'm sure a lot of people are familiar with the *, not all of them are. Especially those that may be new to using assistive technology.

I still think using an icon <img> is my favorite approach. You would do it something like:

<label for="name">Name <img src="required.png" height="16" width="16" alt="required"></label><input type="text" id="name">

As you can see, the img would be very small, and thus highly unobtrusive. You could even make the image look like a stylized asterisk. At the top you could say something like "those marked with <img> are required". This would read "those marked with required are required" to screen-readers which is a bit goofy, but makes sense. Then, all of the fields would read "required" to unsighted users, while sighted users just see a pretty image. And since the img is only 16x16, if you used a GIF (which is most appropriate for small images) it would just barely be above 256 bytes in size.

[C. Ankerstjerne]

I made an example of a form for a different thread, which also covers this problem. It would of course have to be specified that fields marked in bold are mandatory, but that is a minor issue.

http://panzerworld.net/diverse/formhelptextexample.html

[Chasser]

Thanks for the input everyone. I wasn't aware you could/should put other code inside label tags. Definetly has given me seomthing to think about.