From 2c2f6bcde68ae475daf8616ddbc3f1bcc9f369b0 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 26 Apr 2017 20:31:02 -0700 Subject: [PATCH] To address feedback from @MichielBijl in issue #325, made the following changes to the modal dialog pattern. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change 1: Replaced "If a dialog is limited to interactions that either provide additional information or continue processing, it might set focus to the element deemed to be most frequently desired, such as a “OK” or “Continue” button." with "If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an “OK” or “Continue” button." Change 2: Replaced "When a dialog closes, focus typically returns to the element that had focus before the dialog was invoked. This is often the control that opened the dialog. In circumstances where that element no longer exists, focus is set on an element that supports a logical work flow." with "When a dialog closes, focus is set on an element that supports a logical work flow. If the element that had focus before the dialog was invoked still exists, that element is usually the most appropriate choice." Also made the following additional revisions and editorial consistency corrections. Change 1: Replaced "The window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. If the background window is not inert, then interaction with elements in the background window cause the modal window to close." with "Windows under a modal dialog are inert; users cannot interact with content outside an active dialog window. The inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close." Change 2: Added a third note to the keyboard section notes: "3. It is strongly recommended all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button, and that the element is in the Tab sequence." Changed 3: Replaced "All controls required to operate the dialog are child nodes of the element which has role set to dialog." with "All elements required to operate the dialog are descendants of the element that has role dialog." Change 4: Replaced "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." with "Optionally, the aria-describedby property is 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." Changed 5: Replaced "If the dialog has aria-modal set to true and content outside the dialog is completely inert and visually obscured to an extent that is intentionally unreadable, it is no longer necessary to set aria-hidden to true on each element containing a portion of the inert layer. However, if you do still use aria-hidden set to true, the dialog container element cannot be a descendant of any element that has aria-hidden set to true and the content outside the modal dialog must not be visually discernable." with two notes: * Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but is not modal for other users. So, mark a dialog modal only when: 1. Application code prevents all users from interacting in any way with content outside of it. 2. Visual styling obscures the content outside of it. * The aria-modal property introduced by ARIA 1.1 replaces aria-hidden for informing assistive technologies that content outside a dialog is inert. However, in legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that: 1. aria-hidden is set to true on each element containing a portion of the inert layer. 2. The dialog element is not a descendant of any element that has aria-hidden set to true. --- aria-practices.html | 52 ++++++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 17 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 399fbacd60..7e7de21a9b 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -494,8 +494,10 @@

Dialog (Modal)

A dialog is a window overlayed on either the primary window or another dialog window. - The window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. - If the background window is not inert, then interaction with elements in the background window cause the modal window to close. + Windows under a modal dialog are inert. + That is, users cannot interact with content outside an active dialog window. + Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, + and in some implementations, attempts to interact with the inert content cause the dialog to close.

Like non-modal dialogs, modal dialogs contain their tab sequence. @@ -540,41 +542,57 @@

Keyboard Interaction

  • If a dialog is limited to interactions that either provide additional information or continue processing, - it might set focus to the element deemed to be most frequently desired, such as a OK or Continue button. + it may be advisable to set focus to the element that is likely to be most frequently used, such as an OK or Continue button.
  • - When a dialog closes, focus typically returns to the element that had focus before the dialog was invoked. - This is often the control that opened the dialog. - In circumstances where that element no longer exists, focus is set on an element that supports a logical work flow. + When a dialog closes, focus is set on an element that supports a logical work flow. + If the element that had focus before the dialog was invoked still exists, that element is usually the most appropriate choice.
    • +
  • It is strongly recommended all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button, and that the element is in the Tab sequence.

    • WAI-ARIA Roles, States, and Properties

    +