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. Puoi disattivare questa regola dalla Dashboard Mobile o ignorando la regola nei test scritti per iOS.

Scopri come disattivare le regole dalla dashboard mobile.

Impatto

Gli utenti di VoiceOver 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 VoiceOver
2. Metti a fuoco l'elemento
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: VoiceOver annuncerà altro testo prima di annunciare il testo del controllo attivo
   • Accessibile: VoiceOver annuncerà prima il testo del controllo attivo

Come risolvere

Un problema riscontrato da questa regola è causato dalla mancanza di testo visibile all'inizio dell'etichetta di accessibilità del controllo.

UIKit

Nello storyboard:

1. Seleziona l'elemento con un LabelAtFront problema
2. Assicurarsi che il pannello degli ispettori sia visibile
3. Selezionare L'Ispettore identità.
4. Nella sezione Accessibilità è presente una categoria denominata "Etichetta". Inserisci un'etichetta che corrisponda esattamente al testo visibile o che inizi con esso.

Nel codice:

Individua dove è stata impostata l'etichetta di accessibilità e verifica che il valore di accessibilityLabel corrisponda o inizi con tutto il testo visibile del componente.

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

SwiftUI

Assicurati di impostare un'etichetta di accessibilità che corrisponda o inizi con tutto il testo visibile del componente.

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

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 pertanto supererà 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>