WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: FW: Adding a label to search box

for

From: Jon Gunderson
Date: Apr 18, 2006 7:40AM

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 REMOVED> >
>Subject: Re: FW: [WebAIM] Adding a label to search box
>To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>
>On 4/17/06, Becky Tindle < <EMAIL 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 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 REMOVED>

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/