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
  • Use native alerts when at all possible vs a custom element, as it will handle expected behavior without additional development effort
  • Options to close the modal for the screen reader user: An invisible close button announced for the screen reader only, can be in the swipe order after the last menu item. Two/three finger swipe. A close button.
  • Drawers usually have a handle or button to be focused by the screen reader to expand and collapse them. Tapping outside the modal to close can not be the only option for screen reader users

Name

  • Title (optional) 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 alert text to make the announcements logical.
  • iOS
    • accessibilityFrame
    • accessibilityFrameInContainerSpace
    • GroupView
  • Android
    • ViewGroup

State

  • Follow button state guidance if applicable
  • Modals that have an open/close or expands/collapses state must be announced. Add logic and announcement to the programmatic name for the state iOS
    • Active: isEnabled property
    • Disabled: UIAccessibilityTraitNotEnabled. Announcement: dimmed
  • Android
    • Active: android:enabled=true
    • Disabled: android:enabled=false. Announcement: disabled

Focus

  • The screen reader focus must be confined within the modal /alert /dialog/ drawer. When the alert appears, the initial focus should be to a logical place or to where the default focus is for the device within the modal
  • Android sometimes initially focuses on the CTAs in the alert, not the text or title
  • Android often takes one swipe to bring focus inside the modal

iOS - accessibilityViewIsModal contains the screen reader focus inside the Modal

  • accessibilityElementIsFocused
    • isAccessibilityElement makes the element visible or not to the Accessibility API
    • accessibilityElementsHidden indicates that the children elements of the target element are visible or not to the Accessibility API
    • To move screen reader focus to newly revealed content: UIAccessibilityLayoutChangedNotification
    • To NOT move focus, but dynamically announce new content: UIAccessibilityAnnouncementNotification
  • Android
    • importantForAccessibility makes the element visible to the Accessibility API
    • android:focusable
    • android=clickable
    • Implement an onClick( ) event handler for keyboard, as well as 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 dynamically announce new content: accessibilityLiveRegion(set to polite or assertive)
    • To hide controls: Important_For_Accessibility_false