WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: creating custom dialogs in a device independent way

for

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

From: Jennison Mark Asuncion
Date: Wed, May 26 2010 7:30PM
Subject: creating custom dialogs in a device independent way
No previous message | Next message →

Hello,

Passing this question along from a colleague.

For context, this question is based on Techniques for WCAG 2.0
WCAG 2.0-SCR37 [Creating Custom Dialogs in a Device Independent Way].

1) Text under the "Description" states the following:
"2. Place the dialog div into the Document Object Model (DOM) immediately
after the element that triggered it. The triggering element will maintain
focus, and inserting the dialog content after that element will make the
content inside the dialog next in the screen-reader reading order and next
in the tab order. The dialog can still be absolutely positioned to be
elsewhere on the page visually. This can be done either by creating the
dialog in the HTML and hiding it with CSS, as in the example below, or by
inserting it immediately after the triggering element with script."

We've run into a situation where the designer wants to launch a custom
dialog (using a <div> element as WCAG 2.0 recommends), however it is
launched by a hyperlink contained within a bulleted list (ul). As we
understand it, a <div> cannot be nested within an <li> item or else it
does not pass HTML validation rules, so how can this custom dialog be
created to meet HTML validation as well as WCAG 2.0?


Jennison


--
Jennison Mark Asuncion
Co-Director, Adaptech Research Network <www.adaptech.org>
Google Profile at <www.google.com/profiles/itaccessibility>
LinkedIn at <www.linkedin.com/in/jennison>

From: Susan Grossman
Date: Wed, May 26 2010 8:15PM
Subject: Re: creating custom dialogs in a device independent way
← Previous message | Next message →

On Wed, May 26, 2010 at 5:31 PM, Jennison Mark Asuncion <
= EMAIL ADDRESS REMOVED = > wrote:

> Hello,
>
> Passing this question along from a colleague.
>
> For context, this question is based on Techniques for WCAG 2.0
> WCAG 2.0-SCR37 [Creating Custom Dialogs in a Device Independent Way].
>
> 1) Text under the "Description" states the following:
> "2. Place the dialog div into the Document Object Model (DOM) immediately
> after the element that triggered it. The triggering element will maintain
> focus, and inserting the dialog content after that element will make the
> content inside the dialog next in the screen-reader reading order and next
> in the tab order. The dialog can still be absolutely positioned to be
> elsewhere on the page visually. This can be done either by creating the
> dialog in the HTML and hiding it with CSS, as in the example below, or by
> inserting it immediately after the triggering element with script."
>
> We've run into a situation where the designer wants to launch a custom
> dialog (using a <div> element as WCAG 2.0 recommends), however it is
> launched by a hyperlink contained within a bulleted list (ul). As we
> understand it, a <div> cannot be nested within an <li> item or else it
> does not pass HTML validation rules, so how can this custom dialog be
> created to meet HTML validation as well as WCAG 2.0?
>
>
>
I believe that you can have <div> and <span> inside of <li> and it
validates. We do this in our drop-down menus and they pass.

--

From: Jared Smith
Date: Thu, May 27 2010 10:30AM
Subject: Re: creating custom dialogs in a device independent way
← Previous message | No next message

The published WCAG techniques are not the only ways you can achieve
conformance. You're always welcome to use your own techniques so long
as they result in meeting the success criteria.

In this case, the newly revealed <div> could be located elsewhere in
the page. Focus would be set to it using scripting *after* it is
unhidden. If this new dialog is closed (via ESC key and a close
link/button), focus must be set back to the originating link.

In many ways I prefer this technique over the SCR37 technique because
initiating the dialog results in a change of context (via focus).
Without this change, the link will seeming not do anything, possibly
resulting in confusion.

Jared Smith
WebAIM