Associated Text

A control should get its accessible name from a nearby label available for assistive technologies such as VoiceOver and Voice Control.

Impact

People using VoiceOver are most impacted. A control that is visually tied to a descriptive element must also convey that relationship through text for assistive technology.

Confirmation

1. Turn on VoiceOver
2. Focus on the control
3. One of the following will happen:
   • Inaccessible: It will not announce the associated label as the control's name, only its role and value if present.
   • Accessible: It will announce the associated label as the control's name with VoiceOver.

How to Fix

UIKit

To fix an issue found by this rule, add an accessibilityLabel to the control with the neighboring descriptor.

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

To fix an issue found by this rule, add an accessibilityLabel to the control with the neighboring descriptor.

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibility(label: Text(sliderLabel))
    }
}

React Native

Ensure visible text that accompanies a control is included in the accessibilityLabel prop of the control:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

When visible text and a control are grouped within a focusable containing view, ensure the visible text is included in the accessibilityLabel prop of the containing view:

 <View
  accessible={true} 
  accessibilityElementsHidden={false} 
  accessibilityLabel='Light Level'
>
   <Text 
     style={{ color: 'black', fontSize: 22 }} 
     accessible={false}
   > 
     Light Level 
   </Text>
   <Slider accessible={false}/>
</View>