Texto asociado
Un control debe obtener su nombre accesible de una etiqueta cercana disponible para tecnologías de asistencia como VoiceOver y Voice Control.
¿Dos impactos? Si el texto visible no es que se puede enfocar Y no está disponible para el control a través de su nombre o el nombre del padre que se puede enfocar, se considera que esta regla tiene un impacto CRÍTICO.
Impacto
Las personas que utilizan VoiceOver son las más afectadas. Un control que está visualmente vinculado a un elemento descriptivo también debe transmitir esa relación a través del texto para la tecnología de asistencia.
Confirmación
- Activar VoiceOver
- Enfócate en el control
- Ocurrirá uno de los siguientes casos:
- Inaccesible: No anunciará la etiqueta asociada como nombre del control, solo su rol y valor si está presente.
- Accesible: Anunciará la etiqueta asociada como el nombre del control con VoiceOver.
Cómo solucionarlo
UIKit
Para solucionar un problema encontrado por esta regla, agregue un accessibilityLabel
al control con el descriptor vecino.
toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false
SwiftUI
Para solucionar un problema encontrado por esta regla, agregue un accessibilityLabel
al control con el descriptor vecino.
@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
Asegúrese de que el texto visible que acompaña a un control esté incluido en la propiedad accessibilityLabel
del control:
<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>
Cuando el texto visible y un control se agrupan dentro de una vista contenedora enfocable, asegúrese de que el texto visible esté incluido en la propiedad accessibilityLabel
de la vista contenedora:
<View
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel='Light Level'
>
<Text
style={{ color: 'black', fontSize: 22 }}
accessible={false}
>
Light Level
</Text>
<Slider accessible={false}/>
</View>