Video examples

iOS Voiceover

Android Talkback

iOS

Developer notes

  • A stepper is a two-segment control used to increase or decrease an incremental value
  • When new value changes, it gets announced dynamically without moving focus from the increment/decrement button

Name

  • If visible text label exists, the programmatic name should match the visible text label.
    • Note: Setting a programmatic name while a visible text label exists may cause VoiceOver to duplicate the announcement of the name. If this happens, hide the visible text label from VoiceOver recognization.
  • UIKit
    • You can programmatically set the visible label with setTitle().
      • The stepper’s title will overwrite the segment’s accessibilityLabel.
    • To hide labels from VoiceOver programmatically, set the label’s isAccessibilityElement property to false
    • To hide labels from VoiceOver using Interface Builder, uncheck Accessibility Enabled in the Identity Inspector.
  • SwiftUI
    • By default, the programmatic name is the visible text label of the segment
    • If necessary, use view modifier accessibilityLabel(_:).
    • If a segment has icon(s), hide the icon(s) from VoiceOver by using view modifier accessibilityHidden(true).

Role

  • The presence of the stepper buttons implies an interactive stepper component.

  • The stepper buttons themselves should be announced as “Button”.

  • UIKit
    • Use UIStepper
  • SwiftUI
    • Use native Stepper view

Groupings

  • N/A

  • UIKit
    • Follow native grouping and order
  • SwiftUI
    • Follow native grouping and order

State

  • The stepper button’s state should be announced as “Increment” or “Decrement”.

  • The new value should be announced when the user activates one of the buttons.

  • UIKit
    • For disabled stepper: Set isEnabled to false. Announcement for disabled is “Dimmed”.
      • If necessary, you may change the accessibility trait of the menu item to notEnabled, but this may overwrite the current accessibility role of the segmented control.
  • SwiftUI
    • For disabled, use view modifier disabled().

Focus

  • Use the device’s default focus functionality.

  • External keyboard tab order often follows the screen reader focus, but sometimes this functionality requires additional development to manage focus.

  • UIKit
    • If VoiceOver is not reaching a particular element, set the element’s isAccessibilityElement to true
      • Note: You may need to adjust the programmatic name, role, state, and/or value after doing this, as this action may overwrite previously configured accessibility.
    • To move screen reader focus to newly revealed content, use UIAccessibility.post(notification:argument:) that takes in .screenChanged and the newly revealed content as the parameter arguments.
    • To NOT move focus, but dynamically announce new content: use UIAccessibility.post(notification:argument:) that takes in .announcement and the announcement text as the parameter arguments.
    • UIAccessibilityContainer protocol: Have a table of elements that defines the reading order of the elements.
  • SwiftUI
    • For general focus management that impacts both screen readers and non-screen readers, use the property wrapper @FocusState to assign an identity of a focus state.
      • Use the property wrapper @FocusState in conjunction with the view modifier focused(_:) to assign focus on a view with @FocusState as the source of truth.
      • Use the property wrapper @FocusStatein conjunction with the view modifier focused(_:equals:) to assign focus on a view, when the view is equal to a specific value.
    • If necessary, use property wrapper @AccessibilityFocusState to assign identifiers to specific views to manually shift focus from one view to another as the user interacts with the screen with VoiceOver on.

Announcements

  • Increment
    • “Label with current value, Increment, Button”
    • if button is activated new value will announce
  • Decrement
    • “Label with current value, Decrement, Button”
    • if button is activated new value will announce

Android

Developer notes

  • A stepper is a two-segment control used to increase or decrease an incremental value
  • When new value changes, it gets announced dynamically without moving focus from the increment/decrement button

Name

  • Name includes the purpose and describes the item changing, matching any visible label and references the number shown between stepper (if visible).

  • 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

  • Extend the most relevant View subclass as is relevant to this control
  • Button or ImageButton

State

  • Active: android:enabled=true
  • Disabled: android:enabled=false
  • Announcement: disabled

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.
  • 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

Announcements

  • Increment
    • “Label with value, Increment, Double tap to activate”
    • if button is activated new value will announce
  • Decrement
    • “Label with value, Decrement, Double tap to activate”
    • if button is activated new value will announce