WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: creating custom dialogs in a device independent way

for

From: Susan Grossman
Date: May 26, 2010 8:15PM

On Wed, May 26, 2010 at 5:31 PM, Jennison Mark Asuncion <
<EMAIL 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.

--