Proposal: Add a modal element to html5 to indicate a modal segment of the DOM (modal dialog)

Good morning,

I would appreciate any thoughts on this proposal prior to filing a bug.  Especially if anyone has additional resources to add at the end of the proposal (Implementations and Best practices).



Summary:
Add a modal element to html5 to indicate a modal segment of the DOM (modal dialog)

Description:

Issue:

html5 does not currently specify a mechanism to indicate that a segment of the DOM is modal.

Modal dialogs are common in many desktop and web UI toolkits.  It is currently possible to create modal dialog behaviour using CSS, Javascript, and WAI-ARIA.  It is not, however, easy to create a robust modal dialog using these compatible technologies.

Proposal:

(Normative)

1. Add a modal element to the html5 specification.

2. When a modal element is present in the DOM UAs must treat the modal element and its children as a modal segment of the DOM.

2.1 UAs must constrain input / interaction events (e.g. keyboard and mouse) to the modal segment of the DOM.

2.2 UAs must map only the modal segment of the DOM to the accessibility tree.

3. If focus has not been explicitly set to an element in the modal segment of the DOM, UAs must set focus to the first focusable element.

(Informative)

4. Authors must provide a device agnostic mechanism to dismiss the modal segment of the DOM.

5. Authors should return focus to the element from which the modal segment of the DOM was activated upon its dismissal.

Resources:

Implementations of web UI modal dialogs

Drupal 7 Overlay (core module to display administrative pages).
http://api.drupal.org/api/drupal/modules--overlay--overlay.module/7

jQuery UI - Dialog Demos & Documentation
http://jqueryui.com/demos/dialog/

YUI 2: SimpleDialog
http://developer.yahoo.com/yui/container/simpledialog/

Best practices for accessible modal dialogs

WAI-ARIA Authoring Practices 1.0: 3.3 Making a Dialog Modal
http://www.w3.org/TR/wai-aria-practices/#dialog_modal

DHTML Style Guide | dev.aol.com: 8. Dialog (Modal)
http://dev.aol.com/dhtml_style_guide#dialogmodal



Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt