WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: use of CSS z-index property to hide content

for

From: Steven Faulkner
Date: Oct 12, 2004 6:39PM

Another use is when form inputs are presented in a tabular format (see this
form
http://www.nils.org.au/ais/new_forma.html for examples, also any comments on
this form would be appreciated), up until recently I have advocated the use
of the title attribute in this case.

The limitation of the title attribute is that as far as I am aware screen
readers (i have tested on Jaws 4+,HPR 3) that recognise titles, only do so
on "active" elements (links, inputs etc.).


with regards
steve

-----Original Message-----
From: deyalexander [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, 12 October 2004 5:19 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] use of CSS z-index property to hide content



One situation where someone may want to hide form labels that comes to
mind is for a simple search UI, ie, one where the only UI elements are
the input box and the submit button labelled "search". Adding an
additional textual label before the input box is visually redundant,
but being able to add the label for screen reader users would be
useful.

Thanks for posting the method here Steve. It looks promising.

Cheers,
Dey


On Mon, 11 Oct 2004 19:30:22 +1300, tdw wrote:
>
> I've been inclined to use the off-left method, but a negative z-index
> sounds like a good alternative way to hide visual stuff.
>
> I am intrigued by the thread at juicystudio because I think the better
> the labeling of form controls the better the usability for everyone, and
> I can't work out why you would want to hide labels.
>
> I have been experimenting with providing extended instructions and/or
> inline help for forms by rewriting the document to show/hide content
> with a little css and javascript.
>
> I am curious to find out if changes to the structure of the document in
> real time creates a barrier for screen readers (or other assistive
> technologies).
>
> regards
> Terrence Wood.
>
>
>
>
> steven.faulkner wrote:
> > Hi i have been following a discussion at Juicy Studios
> > about invisible form prompts
> > http://www.juicystudio.com/invisible-form-prompts.asp
> > I had a look at this issue myself and found that that the CSS z-index
> > property can be used to place elemnts (e.g. labels) behind other
elements
> > (effectively hiding them from visual display, but still available to
screen
> > readers)
> >
> > code example:
> > <label style="z-index:-1;position:absolute;"
for="poot">poot
> >
> >
> > I have tested the display in various browsers and screen readers and
have
> > found no issues (so far).
> > does any one have any thoughts on this method?
> >
> > with regards
> >
> > Steven Faulkner
> > Web Accessibility Consultant
> > National Information &amp; Library Service (NILS)
> > 454 Glenferrie Road
> > Kooyong Victoria 3144
> > Phone: (613) 9864 9281
> > Fax: (613) 9864 9210
> > Email: <EMAIL REMOVED>
> >
> > National Information Library Service
> > A subsidiary of RBS.RVIB.VAF Ltd.
> >
> > ----
> > To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
> >
>
>
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/