WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Re: Foreign:Re: Optimum position of asterixes on web forms

for

Number of posts in this thread: 7 (In chronological order)

From: Moore, Michael
Date: Thu, Oct 09 2008 2:50PM
Subject: Re: Foreign:Re: Optimum position of asterixes on web forms
No previous message | Next message →

FYI there seems to be a bug in JAWS 9 where the abbreviation and
acronyms are not being expanded even when selected in the verbosity
settings.

Mike

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rich Pedley
Sent: Thursday, October 09, 2008 3:08 PM
To: WebAIM Discussion List
Subject: Foreign:Re: [WebAIM] Optimum position of asterixes on web forms

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: Gareth Dart
Date: Fri, Oct 10 2008 12:50AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →

Many thanks for the advice, guys. It should have seemed obvious that a
required indicator needs to go inside the field label - I guess this
highlights the need not to become hidebound.

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


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Gareth Dart
Sent: Thursday 9 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: Andy Mabbett
Date: Fri, Oct 10 2008 1:50AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →

In this context, it is an abbreviation.


In message < = EMAIL ADDRESS REMOVED = >, Dean Hamack
< = EMAIL ADDRESS REMOVED = > writes

>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>


--
Andy Mabbett
Says "NO! to compulsory UK ID Cards": <http://www.no2id.net/>;
and: "Free Our Data": <http://www.freeourdata.org.uk>;
(both also on Facebook)

From: Andy Mabbett
Date: Fri, Oct 10 2008 2:00AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | Next message →

In message < = EMAIL ADDRESS REMOVED = >, Rich Pedley
< = EMAIL ADDRESS REMOVED = > writes

>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?

Since it was first used as a shortened version of a longer word or
phrase.

--
Andy Mabbett
Says "NO! to compulsory UK ID Cards": <http://www.no2id.net/>;
and: "Free Our Data": <http://www.freeourdata.org.uk>;
(both also on Facebook)

From: Tim Beadle
Date: Fri, Oct 10 2008 3:00AM
Subject: Re: Optimum position of asterisk on web forms
← Previous message | Next message →

On Thu, Oct 9, 2008 at 7:31 PM, Karlen Communications
< = EMAIL ADDRESS REMOVED = > wrote:
> 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

From Natalie Downe's "CSS Systems" talk at BarcampLondon5:

"For example the star used on labels to indicate a field is required,
NEEDS to be an image
with the alt text 'required'"
-- http://natbat.net/2008/Sep/28/css-systems/ links to her PDF of
slides plus notes.

e.g. <img src="asterisk.gif" alt="Required">

And I agree with previous posters that this should be inside the label
element associated with the form control in question.

Regards,

Tim

From: Tim Beadle
Date: Fri, Oct 10 2008 3:10AM
Subject: Re: Optimum position of asterisk on web forms
← Previous message | Next message →

On Fri, Oct 10, 2008 at 9:56 AM, Tim Beadle < = EMAIL ADDRESS REMOVED = > wrote:
> "For example the star used on labels to indicate a field is required,
> NEEDS to be an image with the alt text 'required'"

Sorry - I should have clarified that statement is in the context of
talking about CSS background images - i.e. (according to Natalie) it's
not accessible enough to use (say) <span
class="required">Required</span> then apply an image replacement trick
in CSS; it needs to be an img element.

Regards,

Tim

From: ben morrison
Date: Mon, Oct 13 2008 10:40AM
Subject: Re: Optimum position of asterixes on web forms
← Previous message | No next message

On Fri, Oct 10, 2008 at 7:43 AM, Gareth Dart < = EMAIL ADDRESS REMOVED = > wrote:
> Many thanks for the advice, guys. It should have seemed obvious that a
> required indicator needs to go inside the field label - I guess this
> highlights the need not to become hidebound.

Just came across this little snippet today about reversing 'required'
and marking as 'optional'

Quite like the idea - depending on the amount of 'optional/required' fields

http://www.ixda.org/discuss.php?post=32161

ben
--
Ben Morrison