WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Adding a label to search box

for

From: Jon Gunderson
Date: Apr 11, 2006 1:20PM

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

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