From 4fef9f5df8b630a42e870d5f2297569bf3792d29 Mon Sep 17 00:00:00 2001 From: kleinfreund Date: Wed, 13 Jun 2018 11:50:31 +0200 Subject: [PATCH 1/4] Fix highlight.js not being triggered due to wrong markup --- examples/dialog-modal/dialog.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 209fe0ff28..b1ed47a8e3 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -223,7 +223,7 @@

Javascript and CSS Source Code

HTML Source Code

-
+
From e8727c45f73c35bc7d6d1392669590464b0a4ff2 Mon Sep 17 00:00:00 2001 From: kleinfreund Date: Wed, 13 Jun 2018 11:58:28 +0200 Subject: [PATCH 2/4] Clean up HTML --- examples/dialog-modal/dialog.html | 308 ++++++++++++++++++------------ 1 file changed, 185 insertions(+), 123 deletions(-) diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index b1ed47a8e3..0d5d8f5bfa 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -1,22 +1,22 @@ - -Modal Dialog Example | WAI-ARIA Authoring Practices 1.1 + + Modal Dialog Example | WAI-ARIA Authoring Practices 1.1 - + - - - - - - - - - - + + + + + + + + + +
@@ -28,74 +28,91 @@
  • Design Pattern
  • +

    Modal Dialog Example

    -

    - Following is an example implementation of the - design pattern for modal dialogs. - The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. - The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog. -

    + +

    Following is an example implementation of the design pattern for modal dialogs. The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog.

    +

    Example

    + +
    - +
    +

    Accessibility Features

    +
    1. - To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen. - Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog. + To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen. Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog.
    2. -
    3. Focus and accessible descriptions are set based on the content of each dialog. -
        -
      1. Add Delivery Address dialog (id=dialog1): -
          -
        • Initial focus is set on the first input, which is the first focusable element.
        • -
        • The dialog does not need aria-describedby since there is no static text that describes it.
        • -
        • When the dialog closes as a result of the Cancel action, the user's point of regard is maintained by returning focus to the Add Delivery Address button. -
        • - When the dialog closes as a result of the Add action and the Address Added dialog replaces the Add Delivery Address dialog, - the Add Delivery Address dialog passes a reference to the Add Delivery Address button to the the Address Added dialog - so that it can maintain the user's point of regard when it closes. -
        • -
        -
      2. -
      3. Verification Result dialog (id=dialog2): -
          -
        • Initial focus is set on the first paragraph because the first interactive element is at the bottom, which is out of view due to the length of the text.
        • -
        • To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
        • -
        • When the dialog closes, to maintain the user's point of regard, focus returns to the Verify Address button.
        • -
        • The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text.
        • -
        -
      4. -
      5. Address Added dialog (id=dialog3): -
          -
        • - Initial focus is set on the OK button, which is the last focusable element. - This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message. - Users can press Tab to focus on the My Profile link. -
        • -
        • The element containing the dialog message is referenced by aria-describedby to hint to screen readers that it should be announced when the dialog opens.
        • -
        • When the dialog closes, the user's point of regard is maintained by setting focus on the Add Delivery Address button.
        • -
        -
      6. -
      7. End of the Road! dialog (id=dialog4): -
          -
        • This dialog has only one focusable element, which receives focus when the dialog opens.
        • -
        • Like dialog3, aria-describedby is used to facilitate message announcement for screen reader users.
        • -
        • Like all other dialogs in this example except for the Address Added confirmation dialog, when it closes, the user's point of regard is maintained by returning focus to the element that triggered display of the dialog.
        • -
        -
      8. -
      -
    4. -
    +
  • + Focus and accessible descriptions are set based on the content of each dialog. + +
      +
    1. + Add Delivery Address dialog (with id="dialog1"): + +
        +
      • Initial focus is set on the first input, which is the first focusable element.
      • +
      • The dialog does not need aria-describedby since there is no static text that describes it.
      • +
      • + When the dialog closes as a result of the Cancel action, the user’s point of regard is maintained by returning focus to the Add Delivery Address button. +
      • +
      • + When the dialog closes as a result of the Add action and the Address Added dialog replaces the Add Delivery Address dialog, the Add Delivery Address dialog passes a reference to the Add Delivery Address button to the the Address Added dialog so that it can maintain the user’s point of regard when it closes. +
      • +
      +
    2. +
    3. + Verification Result dialog (with id="dialog2"): + +
        +
      • Initial focus is set on the first paragraph because the first interactive element is at the bottom, which is out of view due to the length of the text.
      • +
      • To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
      • +
      • When the dialog closes, to maintain the user’s point of regard, focus returns to the Verify Address button.
      • +
      • The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text.
      • +
      +
    4. +
    5. + Address Added dialog (with id="dialog3"): + +
        +
      • + Initial focus is set on the OK button, which is the last focusable element. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message. Users can press Tab to focus on the My Profile link. +
      • +
      • + The element containing the dialog message is referenced by aria-describedby to hint to screen readers that it should be announced when the dialog opens. +
      • +
      • When the dialog closes, the user’s point of regard is maintained by setting focus on the Add Delivery Address button.
      • +
      +
    6. +
    7. + End of the Road! dialog (with id="dialog4"): + +
        +
      • This dialog has only one focusable element, which receives focus when the dialog opens.
      • +
      • Like dialog3, aria-describedby is used to facilitate message announcement for screen reader users.
      • +
      • + Like all other dialogs in this example except for the Address Added confirmation dialog, when it closes, the user’s point of regard is maintained by returning focus to the element that triggered display of the dialog. +
      • +
      +
    8. +
    +
  • +
    @@ -135,7 +152,7 @@

    Keyboard Support

    -

    Role, Property, State, and Tabindex Attributes

    +

    Role, Property, State, and Tabindex Attributes

    @@ -150,43 +167,36 @@

    Role, Property, State, and Tabindex Attributes

    - + - + - + - + - + - +
    dialog div - Identifies the element that serves as the dialog container. - Identifies the element that serves as the dialog container.
    aria-labelledby=IDREFaria-labelledby="IDREF" div - Gives the dialog an accessible name by referring to the element that provides the dialog title. - Gives the dialog an accessible name by referring to the element that provides the dialog title.
    aria-describedby=IDREFaria-describedby="IDREF" div
    • Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
    • -
    • - Used in three of the four dialogs included in the example. - See the above accessibility features section for an explanation. -
    • +
    • Used in three of the four dialogs included in the example. See the above accessibility features section for an explanation.
    aria-modal=truearia-modal="true" div - Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). - Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert).
    -

    Notes on aria-modaland aria-hidden

    + +

    Notes on aria-modal and aria-hidden

    +
    1. The aria-modal property was introduced in ARIA 1.1. @@ -198,6 +208,7 @@

      Notes on aria-modaland aria-hidden

    2. 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.
      3. @@ -208,10 +219,11 @@

        Notes on aria-modaland aria-hidden

        Javascript and CSS Source Code

        +
        • CSS: - dialog.css + dialog.css
        • Javascript: @@ -222,19 +234,24 @@

          Javascript and CSS Source Code

          HTML Source Code

          + +
          - +
    +
    +
    - + - +