Radio Button

Success Criteria:

Name Name describes the purpose of the control and matches the visible label
Role Identifies itself as a Radio button in Android and Button in iOS
Grouping Visible label is grouped with the radio button in a single swipe.
State State options: disabled/dimmed. iOS: selected,"double tap to select" (for unselected). Android: checked, not checked
Focus Focused by swipe or touch
Actions Double tap

External Keyboard Support

tab To Focus
space bar Activates on iOS and Android
enter key Activates on Android
down/up arrow Navigates through group of radio buttons in Android

Native Element

  • Use a Radio button when the user needs to choose between more than two states
  • You should use a native component rather than custom, because it will announce the correct built-in screen reader output for free

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
    • NSRadioButton
    • Announced as "button"
  • Android
    • Standard Radiobutton with RadioGroup when applicable
    • Announced as "radio button"

Groupings

  • Group visible label with radio button
  • 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
    • UIControlState or isSelected, UIAccessibilityTraitNotEnabled
    • Selected: Announced as "selected"
    • Not selected: Announced as "double tap to select" as hint
    • Disabled: Announced as "dimmed"
  • Android
    • Active: android:enabled=true, isChecked, setChecked
    • Disabled: android:enabled=false. Announced as: "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.

  • 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