Etiqueta al principio
Cualquier texto visible de una vista interactiva debe estar al comienzo del nombre accesible de la vista.
Esta regla aplica una práctica recomendada como parte de WCAG 2.1 2.5.3 A señalada por WCAG . Puede desactivar las reglas categorizadas como "Mejores prácticas" desde el Panel móvil o ignorando la regla en las pruebas escritas para Android .
Impacto
Los usuarios de TalkBack esperan que el nombre accesible se anuncie primero cuando interactúan con un control. Como práctica recomendada, recomendamos tener el texto visible de los controles dentro del nombre y toda la demás información dentro del valor accesible, la sugerencia o el rol.
Confirmación
- Activar TalkBack
- Enfocar el elemento
- Ocurrirá uno de los siguientes casos:
- Inaccesible: TalkBack anunciará otro texto antes de anunciar el texto del control activo
- Accesible: TalkBack anunciará primero el texto del control activo
Cómo solucionarlo
Un problema detectado por esta regla es causado por la ausencia de texto visible al inicio de la descripción del contenido del control.
XML
Para un botón proporcionado:
<Button
android:id="@+id/email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xlg"
android:text="Send"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider2" />
Ejemplo aprobado:
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"
Ejemplo no aprobado: Tenga en cuenta que el texto visible no está disponible al comienzo de la descripción del contenido.
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Tap to Send Email"
Compose
Ejemplo aprobado:
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")
Ejemplo no aprobado: Tenga en cuenta que el texto visible no está disponible al comienzo de la descripción del contenido.
Text(modifier = Modifier.semantics { contentDescription = "Click to Send" }, text = "Send")
React Native
La propiedad accessibilityLabel
debe comenzar con el texto visible del componente.
De forma predeterminada, un botón utilizará su título como su accessibilityLabel
y, por lo tanto, pasará esta regla.
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>
Si decide personalizar el accessibilityLabel
de un botón, asegúrese de que comience con el texto del title
.
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>
For other components without an explicit title, or when setting the `accessibilityLabel` explicitly, ensure that the `accessibilityLabel` begins with the component's visible text.
```jsx
<View style={styles.container}>
<Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>