E-mail List Archives
Thread: Adding a label to search box
Number of posts in this thread: 36 (In chronological order)
From: Emma Duke-Williams
Date: Tue, Apr 11 2006 9:00AM
Subject: Adding a label to search box
No previous message | Next message →
Hi
I've got a blog athttp://www.tech.port.ac.uk/staffweb/duke-wie/blog/
and thought I ought to check it for accessibility. There was one thing
that it failed on, viz the lack of label for the search box. Following
the notes on http://www.webaim.org/techniques/forms/4.php#input I've
tried to add a label. (As there's only 1 box & so the button gives
information for those that can see it, I figured that the best thing
to do would be to add the label, check it validated, then hide the
label).
The code to generate the form is:
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>"
name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
(Hope that comes out OK - gmail doesn't seem to have preview button!)
I wasn't entirely sure if it was "s" or "searchform" that needed the
label; whichever I put it ahead of though, I got an extra error - i.e
the form still didn't have a label, and I also then had a label
without a form!
Does anyone have any suggestions as to what I might do to get that to
have a label (pref hidden, so that it's not too visually cluttered.
There are a couple of other alerts - mostly for the JavaScript that
puts the "Feed2Podcast" buttons on the page, but in fact they are so
naff that I'll probably remove them anyway.
Thanks in advance for your help.
Emma
--
Blog: http://www.tech.port.ac.uk/staffweb/duke-wie/blog/
From: Helen A
Date: Tue, Apr 11 2006 10:00AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
At 15:55 11/04/2006,Emma Duke-Williams wrote:
>Hi
>I've got a blog athttp://www.tech.port.ac.uk/staffweb/duke-wie/blog/
>and thought I ought to check it for accessibility. There was one thing
>that it failed on, viz the lack of label for the search box. Following
>the notes on http://www.webaim.org/techniques/forms/4.php#input I've
>tried to add a label. (As there's only 1 box & so the button gives
>information for those that can see it, I figured that the best thing
>to do would be to add the label, check it validated, then hide the
>label).
>
>The code to generate the form is:
><form method="get" id="searchform" action="<?php echo
>$_SERVER['PHP_SELF']; ?>">
><div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>"
>name="s" id="s" />
><input type="submit" id="searchsubmit" value="Search" />
></div>
></form>
>
>(Hope that comes out OK - gmail doesn't seem to have preview button!)
>
>I wasn't entirely sure if it was "s" or "searchform" that needed the
>label; whichever I put it ahead of though, I got an extra error - i.e
>the form still didn't have a label, and I also then had a label
>without a form!
Hi Emma,
Apart from the fact that when I preview the following:
<input type="text" value="<?php echo wp_specialchars($s, 1);
?>"name="s" id="s" /> I get the first 15 characters of the value I am
as bemused as you are as I thought Submit / Reset / Clear buttons
dont need labels. I'm assuming that your Search button performs in
the same way as a Submit button.
Helen
--
Why doesn't life come with an Undo button?
www.livingwithwheels.co.uk
From: Helen A
Date: Tue, Apr 11 2006 10:10AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
At 16:51 11/04/2006, Peter Weil wrote:
>Emma,
>It's the input box that needs the label. You can add something like
>this:
><div>
><label for="s">Search this Site</label>
><input type="text" name="s" id="s" />
><input type="submit" id="searchsubmit" value="Go!" /
></div>
>
>You can place the label just above the search box, or "hide" it
>with CSS if you prefer.
>Hope this helps,
>Peter
Thank you Peter!
--
Why doesn't life come with an Undo button?
www.livingwithwheels.co.uk
From: Peter Weil
Date: Tue, Apr 11 2006 10:20AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Emma,
It's the input box that needs the label. You can add something like
this:
<div>
<label for="s">Search this Site</label>
<input type="text" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go!" /
</div>
You can place the label just above the search box, or "hide" it with
CSS if you prefer.
Hope this helps,
Peter
--
Peter Weil, Web Developer
University Communications
University of Wisconsin-Madison
Phone: 608-262-6538
Email: = EMAIL ADDRESS REMOVED =
On Apr 11, 2006, at 9:55 AM, Emma Duke-Williams wrote:
> Hi
> I've got a blog athttp://www.tech.port.ac.uk/staffweb/duke-wie/blog/
> and thought I ought to check it for accessibility. There was one thing
> that it failed on, viz the lack of label for the search box. Following
> the notes on http://www.webaim.org/techniques/forms/4.php#input I've
> tried to add a label. (As there's only 1 box & so the button gives
> information for those that can see it, I figured that the best thing
> to do would be to add the label, check it validated, then hide the
> label).
>
> The code to generate the form is:
> <form method="get" id="searchform" action="<?php echo $_SERVER
> ['PHP_SELF']; ?>">
> <div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>"
> name="s" id="s" />
> <input type="submit" id="searchsubmit" value="Search" />
> </div>
> </form>
>
> (Hope that comes out OK - gmail doesn't seem to have preview button!)
>
> I wasn't entirely sure if it was "s" or "searchform" that needed the
> label; whichever I put it ahead of though, I got an extra error - i.e
> the form still didn't have a label, and I also then had a label
> without a form!
>
> Does anyone have any suggestions as to what I might do to get that to
> have a label (pref hidden, so that it's not too visually cluttered.
>
> There are a couple of other alerts - mostly for the JavaScript that
> puts the "Feed2Podcast" buttons on the page, but in fact they are so
> naff that I'll probably remove them anyway.
From: Redazione non solo cms
Date: Tue, Apr 11 2006 10:30AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Peter Weil wrote:
> Emma,
>
> It's the input box that needs the label. You can add something like this:
>
> <div>
> <label for="s">Search this Site</label>
> <input type="text" name="s" id="s" />
> <input type="submit" id="searchsubmit" value="Go!" /
> </div>
Hi all, I had a similar "problem" for my blog site (using Wordpress just
like Emma)
and I added this html code:
<!-- BEGIN: search field -->
<fieldset id="search">
<label class="hidden" for="searchbutton">cerca</label>
<input id="searchbutton" type="image" src="http://www.duechiacchiere.it/wp-content/themes/duechiacchiere/img/icon_search.gif" name="submit" value="cerca" />
<label class="hidden" for="s">cerca:</label>
<input id="s" class="searchtext" type="text" name="s" size="13" value="cerca..."
onblur="if(this.value==') this.value='cerca...'; document.getElementById('s').style.backgroundColor = '#d6ccbf';"
onfocus="if(this.value=='cerca...') this.value='; document.getElementById('s').style.backgroundColor = '#fff';"
tabindex="10" />
</fieldset>
<!-- END: search field -->
http://www.duechiacchiere.it/
Is it correct?
Thanks in advance,
coolmann.
From: Kynn Bartlett
Date: Tue, Apr 11 2006 12:50PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Hmmm, darn, on further reflection, I think you can't put <label> in
<button>. Alas!
On 4/11/06, Kynn Bartlett < = EMAIL ADDRESS REMOVED = > wrote:
> Here's an even cooler way to do it [...]
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Kynn Bartlett
Date: Tue, Apr 11 2006 1:00PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
On 4/11/06, Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:
> It's the input box that needs the label. You can add something like
> this:
>
> <div>
> <label for="s">Search this Site</label>
> <input type="text" name="s" id="s" />
> <input type="submit" id="searchsubmit" value="Go!" /
> </div>
>
> You can place the label just above the search box, or "hide" it with
> CSS if you prefer.
Here's an even cooler way to do it that doesn't involve extraneous
content that has to be hid with CSS:
<form>
<input type="text" id="searchbox">
<button type="submit">
<label for="searchbox">Search</label>
</button>
</form>
Enjoy!
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Jim Thatcher
Date: Tue, Apr 11 2006 1:10PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
Hi Emma,
This is a perfect example of where the title attribute on the input element
is needed, when information is available to sighted users, and not available
to a screen reader user, commonly when the 2-dimensional view provides
context - or when the prompting information is spread out.
Use title="search text" on the input element.
It is a no-brainer - no need to hide text and the title is supported by
screen readers.
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Jon Gunderson
Date: Tue, Apr 11 2006 1:20PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Emma,
The way to hide the label is to use CSS "position: absolute"
property in conjunction with the "top" and "left" CSS
properties, DON'T use "display: none" since this will hide the
content from screen readers.
Updated example:
<div>
<label for="s" style="position: absolute; top: -20em; left: -
200em">Search Text</label>
<input type="text" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" /
</div>
Jon
Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)
Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313
E-mail: = EMAIL ADDRESS REMOVED =
WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/
From: Andrew Kirkpatrick
Date: Tue, Apr 11 2006 1:30PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
> properties, DON'T use "display: none" since this will hide
> the content from screen readers.
This is true only in theory. In practice there is a much less
desireable mix of results. Sometimes the labels are hidden when using
display:none, sometimes not. Details on my test page at:
http://webaccessibility.info/lab/displaytest.html
AWK
From: Kynn Bartlett
Date: Tue, Apr 11 2006 1:40PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
On 4/11/06, Jon Gunderson < = EMAIL ADDRESS REMOVED = > wrote:
> I am not sure that the CSS hidding technique should be
> considered an "ugly hack".
It's a use of standard CSS in a way which isn't intended purely to get
around a limitation in current user agents. So, it's a hack. I happen
to think it's pretty ugly, when it comes down to it.
You're not really wanting to position the element over THERE (Kynn
points offscreen) some arbitrary number of negative pixels. You're
wanting display to be properly supported with media rules. You can't
get that now, so positioning something way off in space seems to work
with today's browsers and screenreaders. But it's generally a bad
idea to use these kinds of hacks.
> If someone disables CSS to apply
> like their own high contrast stylesheet it is nice to have the
> form controls labeled.
That's beside the point, though. I am not calling the concept an "ugly
hack" (although see the next paragraph), but rather the way that is
currently being chose to implement it via positioning.
I am still of the opinion that there's no real good reason to make
these form labels hidden in the first place. I think that it is a
benefit in usability to everyone to have explicit, non-hidden labels
which are visible to all users, not just those with particular
2006-era screenreaders or who choose to disable style sheets.
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Jon Gunderson
Date: Tue, Apr 11 2006 1:50PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Kynn,
I agree with you. Why are we hidding labels? the only reason
is that some developers or managers of developers don't want
them on a graphical rendering.
Jon
---- Original message ----
>Date: Tue, 11 Apr 2006 12:22:46 -0700
>From: "Kynn Bartlett" < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Adding a label to search box
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>On 4/11/06, Jon Gunderson < = EMAIL ADDRESS REMOVED = > wrote:
>> I am not sure that the CSS hidding technique should be
>> considered an "ugly hack".
>
>It's a use of standard CSS in a way which isn't intended
purely to get
>around a limitation in current user agents. So, it's a hack.
I happen
>to think it's pretty ugly, when it comes down to it.
>
>You're not really wanting to position the element over THERE
(Kynn
>points offscreen) some arbitrary number of negative pixels.
You're
>wanting display to be properly supported with media rules.
You can't
>get that now, so positioning something way off in space seems
to work
>with today's browsers and screenreaders. But it's generally
a bad
>idea to use these kinds of hacks.
>
>> If someone disables CSS to apply
>> like their own high contrast stylesheet it is nice to have
the
>> form controls labeled.
>
>That's beside the point, though. I am not calling the concept
an "ugly
>hack" (although see the next paragraph), but rather the way
that is
>currently being chose to implement it via positioning.
>
>I am still of the opinion that there's no real good reason to
make
>these form labels hidden in the first place. I think that it
is a
>benefit in usability to everyone to have explicit, non-hidden
labels
>which are visible to all users, not just those with
particular
>2006-era screenreaders or who choose to disable style sheets.
>
>--Kynn
>
>--
>Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
>Writer, Web Developer, Photographer, Game Designer
>Tucson, Arizona
>http://kynn.com
>
>
>
Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)
Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313
E-mail: = EMAIL ADDRESS REMOVED =
WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/
From: Kynn Bartlett
Date: Tue, Apr 11 2006 2:00PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Aha! Here we go:
<form>
<input type="text" id="searchbox">
<label for="searchbox">
<button type="submit">
Search
</button>
</label>
</form>
There we go. <label> can contain <button> (a form control). The rules
for "what is being labeled?" say that if there's a for attribute, that
is used, and if not, then it labels the content. So in this case, the
<label> doesn't label its content, but labels the searchbox. (There's
a possible problem with accesskey and focus on this, though. But the
accesskey spec is really broken anyway.)
Anyway, this probably won't do anything useful in browsers and
screenreaders, since nobody but me writes code like this. The whole
"hiding it with CSS off the page" thing probably works, but it's a
ugly hack. I say just make the label visible, myself. Why you wanna
hide the label?
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Jon Gunderson
Date: Tue, Apr 11 2006 2:10PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
I am not sure that the CSS hidding technique should be
considered an "ugly hack". If someone disables CSS to apply
like their own high contrast stylesheet it is nice to have the
form controls labeled.
Jon
---- Original message ----
>Date: Tue, 11 Apr 2006 12:00:30 -0700
>From: "Kynn Bartlett" < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Adding a label to search box
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>Aha! Here we go:
>
><form>
> <input type="text" id="searchbox">
> <label for="searchbox">
> <button type="submit">
> Search
> </button>
> </label>
></form>
>
>There we go. <label> can contain <button> (a form control).
The rules
>for "what is being labeled?" say that if there's a for
attribute, that
>is used, and if not, then it labels the content. So in this
case, the
><label> doesn't label its content, but labels the searchbox.
(There's
>a possible problem with accesskey and focus on this, though.
But the
>accesskey spec is really broken anyway.)
>
>Anyway, this probably won't do anything useful in browsers
and
>screenreaders, since nobody but me writes code like this. The
whole
>"hiding it with CSS off the page" thing probably works, but
it's a
>ugly hack. I say just make the label visible, myself. Why you
wanna
>hide the label?
>
>--Kynn
>
>--
>Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
>Writer, Web Developer, Photographer, Game Designer
>Tucson, Arizona
>http://kynn.com
>
>
>
Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)
Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313
E-mail: = EMAIL ADDRESS REMOVED =
WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/
From: Christian Heilmann
Date: Wed, Apr 12 2006 2:40AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
> >> Use title="search text" on the input element.
> >>
> >> It is a no-brainer - no need to hide text and the title is supported by
> >> screen readers.
> But can that be relied on? Isn't it true, that many screen readers (well JAWS anyway), may not
> read out the contents of the title attribute at all (depending on the users verbosity settings).
> Isn't title supposed to be for *additional* information?
> I would use it myself BTW , but not in isolation and certainly not sans <label>, for explicit field/button association.
You're right, the title solution is just not safe. The label should do
two things: It should explain what the connected form field is and it
should connect the two. Titles can and are in a lot of cases turned
off, you cannot rely on them. Another cool benefit of labels is that
they focus the element the label is associated with when you click
them. This makes them dead handy with checkboxes, as users get a
larger area to click on. What is so wrong about writing next to a form
element what you are supposed to enter in it?
From: Joshue O Connor
Date: Wed, Apr 12 2006 2:50AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
> Another cool benefit of labels is that
> they focus the element the label is associated with when you click
> them. This makes them dead handy with checkboxes, as users get a
> larger area to click on.
Yes, thats right, and this improves the navigability of a complex form
for a screen reader user. So <label> rocks, to use the vernacular.
Josh
Christian Heilmann wrote:
>>>>Use title="search text" on the input element.
>>>>
>>>>It is a no-brainer - no need to hide text and the title is supported by
>>>>screen readers.
>
>
>>But can that be relied on? Isn't it true, that many screen readers (well JAWS anyway), may not
>>read out the contents of the title attribute at all (depending on the users verbosity settings).
>>Isn't title supposed to be for *additional* information?
>>I would use it myself BTW , but not in isolation and certainly not sans <label>, for explicit field/button association.
>
>
> You're right, the title solution is just not safe. The label should do
> two things: It should explain what the connected form field is and it
> should connect the two. Titles can and are in a lot of cases turned
> off, you cannot rely on them. Another cool benefit of labels is that
> they focus the element the label is associated with when you click
> them. This makes them dead handy with checkboxes, as users get a
> larger area to click on. What is so wrong about writing next to a form
> element what you are supposed to enter in it?
>
>
>
>
>
From: Patrick Lauke
Date: Wed, Apr 12 2006 3:00AM
Subject: RE: Adding a label to search box
← Previous message | Next message →
> Christian Heilmann
> What is so wrong about writing next to a form
> element what you are supposed to enter in it?
I think it's a case for certain common patterns, such as simple
search forms displayed in the top-right of a page, where it's
assumed that (sighted) users know already (from past experience,
and because the actual submit button next to the text input already
says "search") what the input is for, and adding a further explicit
label adds more information clutter to the page than necessary.
P
________________________________
Patrick H. Lauke
Web Editor / University of Salford
http://www.salford.ac.uk
________________________________
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
________________________________
From: Emma Duke-Williams
Date: Wed, Apr 12 2006 3:10AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Many thanks for all the answers!
Peter: Putting in the label for "s" was one of the things that I
tried, but though that did put the label in, it also generated an
extra error from WAVE - one telling me that I'd not got a label for a
form, and one telling me that I'd got a label that wasn't needed...
Your idea of putting "Go" in the button though is good, cos then it
doesn't look silly having search before & after the box, which is what
I didn't really want.
Redazione -
I'll have a look at your code - since you did get it working with
WordPress -was it WP 2.0.2 - or another one?
Kynn,
I can see the point of not wanting to hide labels (and I've no idea
what putting something off the screen would do to a PDA, as it has a
few problems anyway - that's another task though! However, when
there's only one box to fill in, and, to be honest, one I'd expect
very few people to even bother using, if other people use my blog as I
use theirs! [Many blogs don't have a search box, I really put that one
in for me to find old posts that I'd remember making, but the
categories didn't help!]
Another query ...
http://www.spyjacked.co.uk/forum/ has got some text pre-filled in -
using the value tag. Would that work? Then I could have "Search
Site... " in there (which is what I wanted the label to say), but it
wouldn't look cluttered - and, as I say, I'd be surprised if *anyone*
uses the search box anyway.
Emma
From: Joshue O Connor
Date: Wed, Apr 12 2006 3:20AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Jim said:
>> Use title="search text" on the input element.
>>
>> It is a no-brainer - no need to hide text and the title is supported by
>> screen readers.
But can that be relied on? Isn't it true, that many screen readers (well JAWS anyway), may not
read out the contents of the title attribute at all (depending on the users verbosity settings).
Isn't title supposed to be for *additional* information?
I would use it myself BTW , but not in isolation and certainly not sans <label>, for explicit field/button association.
Josh
Joshue O Connor
Senior Accessibility Consultant
**Centre for Inclusive Technology (CFIT)* *
National Council for the Blind of Ireland
Website:http://www.cfit.ie
E-Mail: = EMAIL ADDRESS REMOVED = Tel: +353 1 8821915
Jim Thatcher wrote:
> Hi Emma,
>
> This is a perfect example of where the title attribute on the input element
> is needed, when information is available to sighted users, and not available
> to a screen reader user, commonly when the 2-dimensional view provides
> context - or when the prompting information is spread out.
>
> Use title="search text" on the input element.
>
> It is a no-brainer - no need to hide text and the title is supported by
> screen readers.
>
> Jim
>
> Accessibility Consulting: http://jimthatcher.com/
> 512-306-0931
>
>
>
>
>
>
>
>
>
From: Andrew Kirkpatrick
Date: Wed, Apr 12 2006 6:20AM
Subject: RE: Adding a label to search box
← Previous message | Next message →
Christian,
> Titles can and
> are in a lot of cases turned off, you cannot rely on them.
Can you provide a little more info about the instance that you're
thinking of?
AWK
From: Christian Heilmann
Date: Wed, Apr 12 2006 7:30AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
> > Titles can and
> > are in a lot of cases turned off, you cannot rely on them.
>
> Can you provide a little more info about the instance that you're
> thinking of?
It seems that JAWS has title reading off by default, for starters, and
not many people turn it on:
http://www.sf.id.au/WE05/survey.html
More research on that:
http://www.stcsig.org/usability/newsletter/0304-observing.html
http://www.standards-schmandards.com/index.php?2005/01/10/13-browsing-habits
http://www.access-matters.com/2005/10/01/quiz-118-alt-text-or-title-text/
From: Andrew Kirkpatrick
Date: Wed, Apr 12 2006 8:00AM
Subject: RE: Adding a label to search box
← Previous message | Next message →
> It seems that JAWS has title reading off by default, for
> starters, and not many people turn it on:
> http://www.sf.id.au/WE05/survey.html
For form controls this is not true. From this page, one of their
conclusions is:
Most screen reading software can access TITLE attribute content on form
controls by default.
The only AT citing as not using title by default for form elements is
SuperNova 6. This was not my recollection from this AT - can anyone
else confirm?
> More research on that:
> http://www.stcsig.org/usability/newsletter/0304-observing.html
This page doesn't actually have the word title in it. I'm not sure what
you're referring to. In fact, in the linked PDF from their report they
say you can use the title attribute.
> http://www.standards-schmandards.com/index.php?2005/01/10/13-b
rowsing-habits
This talks about the title attribute with regard to links only.
> http://www.access-matters.com/2005/10/01/quiz-118-alt-text-or-
> title-text/
This talks about the title attribute with regard to links only.
I agree about the use a title on other elements, but for inputs and
other form controls I think Jim's advice is solid.
AWK
From: Derek Featherstone
Date: Wed, Apr 12 2006 9:10AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
On 4/12/06, Joshue O Connor wrote:
>Jim said:
>
>>> Use title="search text" on the input element.
>>>
>>> It is a no-brainer - no need to hide text and the title is
>>> supported by screen readers.
>
>But can that be relied on? Isn't it true, that many screen readers
>(well JAWS anyway), may not read out the contents of the title
>attribute at all (depending on the users verbosity settings).
In genera, verbosity settings of screen readers do not impact the title
attribute on form fields. In general, yes, title attributes cannot be
relied upon for their use in normal text mode. Their behaviour is
different though for forms.
When a label is not present, the title attribute *will* be read out by
default (at least in major screen readers[1]).
I'm still a fan of using an actual label, but the use of title sounds to
be quite reliable, and I'd like to see some follow up testing and some
interpretation of the spec so that we know what exactly should be
happening with User Agents.
[1] see Gez Lemon's "Invisible Form Prompts" and the ensuing comments
for discussion:
<http://juicystudio.com/article/invisible-form-prompts.php>;
Cheers,
Derek.
--
Derek Featherstone = EMAIL ADDRESS REMOVED =
tel: 613-599-9784 1-866-932-4878 (toll-free in North America)
Web Development: http://www.furtherahead.com
Personal: http://www.boxofchocolates.ca
From: Joshue O Connor
Date: Wed, Apr 12 2006 10:10AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Derek Featherstone wrote:
> When a label is not present, the title attribute *will* be read out by
> default (at least in major screen readers[1]).
That interesting. I thought it was the verbosity settings that determined
if the title attribute was read out or not; or tweaking the HTML options.
There is an option in JAWS to modify the Form Field prompt given,
so you can choose a "Use both Label and Title if different" as well
as "Use both Label and Alt if Different".
As you probably know, you can tweak JAWS to focus on various code in different
contexts such as when a button has focus. You can choose if the title, or alt text are read etc.
JAWS 5 even has a "On Mouse over tool Tip option" :)
IMO, the JAWS HTML options are almost too much, as many screen readers users don't go near them. Why do screen reader developers expect ordinary people to understand the subtle differences between a title attribute, a label element or an alt tag?
Asking users to "choose" seems a bit rich when most people don't have a clue about developer speak,
and quite rightly associate navigation with sailing.
Josh
Joshue O Connor
Senior Accessibility Consultant
**Centre for Inclusive Technology (CFIT)* *
National Council for the Blind of Ireland
Website:http://www.cfit.ie
E-Mail: = EMAIL ADDRESS REMOVED = Tel: +353 1 8821915
> On 4/12/06, Joshue O Connor wrote:
>
>
>>Jim said:
>>
>>
>>>>Use title="search text" on the input element.
>>>>
>>>>It is a no-brainer - no need to hide text and the title is
>>>>supported by screen readers.
>>
>>But can that be relied on? Isn't it true, that many screen readers
>>(well JAWS anyway), may not read out the contents of the title
>>attribute at all (depending on the users verbosity settings).
>
>
> In genera, verbosity settings of screen readers do not impact the title
> attribute on form fields. In general, yes, title attributes cannot be
> relied upon for their use in normal text mode. Their behaviour is
> different though for forms.
>
> When a label is not present, the title attribute *will* be read out by
> default (at least in major screen readers[1]).
>
> I'm still a fan of using an actual label, but the use of title sounds to
> be quite reliable, and I'd like to see some follow up testing and some
> interpretation of the spec so that we know what exactly should be
> happening with User Agents.
>
> [1] see Gez Lemon's "Invisible Form Prompts" and the ensuing comments
> for discussion:
> <http://juicystudio.com/article/invisible-form-prompts.php>;
>
> Cheers,
> Derek.
From: Jim Thatcher
Date: Wed, Apr 12 2006 8:00PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
> But can that be relied on? Isn't it true, that many screen readers
> (well JAWS anyway), may not
> You're right, the title solution is just not safe.
WRONG! For form controls title is totally reliable. You are transferring the
unreliable behavior of screen readers for titles on links to that for titles
on form controls. You must be more careful in such generalizations. The
title attribute is perfectly reliable with JAWS and with Window-Eyes - and
HPR, by the way.
Jim
http://jimthatcher.com
From: Joshue O Connor
Date: Thu, Apr 13 2006 3:30AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
>> WRONG! For form controls title is totally reliable. You are transferring the
>> unreliable behavior of screen readers for titles on links to that for titles
>> on form controls.
I sure was.
> The
> title attribute is perfectly reliable with JAWS and with Window-Eyes - and
> HPR, by the way.
>
Thanks for that Jim.:)
Josh
Jim Thatcher wrote:
>>But can that be relied on? Isn't it true, that many screen readers
>>(well JAWS anyway), may not
>
>
>>You're right, the title solution is just not safe.
>
>
> WRONG! For form controls title is totally reliable. You are transferring the
> unreliable behavior of screen readers for titles on links to that for titles
> on form controls. You must be more careful in such generalizations. The
> title attribute is perfectly reliable with JAWS and with Window-Eyes - and
> HPR, by the way.
>
> Jim
> http://jimthatcher.com
>
>
>
>
>
>
>
From: Christian Heilmann
Date: Thu, Apr 13 2006 4:00AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
> >> WRONG! For form controls title is totally reliable. You are transferring the
> >> unreliable behavior of screen readers for titles on links to that for titles
> >> on form controls.
> I sure was.
> > The
> > title attribute is perfectly reliable with JAWS and with Window-Eyes - and
> > HPR, by the way.
> Thanks for that Jim.:)
Ah, well, it still is no replacement for a label though. As a user
with perfect eye-sight I wouldn't want to wait for a tooltip to pop up
to tell me what I am to enter at this field.
So for form controls all of the abovementioned user agents do read out
titles by default, or does the user have to turn that on?
From: Kynn Bartlett
Date: Thu, Apr 13 2006 9:00AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
On 4/13/06, Christian Heilmann < = EMAIL ADDRESS REMOVED = > wrote:
> Ah, well, it still is no replacement for a label though. As a user
> with perfect eye-sight I wouldn't want to wait for a tooltip to pop up
> to tell me what I am to enter at this field.
Edit user.css:
input[title]:before {
content: attr(title) ": ";
font-weight: bold;
}
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Jim Thatcher
Date: Thu, Apr 13 2006 9:40AM
Subject: RE: Adding a label to search box
← Previous message | Next message →
> Ah, well, it still is no replacement for a label though.
It certainly IS a replacement when there is no on-screen text to use with
the label element. It trumps adding text and hacking it off screen - in my
opinion.
The label should always be used when on screen prompting text is available
and contiguous. When it is not available or not contiguous, use the title
attribute to specify the prompt for the control.
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Jukka K. Korpela
Date: Thu, Apr 13 2006 10:30AM
Subject: RE: Adding a label to search box
← Previous message | Next message →
On Wed, 12 Apr 2006, Jim Thatcher wrote:
> WRONG! For form controls title is totally reliable.
I'll buy the statement that it is almost totally reliable for commonly
used speech-based browsing technologies.
Now, what about the rest, constituting more than 99 % of users? If some
instructions are needed, the odds are that many people using visual
browsing will need them, too. They often fail to see the title tooltips,
because their browser does not show them (e.g., because the user clicks
on a button so fast that the timing does not make the tooltip appear) or
because they don't expect anything like that and therefore didn't notice
the tooltip.
The point is that the title attribute is useless as an accessibility
measure. It's a "page toy", which you can use for fun and for extra
comfort to some users. Things might be different if some construct like
title attribute had been part of HTML from the beginning, universally
supported and widely known. It wouldn't be called "title", most probably,
because such an element would deserve to be called differently, e.g. as
"info" (information that is optional in the sense that the user needs to
take an action to access it but obligatory in the sense that user agents
must make it available).
In the present situation, the only way to make information accessible is
to make it normal page content, not an attribute value.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Jim Thatcher
Date: Thu, Apr 13 2006 12:40PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
Jukka K. Korpela:
>> WRONG! For form controls title is totally reliable.
> Now, what about the rest, constituting more than 99 % of users?
The title attribute should be used when there is inadequate on screen
information to be grabbed by the label element. The 99% get the infomration
not from the tooltip but some other visual indicators. If that is not true
then obviously the page needs fixing. Typical examples include a text entry
field followied by a "Search" button. The entry field needs title="search".
Other examples are a phone number in three fields with one prompt, a zip
code in two fields with one prompt and radio buttons spanning from stongly
agree to strongly disagree - their position indicating degrees between the
two. All of these are made accessible to someone who cannot see the screen
by adding title attrbutes to the input elements; they are accessible to
someone who can see the screen (you say 99%) independent of the tooltip.
> The point is that the title attribute is useless as an accessibility
> measure. It's a "page toy", which you can use for fun and for extra
> comfort to some users.
Sure is a matter of opinion. And I strongly disagree!
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Jukka K. Korpela
Date: Thu, Apr 13 2006 2:50PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
On Thu, 13 Apr 2006, Jim Thatcher wrote:
> The title attribute should be used when there is inadequate on screen
> information to be grabbed by the label element.
No, in such cases the information should be enhanced.
> The 99% get the infomration
> not from the tooltip but some other visual indicators.
Do they, really?
> Typical examples include a text entry
> field followied by a "Search" button. The entry field needs title="search".
No, the entry field needs a label. (Possible exceptions include a search
page, i.e. a page that only exists to accommodate a search form and is
adequately described that way.)
It is inappropriate to expect that all people automatically recognize a
box followed by a button or an image as a search form. The title="search"
trick just helps you live with the illusion of accessibility. If there is
not enough room for a label, the page has apparently been designed
wrongly.
> Other examples are a phone number in three fields with one prompt, a zip
> code in two fields with one prompt
That's bad usability and bad accessibility, and if title="..." helps you
accept it, then title="..." is bad. For an input item like phone number or
zip code, you should use a single text input field. It should be up to the
processing script, not to the user, to divide the item into pieces if
needed.
> and radio buttons spanning from stongly
> agree to strongly disagree - their position indicating degrees between the
> two.
Now that's something where title attributes may really sound useful, but
is it just an illusion? I think the real problem is that radio buttons
aren't really a good way to set up such menus. Even when people see the
page, they have difficulties in remembering whether "agree" was on the
left or on the right, or to click on the small circle on the right row in
the right column. It's a matter of setting up an online form in a manner
that imitates a paper form, which is itself of questionable design.
Which one is easier (and faster): to select a radio button among, say,
five buttons by clicking on it (or by other means), or to type a digit
from 1 to 5? If the number of alternatives is larger (and it really should
- there should at least be a "no answer" option, and often there should be
finer granulation), the point becomes even more option.
> All of these are made accessible to someone who cannot see the screen
> by adding title attrbutes to the input elements;
Are you sure? You seem to think of the attribute as some kind of magic.
> they are accessible to
> someone who can see the screen (you say 99%) independent of the tooltip.
That's surely not true. Understanding the meaning of an input field that
has no label (which is what this is really about, right?) can be prevented
by many factors, cognitive and other. Many people just fail to see the
connection, even if they see components.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Patrick H. Lauke
Date: Thu, Apr 13 2006 4:20PM
Subject: Re: Adding a label to search box
← Previous message | Next message →
Jukka K. Korpela wrote:
> It is inappropriate to expect that all people automatically recognize a
> box followed by a button or an image as a search form.
But what if the button, immediately following the text input, is clearly
labelled as "search"?
> Now that's something where title attributes may really sound useful, but
> is it just an illusion? I think the real problem is that radio buttons
> aren't really a good way to set up such menus. Even when people see the
> page, they have difficulties in remembering whether "agree" was on the
> left or on the right,
They *may* have difficulties, depending on the length of the form /
number of items the user is asked to rate in this manner.
> Which one is easier (and faster): to select a radio button among, say,
> five buttons by clicking on it (or by other means), or to type a digit
> from 1 to 5?
Personally, if it's a form where the majority of interaction can be done
via mouse, I find radio buttons easier and faster. A dropdown/select may
be a good alternative though.
>> All of these are made accessible to someone who cannot see the screen
>> by adding title attrbutes to the input elements;
>
> Are you sure? You seem to think of the attribute as some kind of magic.
It seems more like a statement of fact to me. Comparing like for like, a
form input without label but with a title attribute (which has been
proven in testing to be announced by screen readers even in default
settings) is certainly more accessible than the same input without label
and without title attribute.
P
--
Patrick H. Lauke
___________
re
From: Joshue O Connor
Date: Fri, Apr 14 2006 3:40AM
Subject: Re: Adding a label to search box
← Previous message | Next message →
> Comparing like for like, a
>> form input without label but with a title attribute (which has been
>> proven in testing to be announced by screen readers even in default
>> settings) is certainly more accessible than the same input without label
>> and without title attribute.
I have been reading through this (interesting) thread and realised that there is a disconnect here.
Probably just in my head but I thought I'd share :)
IMO the title attribute should be treated in a consistent
manner by user agents. How many developers realise that the title attribute when applied
to a link will usually *not* be read out, but *will* be read out when found in a form.
I didn't know this. Its confusing and adds another dimension of difficulty for a budding
developer who is trying to understand how best to serve diverse user requirements that
they will not be familiar with.
In the context of links. the additional information should be applied by an attribute with a different name.
As Jukka suggested "info" of similar makes sense. Doing this would make it easier to distinguish between
the two, and apply them correctly, as needed.
There is also an issue with <label>. In the discussion I found myself wondering:
Are we talking about informative text applied using <label>,
or the application of <label for="foo"> to associate form controls?
Again maybe these elements should have different names to distinguish them and make it
easier to apply them correctly?
One for the HTML list I'm sure.
Josh
Joshue O Connor
Senior Accessibility Consultant
**Centre for Inclusive Technology (CFIT)* *
National Council for the Blind of Ireland
Website:http://www.cfit.ie
E-Mail: = EMAIL ADDRESS REMOVED = Tel: +353 1 8821915
Patrick H. Lauke wrote:
> Jukka K. Korpela wrote:
>
>> It is inappropriate to expect that all people automatically recognize
>> a box followed by a button or an image as a search form.
>
>
> But what if the button, immediately following the text input, is clearly
> labelled as "search"?
>
>> Now that's something where title attributes may really sound useful,
>> but is it just an illusion? I think the real problem is that radio
>> buttons aren't really a good way to set up such menus. Even when
>> people see the page, they have difficulties in remembering whether
>> "agree" was on the left or on the right,
>
>
> They *may* have difficulties, depending on the length of the form /
> number of items the user is asked to rate in this manner.
>
>> Which one is easier (and faster): to select a radio button among, say,
>> five buttons by clicking on it (or by other means), or to type a digit
>> from 1 to 5?
>
>
> Personally, if it's a form where the majority of interaction can be done
> via mouse, I find radio buttons easier and faster. A dropdown/select may
> be a good alternative though.
>
>>> All of these are made accessible to someone who cannot see the screen
>>> by adding title attrbutes to the input elements;
>>
>>
>> Are you sure? You seem to think of the attribute as some kind of magic.
>
>
> It seems more like a statement of fact to me. Comparing like for like, a
> form input without label but with a title attribute (which has been
> proven in testing to be announced by screen readers even in default
> settings) is certainly more accessible than the same input without label
> and without title attribute.
>
> P
From: smithj7
Date: Fri, Apr 14 2006 4:00PM
Subject: RE: Adding a label to search box
← Previous message | Next message →
I have been following this threat with great interest. In my case, I
always try to remember to add a "label for" attribute for forms. Way
back when, Bobby was free, I used it to check my site and if there was
no "label for", I failed. So out of habit, I try to consistently use it.
But, I'm curious, if I used label for and the title attribute on a form,
would a person using speech hear the same text twice?
From: Jim Thatcher
Date: Sat, Apr 15 2006 7:00AM
Subject: RE: Adding a label to search box
← Previous message | No next message
> if I used label for and the title attribute on a form,
> would a person using speech hear the same text twice?
Remember that more is not better. You won't hear the information twice, but
it is not predictable which a given screen reader will announce. So for
maintenance reasons use label when on-screen text is available, title when
it is not and don't use both!
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931