WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Showing / Hiding a Layer

for

From: Jared Smith
Date: Apr 2, 2009 10:20AM

On Thu, Apr 2, 2009 at 7:14 AM, Angela Colter < <EMAIL 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