E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 9 (In chronological order)

From: David Ashleydale
Date: Wed, Apr 01 2009 12:20PM
Subject: Showing / Hiding a Layer
No previous message | Next message →

Have any of you come across a good, accessible example of hiding and showing
a layer on a web page?

I'm trying to implement this type of behavior: a link that a user can hover
their mouse over or click to show a layer on top of the page that displays
info about the link. For example, the text of a link says "amortization". If
a user wants to get a definition of the word "amortization", they can hover
their mouse over it or click on it. When they do so, a box appears near the
link that says, "The process of paying off a debt, together with interest,
usually with equal payments at regular intervals over a period of time."

The box goes away when the user uses their mouse to move the cursor off the
link, or when they click a "close" link inside the box.

Has anyone managed to do this in an accessible way?

Thanks,
David Ashleydale

From: dean@bushidodesigns.net
Date: Wed, Apr 01 2009 12:30PM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

I built one not long ago you can check out here:

http://bushidodesigns.net/tooltips/

> -------- Original Message --------
> Subject: [WebAIM] Showing / Hiding a Layer
> From: David Ashleydale < = EMAIL ADDRESS REMOVED = >
> Date: Wed, April 01, 2009 11:17 am
> To: = EMAIL ADDRESS REMOVED =
>
>
> Have any of you come across a good, accessible example of hiding and showing
> a layer on a web page?
>
> I'm trying to implement this type of behavior: a link that a user can hover
> their mouse over or click to show a layer on top of the page that displays
> info about the link. For example, the text of a link says "amortization". If
> a user wants to get a definition of the word "amortization", they can hover
> their mouse over it or click on it. When they do so, a box appears near the
> link that says, "The process of paying off a debt, together with interest,
> usually with equal payments at regular intervals over a period of time."
>
> The box goes away when the user uses their mouse to move the cursor off the
> link, or when they click a "close" link inside the box.
>
> Has anyone managed to do this in an accessible way?
>
> Thanks,
> David Ashleydale
>

From: Steve Robillard
Date: Wed, Apr 01 2009 1:45PM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

Google juicystudio(s) jez lemon did something along these lines for a help
display

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, April 01, 2009 2:29 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Showing / Hiding a Layer

I built one not long ago you can check out here:

http://bushidodesigns.net/tooltips/

> -------- Original Message --------
> Subject: [WebAIM] Showing / Hiding a Layer
> From: David Ashleydale < = EMAIL ADDRESS REMOVED = >
> Date: Wed, April 01, 2009 11:17 am
> To: = EMAIL ADDRESS REMOVED =
>
>
> Have any of you come across a good, accessible example of hiding and
> showing a layer on a web page?
>
> I'm trying to implement this type of behavior: a link that a user can
> hover their mouse over or click to show a layer on top of the page
> that displays info about the link. For example, the text of a link
> says "amortization". If a user wants to get a definition of the word
> "amortization", they can hover their mouse over it or click on it.
> When they do so, a box appears near the link that says, "The process
> of paying off a debt, together with interest, usually with equal payments
at regular intervals over a period of time."
>
> The box goes away when the user uses their mouse to move the cursor
> off the link, or when they click a "close" link inside the box.
>
> Has anyone managed to do this in an accessible way?
>
> Thanks,
> David Ashleydale
>

From: David Ashleydale
Date: Wed, Apr 01 2009 4:30PM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

Hi Dean,

Thanks for the example. I have a couple of questions about it, though. I
listened to it with JAWS 10 and IE 6.

- JAWS read both of the Help icons as "What is this?" Shouldn't two links
that do different things have different content? It seems like the first one
should say, "What is a SuperFilter?" and the second one should say, "What
are Personal Preferences?"
- When I clicked Enter on the Help icon next to the SuperFilter link, the
layer opened up fine. But when I asked JAWS to continue reading the page, it
read the Personal Preferences link text and then its Help icon after that.
It didn't read the SuperFilter help text until I got to the end of the page.
I would expect JAWS to read the SuperFilter help as the very next thing
after I click on the SuperFilter help icon.
- When I ask JAWS to just read the entire page to me, it reads all of the
help text at the end even though none of it is visible. I believe a better
solution would be one in which the help text is only read when the user asks
for it. This is the solution we have chosen for users that can see -- they
only have to see the help text when they ask for it. I believe non-sighted
users should have the same experience.

Thanks,
David Ashleydale

From: Angela Colter
Date: Thu, Apr 02 2009 7:15AM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

I think http://dtvanswers.com/dtv_what.html is a nice example.

Uses javascript to hide the answers. If you don't have javascript (or CSS)
enabled the answer is automatically displayed.

Works nicely for Lynx and (I think) screen readers.

Angela

On Wed, Apr 1, 2009 at 2:17 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = >wrote:

> Have any of you come across a good, accessible example of hiding and
> showing
> a layer on a web page?
>
> I'm trying to implement this type of behavior: a link that a user can hover
> their mouse over or click to show a layer on top of the page that displays
> info about the link. For example, the text of a link says "amortization".
> If
> a user wants to get a definition of the word "amortization", they can hover
> their mouse over it or click on it. When they do so, a box appears near the
> link that says, "The process of paying off a debt, together with interest,
> usually with equal payments at regular intervals over a period of time."
>
> The box goes away when the user uses their mouse to move the cursor off the
> link, or when they click a "close" link inside the box.
>
> Has anyone managed to do this in an accessible way?
>
> Thanks,
> David Ashleydale
>

From: Dean Hamack
Date: Thu, Apr 02 2009 9:45AM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

Hi David, responses inline:

> - JAWS read both of the Help icons as "What is this?" Shouldn't two links
> that do different things have different content? It seems like the first
> one
> should say, "What is a SuperFilter?" and the second one should say, "What
> are Personal Preferences?"

You're probably right. Good tip.

> - When I clicked Enter on the Help icon next to the SuperFilter link, the
> layer opened up fine. But when I asked JAWS to continue reading the page,
> it
> read the Personal Preferences link text and then its Help icon after that.

If you look at the source code, you will see why. The links are anchors that
jump to footnotes at the bottom of the page. You jumped to the first term's
definition at the bottom, and then back to the term. Then you just continued
reading everything else, including the next term's definition at the end.

> - When I ask JAWS to just read the entire page to me, it reads all of the
> help text at the end even though none of it is visible. I believe a better
> solution would be one in which the help text is only read when the user
> asks
> for it.

The problem with that method is that it won't work for people without
javascript enabled. I've done some research lately that indicates the number
of people who fall into this category is a lot lower than we've been
thinking. But it's still higher than the number of blind people surfing the
web. So I believe this is the lesser of two evils.

Dean Hamack
Lead Web Developer
Bushido Designs
Tel:(206)523-6705
www.bushidodesigns.net

From: Al Sparber
Date: Thu, Apr 02 2009 10:00AM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

http://www.projectseven.com/products/tools/accordion2/accessible/jaws-test/

Works for JAWS and with script disabled.

--
Al Sparber - PVII
http://www.projectseven.com

From: Jared Smith
Date: Thu, Apr 02 2009 10:20AM
Subject: Re: Showing / Hiding a Layer
← Previous message | Next message →

On Thu, Apr 2, 2009 at 7:14 AM, Angela Colter < = EMAIL ADDRESS REMOVED = > wrote:
> I think http://dtvanswers.com/dtv_what.html is a nice example.

Another case where the links are not keyboard accessible. You can't
even tab to the 'links' to open the new layers - they're not really
links at all, they're just blue text that looks like links. So no,
this one won't pass muster either, though the fix is quite easy.

Here's what I see as requirements for such a system (assuming this is
the popup-type dialog that the user can open and close):

1. The new content must be hidden from screen reader users until it is
activated. This means hidden with display:none or not part of the page
at all.

2. The link/button that activates the new layer (I use the term
"layer" very loosely) must be keyboard accessible. Optimally, it would
go to a new page or perhaps open a pop-up window with the new
information if javascript is disabled.

3. When the link/button is activated, the new layer must be revealed
or created. The problem here is that the link doesn't function as a
true link which goes to another page. A screen reader user likely has
no indication that anything has happened. This can be partially
resolved by then setting focus to the beginning of the new layer.

Optimally, this layer will be revealed or created within the natural
flow of the page (meaning immediately after the link used to open it).
If a screen reader user tabs or reads past the content of the layer,
they should continue on in the document without skipping information.
It may be advisable to have the new layer automatically close if the
user tabs past the new layer.

Alternatively, you could make the layer a modal dialog and trap the
user within the new layer until they specifically close it. This may
be optimal because it clearly differentiates the new/pop-up content
from the rest of the page. But it does require a manual process to
close it (which is what sighted users have to do).

4. The link to close the new layer must be keyboard accessible.

5. When the user closes the layer, it's vital that focus be moved out
of the layer *BEFORE* it is hidden or destroyed. This is vital because
if the element that currently has focus disappears, screen readers
enter what I affectionately call "freak out mode". They typically will
then begin reading at the beginning of the page. Focus should be set
back to the link that opened the layer or perhaps to the next logical
element after that link.


I'll try to put together a demo of how I see this all working
together. Additionally, ARIA alertdialog is a great way to do this in
an accessible way. For a demo, check
http://developer.yahoo.com/yui/examples/container/container-ariaplugin_clean.html
(Note that Examples 2 and 3 provide everything outlined above, except
the close button does not work with the keyboard.)

Jared Smith
WebAIM

From: dean@bushidodesigns.net
Date: Thu, Apr 02 2009 11:25AM
Subject: Re: Showing / Hiding a Layer
← Previous message | No next message

> From: Jared Smith < = EMAIL ADDRESS REMOVED = >

> Additionally, ARIA alertdialog is a great way to do this in
> an accessible way. For a demo, check
> http://developer.yahoo.com/yui/examples/container/container-ariaplugin_clean.html
> (Note that Examples 2 and 3 provide everything outlined above, except
> the close button does not work with the keyboard.)

This example is hardly accessible. There are no fieldsets or legends,
the user without javascript sees both forms at the same time, and there
is no confirmation.

Sorry folks, you will never convince me that a page which makes
absolutely no sense to a sighted user without javascript is
"accessible".