diff --git a/src/pages/components/modal/accessibility.mdx b/src/pages/components/modal/accessibility.mdx
index beed063805b..06ec6ad2a33 100644
--- a/src/pages/components/modal/accessibility.mdx
+++ b/src/pages/components/modal/accessibility.mdx
@@ -17,400 +17,109 @@ import {
ListItem,
} from '@carbon/react';
+
+
+Design annotations are needed for specific instances shown below, but for the
+standard modal dialog component, Carbon already incorporates accessibility.
+
+
+
- How it works
- Accessibility considerations
- Resources
- Accessibility testing
+ What Carbon provides
+ Design recommendations
+ Development considerations
-## How it works
-
-The modal Carbon component is a secondary window that displays over the primary
-window to allow the user to maintain the context of a particular task. When the
-modal is displayed the primary window is inert, so users cannot interact with
-content outside an active modal.
-
-The modal dialog contains the tab sequence so that `Tab` and `Shift-Tab` keys do
-not move the focus outside of the modal. To support screen reader users each
-modal component includes a WAI ARIA `role="dialog"` and `aria-modal="true"` so
-assistive technologies understand that the windows underneath the current dialog
-are not available for interaction (inert). Focus, accessible descriptions, and
-labels are set based on the content of each modal. Modals that contain static
-text have the `aria-describeby` property set on the element with the ARIA
-`role="dialog"` to indicate which element or elements in the dialog contain
-content describes the primary purpose or message of the dialog. A value is also
-set for the `aria-labelledby` property that refers to a visible dialog title.
-
-## Accessibility considerations
-
-This component has been validated to meet the
-[WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and
-[Section 508](http://www.section508.gov/) accessibility guidelines, however
-changes made by the content owner can affect accessibility compliance. Be sure
-to review and follow the guidance in this section when updating or adding new
-content to this component.
-
-1. After the modal opens, initial focus should be set on the first focusable
- element in the modal. See WAI-ARIA Authoring Practices
- [Modal Dialog Example, Accessibility Features section](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html)
- for best practices on setting focus.
-2. After a modal closes, focus should retain the user's point of regard and
- return to the element that invoked the modal.
-3. Focus must not move outside the modal until it is closed.
-4. It is strongly recommended that the tab sequence of all modal dialogs include
- a visible element with button role that closes the dialog, such as a close
- icon or cancel button.
-5. Use the Alert modal dialog for special case that interrupts user’s workflow
- to communicate a brief, important message and require a user’s response.
-
-## Resources
-
-#### Helpful resources for creating customized accessible implementations
-
-- [W3C WAI-ARIA Authoring Practices Dialog Modal Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal)
- covers the usage of ARIA names, state and roles, as well as the expected
- keyboard interactions.
-- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/):
- - [1.4.13 Content on Hover or Focus](https://www.ibm.com/able/requirements/requirements/#1_4_13)
- (WCAG Success Criteria
- [1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html))
- - [2.1.2 No Keyboard Traps](https://www.ibm.com/able/requirements/requirements/#2_1_2)
- (WCAG Success Criteria
- [2.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html))
- - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3)
- (WCAG Success Criteria
- [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))
-
-## Accessibility testing
-
-Accessibility issues are tracked in the
-[Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+label%3A%22type%3A+a11y+%E2%99%BF%22+label%3A%22component%3A+modal%22+).
-
-### Automated test
+## What Carbon provides
-
-
-
-
-
-
- Automated test environment
-
- Results
-
-
-
-
-
- - macOS Mojave version 10.14.6 with VoiceOver
-
- - Chrome version 77.0.3865.90
-
- - Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG
- 2.1 Sept. 2019 Ruleset
-
- Carbon React version 7.7.1
-
-
- DAP test
-
- No violations
-
-
-
-
-
-
+Carbon bakes keyboard operation into its components, improving the experience of
+blind users and others who operate via the keyboard. Carbon incorporates many
+other accessibility considerations, some of which are described below.
+
+### Keyboard interactions
-### macOS Screen reader tests
+Modal dialogs take focus on appearance, and the tab order is constrained to the
+modal’s controls until the modal is closed by choosing one of the buttons with
+`Enter` or `Space`, or is dismissed by pressing `Esc`.
-
-
-
-
- Environment
- Results
-
-
-
-
-
- - macOS Mojave version 10.14.6 with VoiceOver
-
- - Chrome version 77.0.3865.90
-
- Carbon React version 7.7.1
-
-
- VoiceOver(VO) test:
-
-
- Tab to Launch modal button. VO announces the button label.
-
-
- Select Enter or Space key to launch the modal. VO announces the
- button label, headings, and text.
-
-
- Tab or Shift-Tab navigate through the modal buttons and
- announces each label.
-
-
- Select Control-Option-Right Arrow or Left Arrow to navigate
- through the modal message.
-
-
- Select the Esc key, Close button or Cancel button to close the
- modal and return focus to the Launch modal button in the primary
- window.
-
-
-
-
-
-
- - macOS Mojave version 10.14.6 with VoiceOver
-
- - Safari version 13.0.2
-
- Carbon React version 7.7.1
-
-
- VoiceOver(VO) test:
-
-
- Tab to Launch modal button. VO announces the button label.
-
-
- Select Enter or Space key to launch the modal. VO announces the
- Button label.
-
-
- Tab or Shift-Tab navigate through the modal buttons and
- announces each label.
-
-
- Select Control-Option-Right Arrow or Left Arrow to navigate
- through the modal message.
-
-
- Select the Esc key, Close button or Cancel button to close the
- modal and return focus to the Launch modal button in the primary
- window.
-
-
-
-
-
-
-
-
+
-### Windows screen reader tests
+
-
-
-
-
-
- Environment
- Results
-
-
-
-
-
- - Microsoft Windows 10
-
- - Firefox version 67
-
- - JAWS version 19.1810.64
-
- Carbon React version 7.7.1
-
-
- JAWS test:
-
-
- Tab to Launch modal button. JAWS announces the button label.
-
-
- Select Enter or Space key to launch the modal.
-
-
- Tab or Shift-Tab to navigate through the modal buttons and
- announces each label. Focus does not move out of the modal when
- tabbing.
-
-
- Select Control-Option-Right Arrow or Left Arrow to navigate
- through the modal message.
-
-
- Press Close button or Cancel button to close the modal and
- return focus to the Launch modal button in the primary window.
-
-
-
-
-
-
- - Microsoft Windows 10
-
- - Chrome version 73.0.3683.103 (Official Build) (64-bit)
-
- - JAWS version 19.1810.64
-
- Carbon React version 7.7.1
-
-
- JAWS test:
-
-
- Tab to Launch modal button. JAWS announces the button label.
-
-
- Select Enter or Space key to launch the modal.
-
-
- Tab or Shift-Tab to navigate through the modal buttons and
- announces each label. Focus does not move out of the modal when
- tabbing.
-
-
- Select Control-Option-Right Arrow or Left Arrow to navigate
- through the modal message.
-
-
- Press Close button or Cancel button to close the modal and
- return focus to the Launch modal button in the primary window.
-
-
-
-
-
-
- - Microsoft Windows 10
-
- - Chrome version 73.0.3683.103 (Official Build) (64-bit)
-
- - NVDA Version 2018.4.1
-
- Carbon React version 7.7.1
-
-
- NVDA test:
-
-
- Tab to Launch modal button. NVDA announces the button label
-
-
- Select Enter or Space key to launch the modal. NVDA announces
- the text and buttons automatically.
-
-
- Tab or Shift-Tab to navigate through the modal buttons and
- announces each label. Focus does not move out of the modal when
- tabbing.
-
-
- Select Control-Option-Right Arrow or Left Arrow to navigate
- through the modal message.
-
-
- Press Close button or Cancel button to close the modal and
- return focus to the Launch modal button in the primary window.
-
-
-
-
-
-
-
-
+
+ Keyboard navigation is constrained to the dialog. Tab cycles through the
+ components that take focus.
+
-### Android screen reader tests
+
+
-
-
-
- Environment
- Results
-
-
-
-
- - Android version 9 with Talkback
-
- - Chrome Version 73.0.3683.103 (Official Build) (64-bit)
-
- Carbon React version 7.7.1
-
-
- Talkback test:
-
-
- Swipe left or right, or use the Alt+Arrow keys in quick nav mode
- until you find the Launch modal button.
-
-
- Double tap the button or press the Alt-Enter keys to launch the
- modal. The close modal button is announces and has focus.
-
-
- Swipe Left or Right to explore the modal. VO announces the text,
- and focus on the Cancel and Save buttons.
-
-
- Note: that navigation is not restricted to the modal only, after
- the modal is open there is no way to know if there is an open
- modal present, the user needs to remember it. Doubletap or press
- Alt+Enter on the Close or Cancel buttons to close the modal.
-
-
-
-
-
-
-
+
+
+
+
+
+ The dialog is resolved by the user pressing Esc or activating a button.
+
+
+
-### iOS screen reader tests
+### Focus handling
+
+When the dialog appears, the first item that gets focus depends on the type of
+dialog. Passive dialogs only contain a close button (X), so that takes focus.
+For dialogs which prompt for confirmation or user decision, the primary button
+takes focus (regardless of number of buttons). For destructive interactions, the
+“cancel” button takes focus, not the red danger/delete button. The tab order
+should proceed left and down from whichever item has focus then wrap back to the
+close button (X).
-
-
-
- Environment
- Results
-
-
-
-
- - iOS version 13.1.3 with VoiceOver
-
- - Safari version 13.1.3
-
- Carbon React version 7.7.1
-
-
- VoiceOver test:
-
-
- Swipe left or right, or use the Arrow keys in quick nav mode
- until you find the Launch modal button.
-
-
- Double tap the button to launch the modal. The close modal
- button is announces and has focus.
-
-
- Swipe Left or Right to explore the modal. VO announces the text,
- and focus on the Cancel and Save buttons.
-
-
- After Double tapping on the close or cancel button, the modal
- closes but focus is stuck on the selected button. Touch the
- screen anywhere to move out of the focus trap.
-
-
-
-
-
-
-
+
+
+
+
+The first item with focus varies depending on dialog type.
+
+
+
+## Design recommendations
+
+### Designate the input that takes focus in a transactional
+
+The only time the starting focus would not be on a button is where a dialog
+contains input fields. For such transactional dialogs, designers should annotate
+that the first input field should receive focus. Note that text links are not
+considered a user input in this context.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- Carbon assigns the container a role of "dialog" and sets `aria-modal` to
+ `"true"`.
+- The dialog is labelled via `aria-label`, using the same string used for the
+ modal’s title; `aria-labelledby` could also be used to assign the title’s
+ string.
+- See the modal pattern in the
+ [ARIA authoring practices](https://w3c.github.io/aria-practices/#dialog_modal)
+ for more considerations.
diff --git a/src/pages/components/modal/images/modal-accessibility-1.png b/src/pages/components/modal/images/modal-accessibility-1.png
new file mode 100644
index 00000000000..f2caf28de83
Binary files /dev/null and b/src/pages/components/modal/images/modal-accessibility-1.png differ
diff --git a/src/pages/components/modal/images/modal-accessibility-2.png b/src/pages/components/modal/images/modal-accessibility-2.png
new file mode 100644
index 00000000000..ea815b75120
Binary files /dev/null and b/src/pages/components/modal/images/modal-accessibility-2.png differ
diff --git a/src/pages/components/modal/images/modal-accessibility-3.png b/src/pages/components/modal/images/modal-accessibility-3.png
new file mode 100644
index 00000000000..4f4b26fb3aa
Binary files /dev/null and b/src/pages/components/modal/images/modal-accessibility-3.png differ
diff --git a/src/pages/components/modal/images/modal-accessibility-4-do.png b/src/pages/components/modal/images/modal-accessibility-4-do.png
new file mode 100644
index 00000000000..da610b943bb
Binary files /dev/null and b/src/pages/components/modal/images/modal-accessibility-4-do.png differ
diff --git a/src/pages/components/modal/images/modal-accessibility-4-dont.png b/src/pages/components/modal/images/modal-accessibility-4-dont.png
new file mode 100644
index 00000000000..1804cd40e74
Binary files /dev/null and b/src/pages/components/modal/images/modal-accessibility-4-dont.png differ