ISSUE-162: Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog)

modal

Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog)

State:

CLOSED

Product:

HTML 5 spec

Raised by:

Steve Faulkner

Opened on:

2011-01-22

Description:

ISSUE-162 is Duplicate of ISSUE-133: modal-attribute
http://www.w3.org/html/wg/tracker/issues/133

Issue:
from big http://www.w3.org/Bugs/Public/show_bug.cgi?id=10645

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 or attribute ("modal") to the html5 specification.

2. When a modal is present in the DOM UAs must treat the modal 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 and its children.

2.2 UAs must map only the modal and its children to the accessibility tree.

3. If focus has not been explicitly set to a child of the modal, UAs must set
focus to the first focusable child of the modal.

(Informative)

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

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

Resources:

Definition

Modal window - Wikipedia, the free encyclopedia
http://en.wikipedia.org/wiki/Modal_window

Implementations of web UI modal dialogs

Cutting Edge: Modal Dialog Boxes with AJAX
http://msdn.microsoft.com/en-us/magazine/cc164247.aspx

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

Related Actions Items:

No related actions

Related emails:

1. Re: HTML-ISSUE-162 (modal ): Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog) [HTML 5 spec] (from faulkner.steve@gmail.com on 2011-01-22)
2. Re: HTML-ISSUE-162 (modal ): Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog) [HTML 5 spec] (from laura.lee.carlson@gmail.com on 2011-01-22)
3. Re: HTML-ISSUE-162 (modal ): Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog) [HTML 5 spec] (from laura.lee.carlson@gmail.com on 2011-01-22)
4. HTML-ISSUE-162 (modal ): Add a modal attribute to html5 to indicate a modal segment of the DOM (modal dialog) [HTML 5 spec] (from sysbot+tracker@w3.org on 2011-01-22)

Related notes:

Display change log