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
- Active:
- Android
- Active:
android:enabled=true
- Disabled:
android:enabled=false
. Announcement: disabled
- Active:
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 ModalaccessibilityElementIsFocused
isAccessibilityElement
makes the element visible or not to the Accessibility APIaccessibilityElementsHidden
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 APIandroid:focusable
android=clickable
- Implement an
onClick( )
event handler for keyboard, as well asonTouch( )
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