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 esta regla desde el Panel móvil o ignorando la regla en las pruebas escritas para iOS.

Aprenda cómo desactivar las reglas desde el Panel móvil.

Impacto

Los usuarios de VoiceOver 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

1. Activar VoiceOver
2. Enfocar el elemento
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: VoiceOver anunciará otro texto antes de anunciar el texto del control activo
   • Accesible: VoiceOver anunciará primero el texto del control activo

Cómo solucionarlo

Un problema encontrado por esta regla es causado por el texto visible que falta al comienzo de la etiqueta de accesibilidad del control.

UIKit

En el guión gráfico:

1. Seleccione el elemento con un LabelAtFront problema
2. Asegúrese de que el Panel de inspectores esté visible
3. Seleccione el Inspector de identidad.
4. Dentro de Accesibilidad, hay una categoría llamada “Etiqueta”. Introduzca una etiqueta que coincida exactamente con el texto visible o que comience con él.

En código:

Busque dónde se ha establecido la etiqueta de accesibilidad y verifique que el valor de accessibilityLabel coincida o comience con todo el texto visible del componente.

button.title = "Login"
button.accessibilityLabel = "Login to Your Account"

SwiftUI

Asegúrese de establecer una etiqueta de accesibilidad que coincida o comience con todo el texto visible del componente.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

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>