WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hidden Labels

for

From: Keith Parks
Date: Mar 2, 2007 5:10PM

On Mar 2, 2007, at 3:10 PM, Jon Gunderson wrote:

> When you use display: none screen reader usually will not speak the
> content.
>
> Use:
>
> position: absolute; top: -20em; left: -200em;
>
> This css renders the label outside the graphical viewing area.

Just want to point out that this technique, as well as the one from
the WebAIM article, doesn't *necessarily* position the "hidden"
content out of the browser window.

If the absolutely-positioned content is within another relatively-
positioned <div>, then the negative left and vertical positioning
will only be in relation to the containing <div>, not the browser
window. If you have a long page, -200em or -500px may position the
content well within the page window.

So with the WebAIM method...

.hidden
{position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}

...the article spoke of including the 1px x 1px dimension to overcome
browser differences, it seems also helpful in making the content not
visible. Though it still could show up as a stray pixel on top of
something else, depending on your design.

Seems to me, anyway,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444

(619) 594-1046

mailto: <EMAIL REMOVED>
http://www.sdsu.edu
http://www.sa.sdsu.edu/communications
----------------------------------------------------------

(Objects on your screen may be closer than they appear)