Associated Text
This is an experimental rule, and therefore its result(s) are considered to be in beta testing. Learn more about experimental rules and how you can help improve them.
Associated Text ensures any interactive elements that rely on a visual association with a nearby label are also associated programmatically.
Two Impacts? If visible text is not focusable AND not available to the control via its name or focusable parent's name, this rule is considered to have a CRITICAL impact.
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
- Turn on VoiceOver
- Focus on the control
- 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 = falseSwiftUI
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))
}
}