diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 53364d6360..bbdbc12a00 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -179,31 +179,26 @@

End of the Road!

Accessibility Features

-

- Initial focus and ARIA descriptions are set based on the content of each dialog. -

+

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.
    • - 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 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. 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 viewdue 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. -
      • -
    • - The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text. -
      • +
    • 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.
  3. Address Added dialog (id=dialog3): @@ -213,15 +208,15 @@

    Accessibility Features

    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.
    4. -
  4. - 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. -
    5. +
  5. 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.
    6. +
  6. When the dialog closes, the user's point of regard is maintained by setting focus on the Add Delivery Address button.
  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.