Editar Valor de Texto

Qué Revisamos

Cuando un usuario escribe en un campo de texto, el valor ingresado debe exponerse programáticamente para tecnologías de asistencia como TalkBack y Voice Access.

Ejemplo Fallido ❌

value = "Campo de correo electrónico"

TalkBack anuncia el `contentDescription` en lugar del texto escrito
"Campo de correo electrónico, cuadro de edición"

El usuario no puede confirmar, revisar o corregir lo que escribió

Ejemplo Exitoso ✅

value = "jsmith@emaik.com" (el texto escrito)

TalkBack anuncia la etiqueta y el valor escrito
"Correo electrónico, jsmith@emaik.com, cuadro de edición"

El usuario puede confirmar y corregir lo que escribió

Visión General

• Esta regla tiene un impacto crítico para los usuarios
• Los usuarios necesitan escuchar lo que han escrito para confirmar y corregir su entrada
• Los elementos EditText deben exponer su valor actual a las tecnologías de asistencia, no solo su etiqueta
• No configures un contentDescription en un elemento EditText; esto sobreescribe el valor escrito y rompe los anuncios de TalkBack
• Asocia una etiqueta con el campo usando setLabelFor() para que tanto el nombre del campo como el valor estén disponibles

Impacto en los Usuarios

Las personas que dependen de TalkBack son las más afectadas por este problema. Cuando una entrada de texto no expone su valor, los usuarios no pueden escuchar lo que han escrito. Esto hace imposible confirmar, revisar o corregir entradas de formularios, como nombres de usuario, contraseñas o direcciones, sin asistencia de personas con visión.

Los elementos EditText deben proporcionar consistentemente su valor actual. Cuando el valor se expone correctamente, las tecnologías de asistencia pueden comunicar la entrada de manera predecible.

Confirmar Problema de Editar Valor de Texto

1. Activa TalkBack
2. Enfócate en el elemento de entrada de texto
3. Escribe algo de texto en el campo
4. Sucedera una de las siguientes cosas:
   • Accesible: TalkBack anuncia el texto ingresado junto con la etiqueta asociada
   • Inaccesible: TalkBack anuncia una descripción del contenido en lugar del valor escrito, o no anuncia el valor en absoluto

Corregir Problemas

La causa más común de fallo para Editar Valor de Texto es configurar un contentDescription directamente en un EditText, lo que sobrescribe el valor que TalkBack leería de otro modo. Elimina cualquier contentDescription del elemento de entrada en sí, y en su lugar asocia una etiqueta visible para que tanto el nombre del campo como el valor escrito estén disponibles para los lectores de pantalla.

XML

Asocia una etiqueta TextView con el EditText usando setLabelFor(). No configures un contentDescription en el EditText mismo, ya que esto impedirá que TalkBack lea el valor escrito.

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the label with the field

Compose

Usa el parámetro label en OutlinedTextField para asociar una etiqueta visible con la entrada. No configures contentDescription en el TextField mismo, ya que esto sobrescribe el valor escrito.

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        value = zipCode,
        onValueChange = { zipCode = it },
        label = { Text("Zip Code") }
    )
}

React Native

Evita establecer la propiedad accessibilityLabel al valor actual de la entrada. Establécelo para describir el campo en su lugar, y utiliza la propiedad placeholder para ejemplos de valores. Esto asegura que la etiqueta del campo y el valor escrito permanezcan separados y ambos sean accesibles.

<TextInput 
   accessibilityLabel='Username'
   accessible={true}
   placeholder='John'
   style={{height: 45, width: 200, backgroundColor: 'azure', fontSize: 20, margin:20}}
 /> 

¿Puedo Ignorar Esta Regla?

Editar Valor de Texto tiene un impacto crítico para los usuarios, y recomendamos encarecidamente remediar todos los problemas encontrados por esta regla. Los usuarios que dependen de TalkBack no pueden confirmar o corregir lo que han escrito si el valor no se expone, haciendo que la finalización de formularios sea inaccesible. Aprende más sobre ignorar reglas.

Recursos

Páginas de Cursos de Deque University

• 4.1.2 Nombre, Rol, Valor (A)
• Criterio de Éxito 4.1.2 - Nombre, Rol, Valor

Nota: El acceso completo a los recursos de Deque University requiere una 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
  • Comprender 4.1.2 A - Nombre, Función, Valor