Alert / Modal Dialog

Success Criteria:

Name Title of alert matches the visible text title in the alert, if any
Role Optional: "alert"
Grouping Group paragraph text, if logical.
State n/a
Focus Screen reader focus is on title when alert opens and is confined inside the alert/modal
Actions Double tap to activate controls

External Keyboard Support

tab To focus any control inside the alert
space bar Activates any control inside the alert on iOS and Android
enter key Activates any control inside the alert on Android

Native Element

  • Modal dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks, usually appearing over an existing screen.

Name

  • Title of alert/modal matches the visible text title in the alert, if any

Role

  • "alert" role is optional. Haptics are optional.
  • Required: Screen reader user is confined inside a modal, communicating an alert/modal is present

Groupings

  • Group text to make the announcements logical.
  • iOS
    • accessibilityFrame
    • accessibilityFrameInContainerSpace
    • GroupView
    • Only the container class is an accessible element
  • Android
    • ViewGroup
    • Set the container object's android:screenReaderFocusable attribute to true, and each inner object's android:focusable attribute to false. In doing so, accessibility services can present the inner elements' content descriptions/names, one after the other, in a single announcement.

State

  • n/a

Focus

The screen reader focus must be confined within the modal /alert /dialog. When the alert appears, the initial focus should be to a logical place or to where the default focus is for the device. (Android sometimes initially focuses on the CTAs in the alert, not the text or title)

  • iOS Options
    • accessibilityViewIsModal property
    • accessibilityElementIsFocused
    • isAccessibilityElement - Yes, if the element can respond to user input
    • To move screen reader focus to newly revealed content: UIAccessibilityLayoutChangedNotification
    • To NOT move focus, but announce new content: UIAccessibilityAnnouncementNotification
  • Android Options
    • android:focusable=true
    • android=clickable=true
    • Implement an onClick( ) event handler for keyboard, not onTouch( )
    • nextFocusDown
    • nextFocusUp
    • nextFocusRight
    • nextFocusLeft
    • accessibilityTraversalBefore (or after)
    • To move screen reader focus to newly revealed content: Type_View_Focused
    • To NOT move focus, but announce new content: accessibilityLiveRegion
    • To hide controls: Important_For _Accessibility_NO

Actions

  • To activate CTAs in alert: double tap