Texto asociado

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 4.1.2 A Impacto - Crítico Impacto - Grave

Un control debe obtener su nombre accesible de una etiqueta cercana disponible para tecnologías de asistencia como VoiceOver y Voice Control.

info

¿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

  1. Activar VoiceOver
  2. Enfócate en el control
  3. 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>