Picker / Spinner / Dropdown

Success Criteria:

Name Name describes the purpose of the control and matches the visible label
Role Identifies itself as a Button or picker item (iOS), or Dropdown list/ button/ double tap to activate for Android. Options in list also identify as buttons or double tap to activate.
Grouping Visible label is grouped with the picker button in a single swipe
State State options: Dimmed/disabled, collapses/expands
Focus Focused by swipe or touch. Screen reader focus can stay on control that opened it, or move to first item in list. The focus must be confined inside the modal.
Actions Double tap to open picker

External Keyboard Support

tab To focus
Space bar Activates picker and to choose selection in iOS and Android
Enter key Activates picker and to choose selection in Android
Up/down arrows Navigate through selection list in iOS and Android
tab Navigate through selection list in Android

Native Element

Spinners and pickers provide a quick way to select one value from a set. Dropdowns/ Spinners/ Pickers all follow this page's guidance.

Name

Name describes the purpose of the control
  • iOS Options
    • Set a label in Interface Builder in the Identity Inspector
    • Group visible text label and the control in the same view container: accessibilityFrameInContainerSpace
    • setTitle( ) method
    • If no visible label, use accessibilityLabel on control
    • Hint is used only if the results of interacting with it are not obvious from the control's label.
    • Match visible label, if any
    • To hide labels from VoiceOver announcements, uncheck the Accessibility Enabled checkbox in the Identity Inspector
    • If hiding visible label, use accessibilityLabel on control
  • Android Options
    • android:text XML attribute
    • Optional: use contentDescription for a more descriptive name, depending on type of view and for elements without a visible label.
    • contentDescription overrides android:text
    • Use labelFor attribute to connect the visible label to the control

Role

  • iOS
    • UIPickerView
    • UIDatePicker
  • Android
    • Spinner Class
    • DatePickerDialog
    • TimePickerDialog

Groupings

  • Visible label and control are grouped together in one swipe
  • Visible label and other non-interactive elements can be grouped together in one swipe in a table row
  • 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

  • iOS
    • Active: isEnabled property
    • Disabled: UIAccessibilityTraitNotEnabled. Announcement: dimmed
    • Add hint if it collapses and expands: "collapses" and "expands"
  • Android
    • Active: android:enabled=true
    • Disabled: android:enabled=false. Announcement: disabled
    • Native elements will have states available (ex: "collapsed, double tap to expand list")

Focus

Only manage focus when needed. Primarily, let the device manage default focus.

Consider how focus should be managed between child elements and their parent views.

  • iOS Options
    • 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

  • Some pickers may require custom actions for the screen reader to rotate through choices in the set.
  • double tap to open picker
  • swipe to move through selections OR
  • swipe up or down also changes selections on some pickers
  • iOS
    • accessibilityCustomActions property
  • Android
    • accessibilityNodeInfo.AccessibilityAction