E-mail List Archives
Thread: FW: Adding a label to search box
Number of posts in this thread: 14 (In chronological order)
From: Jim Thatcher
Date: Mon, Apr 17 2006 11:40AM
Subject: FW: Adding a label to search box
No previous message | Next message →
Hi Larry,
Larry Hull:
>Accessibility checking tools will for the most part fail a page if
>the label element isn't used for a search box.
I am not sure what "for the most part" means. I tested 6 commercial tools
and three passed the page when the form control had a title attribute
instead of the label. Those that passed were InFocus, Ramp, and WebKing.
Those that failed were Bobby, The Lift Machine and WebXM. There will be more
about these tests on my site shortly.
So half the tools I looked at failed the page if the title was used instead
of the label. I hope and believe that will change in the near future.
IBM uses an invisible image with alt="search for:" enclosed in the label
element; it is my understanding they use this technique instead of title for
just the reason you state.
Larry Hull:
> some sophisticated accessibility checking tools still fail the
> page because the label is empty, i.e., doesn't contain explicit
> on-screen text
In my tests all 6 tools passed the page if the label element contained an
image with non-empty alt-text. So which "sophisticated tools" are you
talking about? I would like to include them at some later time.
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Becky Tindle
Date: Mon, Apr 17 2006 1:00PM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
Hi,
I am unsure what exactly you mean by 'onscreen text' when talking about recent threads of accessibility. I am UK based - maybe this is why I'm unfamiliar with this term in this context - could you explain what you mean when talking about assistive technologies and web sites?
Many thanks,
Becky Tindle
Jim Thatcher < = EMAIL ADDRESS REMOVED = > wrote:
Hi Larry,
Larry Hull:
>Accessibility checking tools will for the most part fail a page if
>the label element isn't used for a search box.
I am not sure what
From: Jim Thatcher
Date: Mon, Apr 17 2006 1:10PM
Subject: RE: FW: Adding a label to search box
← Previous message | Next message →
>what exactly you mean by 'onscreen text'
Text that is visible (and not part of a other control). This isn't a US/UK
thing! Look at IBM.com and sun.com - there is no on-screen text. Compare
http://www.ed.gov/ where there is on-screen text (Search ED.gov).
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Kynn Bartlett
Date: Mon, Apr 17 2006 1:50PM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
On 4/17/06, Becky Tindle < = EMAIL ADDRESS REMOVED = > wrote:
> I am unsure what exactly you mean by 'onscreen text' when talking about
> recent threads of accessibility. I am UK based - maybe this is why I'm
> unfamiliar with this term in this context - could you explain what you mean
> when talking about assistive technologies and web sites?
What Jim said.
Here are some examples:
<form>
<label for="searchbox">Search this site:</label>
<input type="text" id="searchbox">
<input type="submit" value="Go!">
</form>
This is onscreen text. It looks like this:
Search this site: [________________] [ Go! ]
The above is unambiguous for all users, but takes up screen space.
This is problematic for web developers.
Here is another version of a search box:
<form>
<input type="text" id="searchbox">
<input type="submit" value="Search!">
</form>
This is a box without onscreen text. It looks like this:
[_______________] [ Search! ]
This is problematic for users of screenreaders, who hear the input box
without any clue as to what it does.
Here is an approach which puts the label in the HTML for screenreader
users, but hides it from visual users:
<form>
<label for="searchbox" style="position: absolute; left: -999px;
width: 99px;">Search this site:</label>
<input type="text" id="searchbox">
<input type="submit" value="Search!">
</form>
It looks like this:
[_______________] [ Search! ]
And I have proposed the following:
<form>
<input type="text" id="searchbox">
<label for="searchbox">
<button type="submit">
Search!
</button>
</label>
</form>
Which looks like this:
[_______________] [ Search! ]
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Becky Tindle
Date: Mon, Apr 17 2006 2:10PM
Subject: RE: FW: Adding a label to search box
← Previous message | Next message →
Thanks Kynn that's cleared it up for me - I'm used to calling it visible text.
Becky :)
Jim Thatcher < = EMAIL ADDRESS REMOVED = > wrote:
>what exactly you mean by 'onscreen text'
Text that is visible (and not part of a other control). This isn
From: Jon Gunderson
Date: Tue, Apr 18 2006 7:40AM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
When hidding text using the absolute positioning method
people should use EM instead of PX. EM units will change
with the browser font settings. Using PX units can sometimes
result in people seeing the text as font size increases.
Example:
<form>
<label for="searchbox"
style="position: absolute;
left: -200em;
top: -20em;">
Search this site:
</label>
<input type="text" id="searchbox">
<input type="submit" value="Search!">
</form>
Jon
---- Original message ----
>Date: Mon, 17 Apr 2006 12:27:05 -0700
>From: "Kynn Bartlett" < = EMAIL ADDRESS REMOVED = >
>Subject: Re: FW: [WebAIM] Adding a label to search box
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>On 4/17/06, Becky Tindle < = EMAIL ADDRESS REMOVED = > wrote:
>> I am unsure what exactly you mean by 'onscreen text' when
talking about
>> recent threads of accessibility. I am UK based - maybe
this is why I'm
>> unfamiliar with this term in this context - could you
explain what you mean
>> when talking about assistive technologies and web sites?
>
>What Jim said.
>
>Here are some examples:
>
><form>
> <label for="searchbox">Search this site:</label>
> <input type="text" id="searchbox">
> <input type="submit" value="Go!">
></form>
>
>This is onscreen text. It looks like this:
>
>Search this site: [________________] [ Go! ]
>
>The above is unambiguous for all users, but takes up screen
space.
>This is problematic for web developers.
>
>Here is another version of a search box:
>
><form>
> <input type="text" id="searchbox">
> <input type="submit" value="Search!">
></form>
>
>This is a box without onscreen text. It looks like this:
>
>[_______________] [ Search! ]
>
>This is problematic for users of screenreaders, who hear the
input box
>without any clue as to what it does.
>
>Here is an approach which puts the label in the HTML for
screenreader
>users, but hides it from visual users:
>
><form>
> <label for="searchbox" style="position: absolute; left: -
999px;
>width: 99px;">Search this site:</label>
> <input type="text" id="searchbox">
> <input type="submit" value="Search!">
></form>
>
>It looks like this:
>
>[_______________] [ Search! ]
>
>And I have proposed the following:
>
><form>
> <input type="text" id="searchbox">
> <label for="searchbox">
> <button type="submit">
> Search!
> </button>
> </label>
></form>
>
>Which looks like this:
>
>[_______________] [ Search! ]
>
>--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: Hoffman, Allen
Date: Tue, Apr 18 2006 11:00AM
Subject: RE: FW: Adding a label to search box
← Previous message | Next message →
OK this probably is more open ended a question than I should ask, but:
Why do people feel the need to have an edit box for searching without
associate textual visible cues? Are we really that mature of a user
base now that it's so obvious? I know screen real estate is at a
premium when talking with the nontechnical web folks, but really, when
putting up edit boxes isn't visible descriptive text sort of the
foundation for readability? This seems like kind of the everybody knows
what is going on kind of thing, so nobody has to ask--yeah accept the
ones who don't.
Also, (I know IBM would have to answer this), why would IBM feel the
need to use over complicated invisible or transparent image and alt tag
to get the job done when label or title work perfectly fine. Besides,
doesn't using such a method open up potential for invalid page rendering
in some environments. Seems like a blending of the display layer with
the business logic layer somehow. I suppose not blending of display and
logic, but something seems like it is getting blended mixing an
interface elements attributes explicitly with the visual appearance
only.
These discussions are taking place a lot lately, not just on this list,
and it's nice to see that the concepts of making information and data
accessible for people with various disabilities is maturing to reflect
that fact that web accessibility is really for more than the visually
impaired. this has taken some time to sink in, even to those of us in
the business, but i think it really is getting there lately.
Allen Hoffman
________________________________
From: Becky Tindle [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, April 17, 2006 2:54 PM
To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List; = EMAIL ADDRESS REMOVED =
Subject: Re: FW: [WebAIM] Adding a label to search box
Hi,
I am unsure what exactly you mean by 'onscreen text' when talking about
recent threads of accessibility. I am UK based - maybe this is why I'm
unfamiliar with this term in this context - could you explain what you
mean when talking about assistive technologies and web sites?
Many thanks,
Becky Tindle
Jim Thatcher < = EMAIL ADDRESS REMOVED = > wrote:
Hi Larry,
Larry Hull:
>Accessibility checking tools will for the most part fail a page
if
>the label element isn't used for a search box.
I am not sure what "for the most part" means. I tested 6
commercial tools and three passed the page when the form control had a
title attribute instead of the label. Those that passed were InFocus,
Ramp, and WebKing. Those that failed were Bobby, The Lift Machine and
WebXM. There will be more about these tests on my site shortly.
So half the tools I looked at failed the page if the title was
used instead of the label. I hope and believe that will change in the
near future.
IBM uses an invisible image with alt="search for:" enclosed in
the label element; it is my understanding they use this technique
instead of title for just the reason you state.
Larry Hull:
> some sophisticated accessibility checking tools still fail the
> page because the label is empty, i.e., doesn't contain
explicit
> on-screen text
In my tests all 6 tools passed the page if the label element
contained an image with non-empty alt-text. So which "sophisticated
tools" are you talking about? I would like to include them at some later
time.
Jim
Accessibility Consulting: http://jimthatcher.com/
512-306-0931
From: Kynn Bartlett
Date: Tue, Apr 18 2006 11:10AM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
On 4/18/06, Hoffman, Allen < = EMAIL ADDRESS REMOVED = > wrote:
> OK this probably is more open ended a question than I should ask, but:
> Why do people feel the need to have an edit box for searching without
> associate textual visible cues?
Designer-centric web design.
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: Patrick H. Lauke
Date: Tue, Apr 18 2006 2:30PM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
Hoffman, Allen wrote:
> OK this probably is more open ended a question than I should ask, but:
> Why do people feel the need to have an edit box for searching without
> associate textual visible cues?
Is a big submit button immediately next to it reading "Search" not
enough of a visible cue? Has the "input box plus 'search' or 'go' submit
button immediately to the right" not been firmly established for years
now and many major sites?
I'd like to see some counter-argument research showing that this very
particular situation is causing confusion to users.
--
Patrick H. Lauke
___________
re
From: Patrick H. Lauke
Date: Tue, Apr 18 2006 2:40PM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
Kynn Bartlett wrote:
> Designer-centric web design.
Ah, was waiting for the *evil designers* angle. Thanks Kynn :)
--
Patrick H. Lauke
___________
re
From: Kynn Bartlett
Date: Tue, Apr 18 2006 3:10PM
Subject: Re: FW: Adding a label to search box
← Previous message | Next message →
On 4/18/06, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> Kynn Bartlett wrote:
> > Designer-centric web design.
> Ah, was waiting for the *evil designers* angle. Thanks Kynn :)
Did I say "evil designers"?
Are you trying to start a fight? Are you unable to read for
comprehension? Do you know that "designer-centric" doesn't mean
"evil"? What on earth is your problem?
--Kynn
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com
From: smithj7
Date: Tue, Apr 18 2006 6:30PM
Subject: RE: FW: Adding a label to search box - example that confusedreal users
← Previous message | Next message →
At the bottom of all DOE mail the following lengthly text is electronic
linked to a survey of the person who sent the email. Two blind people
that use speech have called be with problems in responding to the
survey. After talking to them, I was sure that they were stuck in the
header files "index list". (Note this is DOE's fixed header.) To me, it
is some what of an example that bad coding can confuse a typical user.
(Note if the link does work and you go to it, and decide to reply to the
survey, provide a stellar response, cause I linked to a real footer to
one of my emails. <all fives and remarkable comments always appreciated>
Text and link starts here:
Please take a few minutes to provide feedback on the quality of service
you received. The Department of Education values your feedback as a
customer. Commissioner John L. Winn is committed to continuously
assessing and improving the level and quality of services provided to
you by Department staff. Simply click on this link to the "DOE Customer
Survey". Thank you in advance for completing the survey.
DOE Customer Survey
http://data.fldoe.org/cs/DOE/default.cfm?staff= = EMAIL ADDRESS REMOVED =
.fl.us|20:12:40%20Tue%2018%20Apr%202006&CFID=475652&CFTOKEN=ed484768da9b
57e1-AF7BB385-65BE-EACA-B4D29DD9B1F18528
From: Hoffman, Allen
Date: Wed, Apr 19 2006 12:40PM
Subject: RE: FW: Adding a label to search box
← Previous message | Next message →
To me this still sounds like the emperors new clothes to me.
A big word near an unlabeled edit box saying "search" doesn't say
"search for this".
it doesn't say "search what for this"
Sometimes being clear with language is worth a thousand visual layouts.
Even if only 0.1% of the audience has a usability problem with something
done as a "standard" visual way, isn't a reason to consider it really
purposefully accessible.
One of many complaints regarding the use of the web and electronic
communications in general is the great drop in the quality of writing.
This is often reflected not just in posts, but in actual web interfaces.
Try putting the box with search near it up for five year olds and see
how many times they have to try it to understand what the visual layout
represents.
convention doesn't mean clarity if not agreed to.
To be honest I'm not even remotely attached to my perspective but I tend
to question "the way it is" all the time. Any time the assumption that
its obvious is made I question if it really is obvious, and if so, to
whom, and to whom it isn't.
I'll leave it alone, but just wanted to raise the questions.
Allen Hoffman
From: Penny Roberts
Date: Thu, Apr 20 2006 9:50AM
Subject: Re: FW: Adding a label to search box
← Previous message | No next message
Hoffman, Allen wrote:
> Try putting the box with search near it up for five year olds and see
> how many times they have to try it to understand what the visual layout
> represents.
I realise that is was just an example so it isn't really fair game but...
I think that the problem there would be to do with the actual concept of
searching. The small amount of extra text afforded by a label wouldn't
help in such a scenario; it would require an explanation of what
searching is, how it works, what is does. So to an extent a certain
amount of understanding of convention (by the user) does have to be
assumed (we don't, for instance, explain on every page what hyperlinks
are and how to use them).
(Incidentally, and possibly interestingly, targeting in on the text box
would be the problem for many of those five year olds as studies have
shown that pre-schoolers have very poor mouse accuracy.)
Penny