[DHTML Style Guide] Proposed Dialog Behavior

Modal Dialog
A modal dialog is a dialog that takes and holds focus until the dialog is 
closed or submitted. 
When a modal dialog opens focus goes to the first focusable item in the 
dialog.  Determining the first focusable item must take into account 
elements which receive focus by default (form fields and links) as well as 
items which may have a tabindex attribute with a positive value.  If there 
is no focusable item in the dialog, focus is placed on the dialog 
container element. 

There must be a method to close the dialog without taking any action. This 
could be implemented via a cancel button which is keyboard accessible.  It 
is recommended that a dialog also be cancelled by pressing the escape key 
with focus on any item.   If the current focus item has escape key 
behavior, the press of the escape will be handled by the current item and 
the user may have to press escape an additional time to close the dialog. 
If the purpose of the dialog is to gather information, the dialog should 
have a mechanism to submit the data gathered usually via a keyboard 
accessible button. When the dialog is closed or cancelled focus should 
return to the element in the application which had focus before the dialog 
is invoked.  This is usually the control which opened the dialog. 

Focus must be held within the dialog until it is cancelled or submitted. 
As the user presses tab to move within items in the dialog, pressing tab 
with focus on the last focusable item in the dialog will move focus back 
to the first focusable item in the dialog.   Likewise, if the user is 
shift-tabbing through elements in the dialog, pressing shift-tab with 
focus on the first focusable item in the dialog will move focus to the 
last item in the dialog.  Even if the user clicks outside of the dialog on 
the application which invoked the dialog, focus remains in the dialog. 
Because the dialog is modal and the user can not interact with the 
invoking application while the dialog is displayed, there is not a 
requirement to make the dialog moveable via the mouse although this 
behavior is recommended. 

Non-Modal Dialog
A non-modal dialog is one which is displayed and focusable at the same 
time as the application which invoked it.  Like the modal dialog there 
must be a mechanism to cancel the dialog without taking any action and a 
keyboard accessible method to submit any data gathered in the dialog. 

Also like the modal dialog, focus via the tab and shift-tab key must be 
maintained within the dialog. However, a non-modal dialog should have a 
keyboard mechanism to return focus to the application while leaving the 
dialog open.  The F6 key is the recommended key to move focus between the 
application and an open model dialog.  The mouse user may click on either 
the application or the dialog to change focus between the two.  In a Web 
application the non-modal dialog is usually always displayed above the 
application page, rather than in a separate browser window but that is not 
a requirement. 

Accessible drag and drop techniques (note - this is a big hole as the 
DHTML team doesn't have a recommendation completed for drag and drop, yet) 
 should be implemented to allow the non-modal dialog to be moved via the 
keyboard or the mouse.

Tooltip Dialog
Dojo also has an additional type of dialog called a tooltip dialog.  I 
don't know if the DHTML style guide group wants to address this type or 
not. 
A tooltip dialog is a modal dialog that is rendered near the invoking 
element and visually connected via a cartoon bubble-like protrusion.  The 
tooltip dialog is closed by pressing the escape key when focus is within 
the dialog, mouse clicking on a close icon, or mouse clicking outside of 
the dialog onto the application.  It is modal because focus is trapped 
within the dialog as the user navigates via the tab and shift-tab key. 
Unlike a true modal dialog, the user can click outside of the dialog, 
however in that case the tooltip dialog is immediately closed. A tooltip 
dialog can not be moved/dragged.  Other than the close and move behavior, 
all other behaviors of a modal dialog are implemented by the tooltip 
dialog. 



Becky Gibson
Web Accessibility Architect
                                                       
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com
blog: WebA11y

Received on Tuesday, 26 February 2008 16:03:32 UTC