Etichetta in primo piano

Tutto il testo visibile di una vista interattiva dovrebbe essere all'inizio del nome accessibile della vista.

Questa regola applica una delle buone pratiche indicate da WCAG come parte di WCAG 2.1 2.5.3 A. È possibile disattivare le regole categorizzate come "Best Practice" dalla dashboard mobile oppure ignorando la regola nei test scritti per Android.

Impatto

Gli utenti di TalkBack si aspettano che il nome accessibile venga annunciato per primo quando interagiscono con un controllo. Come buona pratica, consigliamo di avere il testo visibile dei controlli all'interno del nome e tutte le altre informazioni all'interno del valore, suggerimento o ruolo accessibile.

Conferma

1. Attiva TalkBack
2. Metti a fuoco l'elemento
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: TalkBack annuncerà altro testo prima di annunciare il testo del controllo attivo
   • Accessibile: TalkBack annuncerà prima il testo del controllo attivo

Come risolvere

Un problema riscontrato da questa regola è causato dalla mancanza di testo visibile all'inizio della descrizione del contenuto del controllo.

XML

Per un pulsante fornito:

<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" />

Esempio positivo:

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"

Esempio negativo: Si noti che il testo visibile non è disponibile all'inizio della descrizione del contenuto.

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Tap to Send Email"

Compose

Esempio positivo:

Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")

Esempio negativo: Si noti che il testo visibile non è disponibile all'inizio della descrizione del contenuto.

Text(modifier = Modifier.semantics { contentDescription = "Click to Send" }, text = "Send")

React Native

La proprietà accessibilityLabel dovrebbe iniziare con il testo visibile del componente.

Per impostazione predefinita, un pulsante utilizzerà il suo titolo come accessibilityLabel e quindi rispetterà questa regola.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Se scegli di personalizzare il accessibilityLabel per un pulsante, assicurati che inizi con il testo 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>