From e2203fbbdb5cabc9538155870a03e63ade360b47 Mon Sep 17 00:00:00 2001 From: Matt King Date: Thu, 8 Dec 2016 09:18:46 -0800 Subject: [PATCH] Editorial revisions to modal dialog pattern modified aria-practices.html: In the modal dialog pattern section, * Fixed several of the problems marked as complete in the checklist in issue #42. * Updated paragraph linking to issue 42. --- aria-practices.html | 84 ++++++++++++++++++++++++++++----------------- 1 file changed, 52 insertions(+), 32 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 44563ced4c..cf66b9c4d7 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -469,58 +469,78 @@

Combo Box

Dialog (Modal)

- -

This section is partially revised. Planned changes are being discussed in issue 42.

-

- A dialog is a window overlayed on the primary window. - A modal dialog is designed to interrupt the user to, for example, prompt the user to confirm an action or enter information, and it traps or contains keyboard focus until the dialog is closed. - ARIA has a special role for modal dialogs that convey a brief, important message to the user -- the alertdialog ( See the Alert Dialog design pattern). + Work on this section is in progress. Provide feedback in + issue 42. +

+

+ A dialog is a window overlayed on either the primary window or another dialog window. + Like non-modal dialogs, modal dialogs have their own tab sequence, i.e., Tab and Shift + Tab do not move focus outside the dialog. + However, the window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. + So, unlike non-modal dialogs, a modal dialog does not provide means for moving keyboard focus outside the dialog window without closing the dialog. +

+

+ The alertdialog role is a special-case dialog role + designed specifically for dialogs that divert users' attention to a brief, important message. + Its usage is described in the alert dialog design pattern.

-

Keyboard Interaction

-
    -
  • Tab: Moves focus to the next focusable element inside the dialog. Pressing tab with focus on the last focusable element in the dialog moves focus to the first focusable element in the dialog.
    • -
  • Shift + Tab: Moves focus to the previous focusable element inside the dialog. Pressing shift-tab with focus on the first focusable element in the dialog moves focus to the last focusable element in the dialog.
    • -
  • Escape: Closes the dialog without taking any action.
    • -
  • Enter: Serves as the default submit action key if if the primary purpose of the dialog is to gather information
    • -
- -
    -
  • 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.
    • -
  • 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.
    • -
  • 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.
    • +
  • Tab: +
      +
    • Moves focus to the next focusable element inside the dialog.
      • +
    • If focus is on the last element, moves focus to the first focusable element inside the dialog.
      • +
    +
    • +
  • Shift + Tab: +
      +
    • Moves focus to the previous focusable element inside the dialog.
      • +
    • If focus is on the first element, moves focus to the last focusable element inside the dialog.
      • +
    +
    • +
  • Escape: Closes the dialog.
+
    +
  1. + When a dialog opens, focus is typically set on the first focusable element. +
    2. +
  2. + When a dialog closes, focus returns to the element that had focus before the dialog was invoked. + This is often the control that opened the dialog. +
    3. +
-

WAI-ARIA Roles, States, and Properties

    -
  • The element containing the dialog has a role of dialog.
    • -
  • The dialog box title is provided by either the aria-label or the aria-labelledby property.
    • -
  • The aria-describedby property may be set on the element with the dialog role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog. Screen readers may automatically announce the specified description along with the dialog title and initially focused element when the dialog opens.
    • +
  • The element that serves as the dialog container has a role of dialog.
    • +
  • The dialog has either: + +
    • +
  • + The aria-describedby property can be set on the + element with the dialog role to indicate which + element or elements in the dialog contain content that describes the primary purpose or message of the dialog. + Specifying descriptive elements enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens. +
-

Example

-

- Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section. - The ARIA practices task force is developing examples for Authoring Practices 1.1 that will be directly incorporated into the guide. +

+ Development of dialog examples is tracked by + issue 103.

-

Dialog (Non-Modal)

-

Drafting this section is issue 59.

+

Drafting content for this section is tracked by issue 59.