Associated Text

Link to Associated Text copied to clipboard

WCAG 2.0 - 1.3.1 A Impact - CriticalImpact - Serious

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

info

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

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