Texto asociado

Qué verificamos

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

Ejemplo Fallido ❌

Se enfoca el campo "Dirección de correo electrónico", pero el texto que está disponible visualmente es not announced by VoiceOver

VoiceOver anuncia "Text field, blank" - solo el rol y el valor, sin nombre

Los usuarios no pueden saber qué información espera el campo

Ejemplo Exitoso ✅

La etiqueta visible "Dirección de correo electrónico" coincide con lo que anuncia VoiceOver

VoiceOver anuncia "Email address, text field, blank" - nombre, rol y valor, todos presentes

Los usuarios saben exactamente qué información espera el campo

A simple vista

• Esta regla tiene un impacto de Serio a Crítico, dependiendo de si la etiqueta visible se puede enfocar
• Los elementos interactivos deben derivar su nombre accesible de la etiqueta visible que los describe
• VoiceOver solo anuncia el rol y el valor de un elemento si falta su nombre accesible

Impacto en los usuarios

Las personas que usan VoiceOver son las más impactadas. Un elemento interactivo que esté visualmente vinculado a una etiqueta descriptiva también debe transmitir esa relación a través del texto para la tecnología asistiva.

Cuando un control deslizante, alternador u otro control tiene una etiqueta visible cercana pero no tiene establecido un nombre accesible que coincida con esa etiqueta, los usuarios de VoiceOver solo escuchan el rol y el valor del elemento, no su propósito. Los usuarios de Voice Control también pueden verse afectados cuando la etiqueta hablada no coincide con el nombre accesible del control.

Confirmar problema de texto asociado

1. Activa VoiceOver
2. Enfoca el elemento interactivo
3. Una de las siguientes situaciones ocurrirá:
   • Inaccesible: VoiceOver no anunciará la etiqueta asociada como el nombre del elemento - solo su rol y valor si están presentes
   • Accesible: VoiceOver anunciará la etiqueta asociada como el nombre del elemento

Solucionar problemas

Para resolver un problema de texto asociado, asigna el texto de la etiqueta visible como el nombre accesible del elemento interactivo. Esto asegura que VoiceOver anuncie el nombre correcto y alinea la experiencia de tecnología asistiva con lo que los usuarios videntes pueden percibir. Oculta el elemento de etiqueta independiente del árbol de accesibilidad para evitar que se anuncie dos veces.

UIKit

Configura el accessibilityLabel en el elemento interactivo para que coincida con el texto de la etiqueta cercana, luego oculta la etiqueta del árbol de accesibilidad:

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Usa el modificador .accessibilityLabel() en el elemento interactivo, pasando el texto de la etiqueta visible como el nombre accesible:

@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).accessibilityLabel(sliderLabel)
    }
}

React Native

Asegúrate de que el texto visible que acompaña al elemento interactivo 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 elemento interactivo se agrupan dentro de un View contenedor enfocables, asegúrate de que el texto visible esté incluido en la propiedad accessibilityLabel del contenedor View:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

Envuelve la etiqueta visible y el elemento interactivo en un widget MergeSemantics para que ambos estén expuestos a la tecnología asistiva como un solo nodo enfocables. VoiceOver anunciará la etiqueta visible como parte del nombre accesible del elemento:

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

¿Puedo ignorar esta regla?

El texto asociado tiene un Impacto de Serio a Crítico para los usuarios, y recomendamos encarecidamente solucionar este problema. Debido a que los usuarios de VoiceOver dependen completamente del nombre accesible para entender qué hace un elemento interactivo, una asociación faltante hace que estos elementos sean prácticamente inutilizables para la tecnología asistiva. Aprende más sobre ignorando reglas.

Recursos

Páginas de cursos de Deque University

• Criterio de éxito 4.1.2 - Nombre, Rol, Valor
• 4.1.2a Nombre, Rol, Valor

Nota: El acceso completo a los recursos de Deque University requiere suscripción.

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Recomendación del W3C
  • Criterio de éxito 4.1.2 - Nombre, Función, Valor
• Documentos de Comprensión de WCAG 2.0
  • Comprensión 4.1.2 A - Nombre, Función, Valor