WebAIM - Web Accessibility In Mind

E-mail List Archives

creating custom dialogs in a device independent way

for

From: Jennison Mark Asuncion
Date: May 26, 2010 7:30PM

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>