E-mail List Archives
Thread: Optimum position of asterixes on web forms
Number of posts in this thread: 12 (In chronological order)
From: Gareth Dart
Date: Thu, Oct 09 2008 9:10AM
Subject: Optimum position of asterixes on web forms
No previous message | Next message →
Hello all,
Not so much an accessibility issue per-se but an important usability
issue.
Users without significant visual impairment derive a useful visual cue
from the inclusion of an asterix next to required fields on a form. We
currently have a minor interdepartmental ding-dong going about exactly
where this asterix should be placed.
I have always put this to the right of the field control - and have been
doing this for so long I've ceased (until now) to question this
placement. Another colleague (from a print background) has suggested
that it should be placed to the left of the label, citing user's
left-to-right reading habits as a rationale - the users see the asterix
right off and therefore knows the field is mandatory. Yet another
person has suggested to the right of the label, between the label and
the field control (the form is styled to float labels next to their
associated form controls).
A google search suggests there seems to be no consensus view. Does
anyone have any thoughts>
Cheers,
G
Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ
T 01242 211128 F 01242 211122 W www.hesa.ac.uk
<http://www.hesa.ac.uk/>;
From: Steve Green
Date: Thu, Oct 09 2008 9:20AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
Ideally the <label> element that contains the text label for the form
control should also contain a means of specifying that the field is
mandatory. This ensures that screen reader users are aware that the field is
mandatory. Any text that is outside the <label> element will not be read
when in 'forms mode'.
This will generally mean the mandatory indication will be somewhere between
the text label and the form control.
Steve
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gareth Dart
Sent: 09 October 2008 16:08
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Optimum position of asterixes on web forms
Hello all,
Not so much an accessibility issue per-se but an important usability issue.
Users without significant visual impairment derive a useful visual cue from
the inclusion of an asterix next to required fields on a form. We currently
have a minor interdepartmental ding-dong going about exactly where this
asterix should be placed.
I have always put this to the right of the field control - and have been
doing this for so long I've ceased (until now) to question this placement.
Another colleague (from a print background) has suggested that it should be
placed to the left of the label, citing user's left-to-right reading habits
as a rationale - the users see the asterix right off and therefore knows the
field is mandatory. Yet another person has suggested to the right of the
label, between the label and the field control (the form is styled to float
labels next to their associated form controls).
A google search suggests there seems to be no consensus view. Does anyone
have any thoughts>
Cheers,
G
Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ T 01242 211128 F 01242
211122 W www.hesa.ac.uk <http://www.hesa.ac.uk/>;
From: ben morrison
Date: Thu, Oct 09 2008 9:30AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
On Thu, Oct 9, 2008 at 4:17 PM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Ideally the <label> element that contains the text label for the form
> control should also contain a means of specifying that the field is
> mandatory. This ensures that screen reader users are aware that the field is
> mandatory.
Any mandatory information *should* always be inside the label, for
design requirements it can be moved using absolute positioning.
<h2>* denotes mandatory field</h2>
<label>Name:<span>*</span></label>
As per the original question, I don't know of any actual testing thats
been done for optimal positioning, but there has been some good
research on label placement
http://uxmatters.com/MT/archives/000107.php
Ben
--
Ben Morrison
From: Daniel Tang (dtang)
Date: Thu, Oct 09 2008 11:20AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
Hello:
For the benefit of screen reader users, it should placed to the left of
the required field. When a screen reader application announces the char,
the user knows immediately that the field is required.
Daniel Tang
Accessibility Specialist CCIE # 3681
Cisco Systems
170 W. Tasman
San Jose, CA 95134
Phone: 408 526 7814
Email: = EMAIL ADDRESS REMOVED =
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gareth Dart
Sent: Thursday, October 09, 2008 8:08 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Optimum position of asterixes on web forms
Hello all,
Not so much an accessibility issue per-se but an important usability
issue.
Users without significant visual impairment derive a useful visual cue
from the inclusion of an asterix next to required fields on a form. We
currently have a minor interdepartmental ding-dong going about exactly
where this asterix should be placed.
I have always put this to the right of the field control - and have been
doing this for so long I've ceased (until now) to question this
placement. Another colleague (from a print background) has suggested
that it should be placed to the left of the label, citing user's
left-to-right reading habits as a rationale - the users see the asterix
right off and therefore knows the field is mandatory. Yet another
person has suggested to the right of the label, between the label and
the field control (the form is styled to float labels next to their
associated form controls).
A google search suggests there seems to be no consensus view. Does
anyone have any thoughts>
Cheers,
G
Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ T 01242 211128 F
01242 211122 W www.hesa.ac.uk <http://www.hesa.ac.uk/>;
From: Karlen Communications
Date: Thu, Oct 09 2008 12:40PM
Subject: Re: Optimum position of asterisk on web forms
← Previous message | Next message →
Hi:
I would also tend to put the "-required" in the form control as I never know
when "star" means required for a field and since I usually just work with a
list of form controls not the text around them, having the "- required" as
part of the form control label lets me work through forms quickly.
I don't think an asterisk provides enough accessibility. For form controls
Cheers, Karen
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Daniel Tang
(dtang)
Sent: Thursday, October 09, 2008 1:11 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Optimum position of asterixes on web forms
Hello:
For the benefit of screen reader users, it should placed to the left of
the required field. When a screen reader application announces the char,
the user knows immediately that the field is required.
Daniel Tang
Accessibility Specialist CCIE # 3681
Cisco Systems
170 W. Tasman
San Jose, CA 95134
Phone: 408 526 7814
Email: = EMAIL ADDRESS REMOVED =
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gareth Dart
Sent: Thursday, October 09, 2008 8:08 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Optimum position of asterixes on web forms
Hello all,
Not so much an accessibility issue per-se but an important usability
issue.
Users without significant visual impairment derive a useful visual cue
from the inclusion of an asterix next to required fields on a form. We
currently have a minor interdepartmental ding-dong going about exactly
where this asterix should be placed.
I have always put this to the right of the field control - and have been
doing this for so long I've ceased (until now) to question this
placement. Another colleague (from a print background) has suggested
that it should be placed to the left of the label, citing user's
left-to-right reading habits as a rationale - the users see the asterix
right off and therefore knows the field is mandatory. Yet another
person has suggested to the right of the label, between the label and
the field control (the form is styled to float labels next to their
associated form controls).
A google search suggests there seems to be no consensus view. Does
anyone have any thoughts>
Cheers,
G
Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ T 01242 211128 F
01242 211122 W www.hesa.ac.uk <http://www.hesa.ac.uk/>;
From: Dean Hamack
Date: Thu, Oct 09 2008 12:50PM
Subject: Re: Optimum position of asterisk on web forms
← Previous message | Next message →
So it sounds like the best method would be to use both; the asterik for
sighted users, and "required" for blind users. You could hide the required
portion of the label with a span and some negative positioning.
This is actually very timely info since I just got a call this morning from
one of the biggest online retailers in the world about redesigning the
payment portion of their site.
On 10/9/08 11:31 AM, "Karlen Communications" < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi:
>
> I would also tend to put the "-required" in the form control as I never know
> when "star" means required for a field and since I usually just work with a
> list of form controls not the text around them, having the "- required" as
> part of the form control label lets me work through forms quickly.
>
> I don't think an asterisk provides enough accessibility. For form controls
>
> Cheers, Karen
From: Jukka K. Korpela
Date: Thu, Oct 09 2008 1:10PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
Gareth Dart wrote:
> Users without significant visual impairment derive a useful visual cue
> from the inclusion of an asterix next to required fields on a form.
The Ascii asterisk "*" isn't really an ideal character for that even when
rendered visually. It is not very noticeable, and in some fonts it's even
superscript-like. Robustness considerations seem to exclude other, more
noticeable asterisk chararacters, though. But wait...
I wonder why nobody has mentioned the approach of using an image, e.g.
<label><img alt="Required:" src="star.gif"> Email-address:</label>
This
a) lets you use a suitable prominent symbol in visual presentation
b) causes a plain English word to be presented in non-visual presentation,
instead of a name of a cryptic character (well, it's only cryptic until
you've learned and adopted the idea that asterisk means something special in
forms, but then again, anything cryptic is cryptic just as long as it has
been learned and adopted).
> We currently have a minor interdepartmental ding-dong going about
> exactly where this asterix should be placed.
Wouldn't it be logical to say present it before the field name? I would say
that it is even visually better.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Dean Hamack
Date: Thu, Oct 09 2008 1:30PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
> I wonder why nobody has mentioned the approach of using an image, e.g.
>
> <label><img alt="Required:" src="star.gif"> Email-address:</label>
I can't speak for anyone else, but personally, I try to use as few images as
possible to cut down the number of http requests, and I don't use hardcoded
images in my html unless it's absolutely necessary.
From: Jukka K. Korpela
Date: Thu, Oct 09 2008 1:40PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
Dean Hamack wrote:
>> I wonder why nobody has mentioned the approach of using an image,
>> e.g.
>>
>> <label><img alt="Required:" src="star.gif"> Email-address:</label>
>
> I can't speak for anyone else, but personally, I try to use as few
> images as possible to cut down the number of http requests, and I
> don't use hardcoded images in my html unless it's absolutely
> necessary.
I don't think that can be a serious objection to using an approach that
seems to be the best for accessibility, usability, and graphic quality.
(Admittedly, it does not work that well for very large font sizes, and
scaling images according to font size is somewhat questionable graphically.)
One HTTP request can't matter that much. Many high-traffic sites do several
HTTP requests before the server even starts sending the page proper. (I mean
things like multiple HTTP redirections.) Compared to that, one extra request
per visit to a site can't matter much. (There's only one request per visit
since when the image is repeated, it will be picked up from browser cache.)
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Andy Mabbett
Date: Thu, Oct 09 2008 2:00PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
In message
< = EMAIL ADDRESS REMOVED = >, ben
morrison < = EMAIL ADDRESS REMOVED = > writes
> Any mandatory information *should* always be inside the label, for
> design requirements it can be moved using absolute positioning.
> <h2>* denotes mandatory field</h2>
> <label>Name:<span>*</span></label>
Wouldn't that be better as:
<h2>* denotes mandatory field</h2>
<label>Name:<abbr title="mandatory">*</abbr></label>
or perhaps:
<h2><abbr title="required">*</abbr> denotes mandatory field</h2>
<label>Name:<abbr>*</abbr></label>
?
--
Andy Mabbett
From: Rich Pedley
Date: Thu, Oct 09 2008 2:10PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →
On 09/10/2008 20:50, Andy Mabbett wrote:
> Wouldn't that be better as:
>
> <h2>* denotes mandatory field</h2>
> <label>Name:<abbr title="mandatory">*</abbr></label>
>
> or perhaps:
>
> <h2><abbr title="required">*</abbr> denotes mandatory field</h2>
> <label>Name:<abbr>*</abbr></label>
>
> ?
>
since when is * an abbreviation?
Rich
From: Dean Hamack
Date: Thu, Oct 09 2008 2:20PM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | No next message
That's semantically incorrect. An asterisk is not an abbreviation. Proper
use of abbr is like so:
<abbr title="Telephone Number">PH:</abbr> 206.905.8575
On 10/9/08 12:50 PM, "Andy Mabbett" < = EMAIL ADDRESS REMOVED = > wrote:
> Wouldn't that be better as:
>
> <h2>* denotes mandatory field</h2>
> <label>Name:<abbr title="mandatory">*</abbr></label>
>
> or perhaps:
>
> <h2><abbr title="required">*</abbr> denotes mandatory field</h2>
> <label>Name:<abbr>*</abbr></label>