Associated Text

Link to Associated Text copied to clipboard
note

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.

WCAG 2.0 - 1.3.1 A Impact - CriticalImpact - Serious

Associated Text ensures any interactive elements that rely on a visual association with a nearby label are also associated programmatically.

info

Two Impacts? If visible text is not focusable AND not available to the control via it's name or focusable parent's name, this rule is considered to have 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

  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))
    }
}