Developer notes
- A menu is a container for a list of items
- Use native menus when at all possible vs a custom element, as it will handle expected behavior without additional development effort
- Options to close the menu 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 to close (Android). A close button.
- Confining the user within the menu communicates the context to the screen reader user that there is a menu or modal present. If menu hides content underneath it, the screen reader focus should be confined within the menu.
- Tapping outside the modal to close cannot be the only option for screen reader users
Name
- Name describes the purpose of the control (Ex: opens settings menu or closes menu), with additional label description if needed
- iOS Tips
- Set a label in Interface Builder in the Identity Inspector
- If no visible label, use
accessibilityLabel
on control/icon - If hiding visible label from screen reader, use
accessibilityLabel
on control
- Android Tips
android:text
XML attribute- Use
contentDescription
, depending on type of view and for elements (icons) without a visible label contentDescription
overridesandroid:text
- Use
labelFor
attribute to associate the visible label with the control
Role
- Required: Screen reader user is confined inside a menu, communicating a modal is present if hiding content underneath it
-
When not using native controls (custom controls), roles will need to be manually coded.
- iOS
UIMenu
- Android
android.view.Menu
Groupings
-
Visible label, if any, is grouped with the menu button in a single swipe
- iOS
accessibilityFrame
accessibilityFrameInContainerSpace
GroupView
- Android
ViewGroup
State
- Expandable menus
- State must be announced- expands/collapses, opens/closes. Add logic and announcement to the programmatic name for the state
- If “opens” or “closes” is not included in the name, the expands/collapses state must be announced
- iOS
- Active:
isEnabled property
- Disabled:
UIAccessibilityTraitNotEnabled
. Announcement: dimmed
- Active:
- Android
- Active:
android:enabled=true
- Disabled:
android:enabled=false
. Announcement: disabled
- Active:
Focus
- Screen reader focus must be confined within the menu, which can include the button that opened it, if content underneath is hidden
- Focus can remain on the menu button or move to the first item in the menu
- Only manage focus when needed. Primarily, let the device manage default focus
- External keyboard tab order often follows the screen reader focus, but sometimes needs focus management
- When a menu is closed, the focus should return to the triggering element
-
An invisible close button can be implemented to close the menu. Ensure button is in the swipe order if implemented
- 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 APIImportantForAccessibility=no
on view beneath menu if user is confinedandroid: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