Dialog Box Best Practice

Dialog Box

Last Updated: 12/15/2011

A dialog box, also known as a pop-up window, is utilized to either convey important information to a user or to collect input from them.

Challenges faced by disabled users when using dialog boxes are:

Knowing when a dialog box is on the screen
Interacting with a dialog box easily with the keyboard
Losing their place on the main screen when the dialog box is closed

Example

Download

New Window

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Word that needs to be defined.

Build It
Basic Test
Advanced Test

Dialog box receives focus
Modify the dialog's open function and shift focus to its title bar:

default.htm (excerpt)
```
<-- Generated by jQuery UI -->
<div … class="ui-dialog …" tabindex="-1">…</div>
```
dialog.js (excerpt)
```
open: function () {
    …
    $("#ui-dialog-title-dialog").wrap("<h4></h4>"); 
    /* Wrap Dialog Title in an <h4> tag */
},
```
Let's break this code down:
1. Make the title of the dialog box an <h4> tag for easy access by a disabled user:
```
$("#ui-dialog-title-dialog").wrap("<h4></h4>");
```
2. When the dialog is opened, jQuery UI automatically shifts focus to the box by applying a tabindex attribute:
```
<div … class="ui-dialog …" tabindex="-1">…</div>
```
Dialog box can be closed through the keyboard
Provide a link or allow for pressing of the Esc key to close the dialog box:

default.htm (excerpt)
```
<a … title="Close Dialog Box"><span … >close</span></a>
```
dialog.js (excerpt)
```
var dialogOpts = {
    …
    closeOnEscape: true, /* Close on Escape key */
    …
}
```
Controls that launch a dialog box indicate this functionality
Provide a title attribute on the activating link to indicate that it will create a dialog box:

default.htm (excerpt)
```
<a … title="Word that needs to be defined | Open Dialog Box">Word that 
needs to be defined</a>
```

Controls that launch a dialog receive focus back when it is closed

Modify the dialog's close function to shift focus back to the activating link:

dialog.js (excerpt)

var dialogOpts = {
    …
    /* Return focus to activating link */
    close: function () {
        $("a.focus").focus(); 
        $("a.focus").removeClass("focus");
    }
    …
}
…
/* Handle Links that create a Dialog Box */
$("a.dialog").click(function (e) {
    /* Mark link as active */
    $(this).addClass("focus");
    …
});

Let's break this code down:

When a link is selected add a class of focus to it:

 /* Handle Links that create a Dialog Box */
$("a.dialog").click(function (e) {
    /* Mark link as active */
    $(this).addClass("focus");
    …
});

When the dialog is closed move focus to that link and remove the class:

/* Return focus to activating link */
close: function () {
    $("a.focus").focus(); 
    $("a.focus").removeClass("focus");
}

Objects outside of the dialog box are disabled while it's active

Ensure dialog is configured to disable background objects:

dialog.js (excerpt)

var dialogOpts = {
    …
    modal: true, /* Disable content behind dialog */ 
    …
}
…
/* Account for IE bug with tabbing behind dialog box */
$(":tabbable:first").focus(function () {
    $(".ui-dialog:visible:last :tabbable:first").focus();
})

SSA Accessibility Best Practices Library

Dialog Box

Example

Download

New Window

Keyboard

Keyboard

Keyboard

Keyboard

Dragon

JAWS

NO TEST METHOD...

JAWS

JAWS

NO TEST METHOD...

Dialog Box

Example Download New Window

Example

Download

New Window