SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Indicating Mandatory Form Fields

    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
    Last edited by Chasser; Apr 15, 2008 at 22:26. Reason: typos

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using an <img> is good.

    Check out this previous discussion of this: Best way to mark a form control as required.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chasser View Post
    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.

    Code:
    <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...
    Jack Pickard | The Pickards

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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.

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •