E-mail List Archives
Thread: Hidden Labels
Number of posts in this thread: 5 (In chronological order)
From: Kevin Murphy
Date: Fri, Mar 02 2007 3:00PM
Subject: Hidden Labels
No previous message | Next message →
I have a form with a label describing a select, but then I hide the
label with CSS (display: none;) since its pretty obvious what the
select does. It validates fine with the WAVE tool, but was wondering
if any one had any thoughts about this being bad from an
accessibility point of view.
--
Kevin Murphy
Webmaster: Information and Marketing Services
Western Nevada Community College
www.wncc.edu
775-445-3326
--
Kevin Murphy
Webmaster: Information and Marketing Services
Western Nevada Community College
www.wncc.edu
775-445-3326
From: Peter Krantz
Date: Fri, Mar 02 2007 3:10PM
Subject: Re: Hidden Labels
← Previous message | Next message →
Using display: none will effectively hide the label from screen readers too. See
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
for details. If you want to hide it from (most) sighted users you can
position it off screen instead of using display: none.
An example is available here:
http://www.webaim.org/techniques/css/invisiblecontent/
Regards,
Peter
On 3/2/07, Kevin Murphy < = EMAIL ADDRESS REMOVED = > wrote:
> I have a form with a label describing a select, but then I hide the
> label with CSS (display: none;) since its pretty obvious what the
> select does. It validates fine with the WAVE tool, but was wondering
> if any one had any thoughts about this being bad from an
> accessibility point of view.
>
> --
> Kevin Murphy
> Webmaster: Information and Marketing Services
> Western Nevada Community College
> www.wncc.edu
> 775-445-3326
>
>
>
>
> --
> Kevin Murphy
> Webmaster: Information and Marketing Services
> Western Nevada Community College
> www.wncc.edu
> 775-445-3326
>
>
>
From: Christian Heilmann
Date: Fri, Mar 02 2007 3:20PM
Subject: Re: Hidden Labels
← Previous message | Next message →
> I have a form with a label describing a select, but then I hide the
> label with CSS (display: none;) since its pretty obvious what the
> select does. It validates fine with the WAVE tool, but was wondering
> if any one had any thoughts about this being bad from an
> accessibility point of view.
Yes, as hiding with display:none also hides the label from assistive
technology. The idea of a label is that it describes the data, the
idea of a select to offer choices. The description should not be a
choice.
--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
From: Jon Gunderson
Date: Fri, Mar 02 2007 4:20PM
Subject: Re: Hidden Labels
← Previous message | Next message →
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.
Jon
---- Original message ----
>Date: Fri, 2 Mar 2007 13:50:45 -0800
>From: Kevin Murphy < = EMAIL ADDRESS REMOVED = >
>Subject: [WebAIM] Hidden Labels
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>I have a form with a label describing a select, but then I hide the
>label with CSS (display: none;) since its pretty obvious what the
>select does. It validates fine with the WAVE tool, but was wondering
>if any one had any thoughts about this being bad from an
>accessibility point of view.
>
>--
>Kevin Murphy
>Webmaster: Information and Marketing Services
>Western Nevada Community College
>www.wncc.edu
>775-445-3326
>
>
>
>
>--
>Kevin Murphy
>Webmaster: Information and Marketing Services
>Western Nevada Community College
>www.wncc.edu
>775-445-3326
>
>
>
From: Keith Parks
Date: Fri, Mar 02 2007 5:10PM
Subject: Re: Hidden Labels
← Previous message | No next message
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 ADDRESS REMOVED =
http://www.sdsu.edu
http://www.sa.sdsu.edu/communications
----------------------------------------------------------
(Objects on your screen may be closer than they appear)