Add a modal feature to HTML5

Editor: Steve Faulkner (faulkner.steve@gmail.com)

Date: January 29, 2011.

Please address feedback to the HTML Working Group mailing list (public-html@w3.org).

Summary

html5 does not currently specify a mechanism to indicate that a segment of the DOM is modal even though this is a common design pattern. This proposal is about adding such a feature.

see bug 10645

Rationale

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.

Currently there are a number of scenarios that typically present themselves:

1. a pseudo modal dialog or overlay is implemented that is not modal for keyboard or AT users. Results in some users not being aware or being unable to interact with the content in the pseudo modal DOM segment.
2. a modal dialog or overlay is implemented that attempts to be modal for keyboard or AT users, but doesn't work well. Results in Keyboard users being able to tab out of the modal content into page content that is 'disabled' for mouse users.
3. a modal dialog or overlay is implemented that is modal for keyboard users but still doesn't work well for AT users because of the way AT present content to users. Results in AT users being able to cursor out of the modal DOM segment into the content that is 'disabled' for mouse and non-AT keyboard users.

Note: where modal interactions are implemented and handled in the browser (e.g. showmodaldialog() or window.alert() or window.confirm() etc. Neither keyboard users or AT users have any problem.

Why is showmodaldialog() not sufficient

While showmodaldialog() resolves the accessibility issues listed above for both keyboard and AT users:

• It's been around for ages (since version 4 in Internet Explorer) yet developers have not made use of it, instead they choose to create pseudo dialogs and overlays. This lack of uptake by developers may be due to:
• limitations on styling/hiding browser chrome For example, its not possible in Firefox.
• content of a modal dialog is not selectable in Internet Explorer.
• It requiring a new browser window and the added restrictions/complexities this adds.
• Can be mistaken for a popup window (since it is a new window)and as a consequence:

"User agents are expected to disable this method in certain cases to avoid user
annoyance (e.g. as part of their popup blocker feature). For instance, a
user agent could require that a site be white-listed before enabling this
method, or the user agent could be configured to only allow one modal dialog
at a time."
html5 showodaldialog()

Details

1. Add a modal 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

4. User agents must provide a device independent method of dismissing the modal segment.

(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.

Impact

Will make it much easier and simpler for authors to create accessible modal dialogs and overlays with the only changes to their current code being simplifications.

Positive Effects

• authors will not have to think about constraining keyboard behaviour to segments of the DOM, the modal attribute will trigger this in the browser.
• AT will not have to implement behaviours do deal with modal segments of the DOM as browsers will deal with it.

Negative Effects

• its another feature for browsers to implement.

Conformance Classes Changes

None

References

Definition

Modal window - Wikipedia, the free encyclopedia

Implementations of web UI modal dialogs

• Cutting Edge: Modal Dialog Boxes with AJAX
• Drupal 7 Overlay (core module to display administrative pages).
• jQuery UI - Dialog Demos & Documentation

• YUI 2: SimpleDialog

Best practices for accessible modal dialogs

• WAI-ARIA Authoring Practices 1.0: 3.3 Making a Dialog Modal

• DHTML Style Guide | dev.aol.com: 8. Dialog (Modal)