Modals / Light boxes and ARIA

[Rani Einav]

Hi
I'm looking for ways to make modals / light box elements accessible with
or without ARIA.
Can someone direct me to a link that deals with these issues?

Some light boxes: http://www.ajaxrain.com/tagcloud.php?tag=lightbox

Thanks
Rani

[Aaron Leventhal]

Put role="dialog" on the containing element of the dialog/lightbox
before it appears. Also make sure focus goes to a control in the dialog
when it appears.

If you want the full text of any prompt in the dialog to be
automatically spoken as it appears, then use role="alertdialog" instead.
This is especially useful for things like confirmation prompts.

- Aaron

[Aaron Leventhal]

Also, make sure that users can close the dialog/box with the keyboard,
with a button that can be tabbed to, or a key like Escape, or both.

- Aaron

[James Teh]

On 6/01/2009 7:58 AM, Aaron Leventhal wrote:
> If you want the full text of any prompt in the dialog to be
> automatically spoken as it appears, then use role="alertdialog" instead.
> This is especially useful for things like confirmation prompts.

I've been meaning to ask about alertdialog for a while. I don't really
follow why an alertdialog is special as compared with a dialog. Most
screen readers already read the text of a dialog (i.e. not all controls,
only static text, labels, etc.) when it gets focus. This is necessary
because standard Windows message boxes also need to be read like this.
Therefore, authors could just use dialog. (Currently, NVDA treats dialog
and alertdialog as being the same.)

If all focusable descendants of an alertdialog should be read in
addition to its text (as is done for alerts), then an alertdialog with
OK and Cancel buttons would also read the Cancel button even if the OK
button was focused, which is non-standard behaviour.

Also, if I recall correctly, Firefox gives alertdialogs a role of alert,
which has always seemed strange/incorrect to me. It is a dialog, not an
alert - an alert doesn't get focus automatically. Giving it a role of
alert causes screen readers to say "alert", which means the user may not
realise that it has gained focus. Is my understanding incorrect?

--
James Teh
Email/MSN Messenger/Jabber: ja...@jantrid.net
Web site: http://www.jantrid.net/

[Aaron Leventhal]

Take the file dialog or preference dialogs -- would you want to read the
whole thing when it comes up?

Since there is no alertdialog role in IA2, we use the role of alert to
indicate the whole container should be read when shown. However, it's
possible to get the raw ARIA role via the xml-roles object attribute. I
suppose we should have a role in IA2 for it.

- Aaron

[James Teh]

On 6/01/2009 10:24 AM, Aaron Leventhal wrote:
> Take the file dialog or preference dialogs -- would you want to read the
> whole thing when it comes up?

No. However, these dialogs have no caption text in them, so nothing is
read. Only the caption text is read; most screen readers (including
NVDA) have logic to find the caption text. Admitedly, this can be
inaccurate in some cases. However, reading all descendants when a dialog
appears is never done as far as I know.

As an interesting sidenote, we used to read all descendants for alert
events. However, we don't do this anymore because in Firefox's case,
there are duplicates - the leaf text nodes contain the same text as
their parents - so we were getting double speaking. Therefore, reading
all descendants actually isn't an option for Firefox without
special-case, hacky logic.

> Since there is no alertdialog role in IA2, we use the role of alert to
> indicate the whole container should be read when shown. However, it's
> possible to get the raw ARIA role via the xml-roles object attribute. I
> suppose we should have a role in IA2 for it.

I think we definitely need a different role in order to differentiate
alertdialogs from alerts (which are two different beasts).

[jstrot]

The Fluid Project (community source project with goal of creating
usable, accessible ui components) has done a lot of work on a lightbox/
image reorderer, including scripts, description of interesting
moments, and comparison of other implementations.
http://wiki.fluidproject.org/display/fluid/Image+Reorderer
-Julie

[Aaron Leventhal]

Jamie, if we expose alert dialogs and JavaScript message boxes is expose
them as ROLE_DIALOG, and then have a describedby/accDescription on the
dialog object, will that work for you?

- Aaron

[James Teh]

On 13/01/2009 1:51 AM, Aaron Leventhal wrote:
> Jamie, if we expose alert dialogs and JavaScript message boxes is expose
> them as ROLE_DIALOG, and then have a describedby/accDescription on the
> dialog object, will that work for you?

Yes. I've answered in more detail in the Mozilla bug report.

For those who are interested, here is the Mozilla bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=472311

[Gila Gertel]

I have 2 more questions
How do I make the rest of the page inaccessible to screen reader while
the modal is presented?
When the user closes the modal how can I return the focus back to page
the link that opened the modal.