E-mail List Archives
Thread: use of CSS z-index property to hide content
Number of posts in this thread: 6 (In chronological order)
From: Steven Faulkner
Date: Sun, Oct 10 2004 11:14PM
Subject: use of CSS z-index property to hide content
No previous message | Next message →
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:
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 & Library Service (NILS)
454 Glenferrie Road
Kooyong Victoria 3144
Phone: (613) 9864 9281
Fax: (613) 9864 9210
Email: = EMAIL ADDRESS REMOVED =
National Information Library Service
A subsidiary of RBS.RVIB.VAF Ltd.
From: Terrence Wood
Date: Mon, Oct 11 2004 12:27AM
Subject: Re: use of CSS z-index property to hide content
← Previous message | Next message →
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:
> 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 & Library Service (NILS)
> 454 Glenferrie Road
> Kooyong Victoria 3144
> Phone: (613) 9864 9281
> Fax: (613) 9864 9210
> Email: = EMAIL ADDRESS REMOVED =
>
> National Information Library Service
> A subsidiary of RBS.RVIB.VAF Ltd.
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
From: Dey Alexander
Date: Tue, Oct 12 2004 1:16AM
Subject: Re: use of CSS z-index property to hide content
← Previous message | Next message →
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:
> > 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 & Library Service (NILS)
> > 454 Glenferrie Road
> > Kooyong Victoria 3144
> > Phone: (613) 9864 9281
> > Fax: (613) 9864 9210
> > Email: = EMAIL ADDRESS 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/
>
>
From: Mike Moore
Date: Tue, Oct 12 2004 9:07AM
Subject: Re: use of CSS z-index property to hide content
← Previous message | Next message →
The only drawbacks to this method that I have seen are a few mentions on
this discussion list that these methods may result in lower search engine
ratings. This seems to be more prevalent with methods that make the label
the same color as the background, move it off of the page, or reduce the
size of the label to a single pixel. Search engines don't like hidden
content because it has been used to attempt to manipulate search engines. I
haven't seen or tested anything that uses layered divs - sounds like a good
idea. Personally I am still using the title attribute on fields where I
cannot use a label. The classic examples are multiple text boxes for
telephone number entry or in the US for social security number entry. To
get around the problems on telephone numbers I now just use a single box and
then support it with backend processing to get the number into the format
that I desire. Of course that doesn't help if they don't provide all of the
numbers.
Mike
-----Original Message-----
From: steven.faulkner [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, October 11, 2004 12:16 AM
To: WebAIM Discussion List
Subject: [WebAIM] use of CSS z-index property to hide content
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:
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 & Library Service (NILS)
454 Glenferrie Road
Kooyong Victoria 3144
Phone: (613) 9864 9281
Fax: (613) 9864 9210
Email: = EMAIL ADDRESS REMOVED =
National Information Library Service
A subsidiary of RBS.RVIB.VAF Ltd.
----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
From: Steven Faulkner
Date: Tue, Oct 12 2004 6:39PM
Subject: Re: use of CSS z-index property to hide content
← Previous message | Next message →
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 ADDRESS 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 & Library Service (NILS)
> > 454 Glenferrie Road
> > Kooyong Victoria 3144
> > Phone: (613) 9864 9281
> > Fax: (613) 9864 9210
> > Email: = EMAIL ADDRESS 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/
From: Terrence Wood
Date: Thu, Oct 14 2004 12:38AM
Subject: Re: use of CSS z-index property to hide content
← Previous message | No next message
This form looks like a presentational replication of a paper form (e.g.
field for manager signature), and seems overly complicated. There are 82
inputs and 31 selects.
You have yes/no options markup up as checkboxes which allows sumission
of the form with both options selected -- it would be better to use
radio's for these type of fields.
I'm sure the form could be simplifed to remove some redundancy, unless
it is expected that application is made for every type of leave
avaliable in a given year all at once, or the final destination is a
print out and not a database.
Nice use of fieldsets, and the instructions seem clear.
../tdw
steven.faulkner wrote:
> 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