Segmented Control / Tab

Success Criteria:

Name Inner text describes its purpose
Role Identifies as button in iOS and double tap to select in Android
Grouping Identifies the order in the group (1 of 2)
State State options: Selected, dimmed/disabled
Focus Focus by swipe or touch
Actions double tap

External Keyboard Support

tab To focus
rt/left arrow Navigate through group in iOS and Android
tab Navigate through group in Android
space bar Activate control in iOS and Android
enter key Activate control in Android

Native Element

  • A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button

Name

  • Name matches the inside tab text
  • iOS Options
    • setTitle( ) method
    • Set a label in Interface Builder in the Identity Inspector
    • accessibilityLabel
    • (accessibilityLabel overrides setTitle)
  • Android Options
    • android:text XML attribute
    • contentDescription
    • (contentDescription overrides android:text)

Role

  • iOS
    • UISegmentedControl
  • Android
    • Tabs
    • Button or Image Button

Groupings

  • n/a

State

  • Selected state is announced for the control in group that is focused
  • iOS Options
    • Active: isEnabled property
    • Disabled: UIAccessibilityTraitNotEnabled. Announcement: dimmed
    • UIControlState or isSelected, UIAccessibilityTraitNotEnabled
    • Selected: Announced as "selected"
    • Not selected: Announced as "double tap to select" as hint
  • Android Options
    • Active: android:enabled=true
    • Disabled: android:enabled=false. Announcement: disabled
    • setSelected
    • Selected: Announced as "selected"

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

  • iOS
    • To activate: double tap
  • Android
    • To activate: double tap