Etichetta nel nome

Una vista focalizzabile per l'accessibilità dovrebbe garantire che il suo nome includa l'etichetta visibile.

Impatto

Gli utenti di VoiceOver dovrebbero avere accesso alle stesse informazioni visibili sullo schermo. Ogni volta che il testo di un controllo viene aggiornato, aggiornare l'etichetta di accessibilità in modo che contenga il nuovo testo.

Conferma

1. Attiva VoiceOver
2. Concentrati sull'elemento
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: VoiceOver pronuncerà un testo che non contiene il testo visibile del controllo attivo.
   • Accessibile: VoiceOver pronuncerà il testo che contiene il testo visibile del controllo attivo.
   • Accessibile: VoiceOver annuncerà il testo visibile del controllo attivo.

Come risolvere

Un problema rilevato da questa regola è causato dalla mancanza di parte o di tutto il testo visibile nell'etichetta di accessibilità del controllo.

UIKit

Nello storyboard:

1. Seleziona l'elemento con un LabelInName problema
2. Assicurarsi che il pannello degli ispettori sia visibile
3. Selezionare l'Identity Inspector
4. Nella sezione Accessibilità è presente una categoria denominata "Etichetta". Inserisci un'etichetta che corrisponda esattamente o contenga tutto il testo visibile.

Nel codice:

Individuare dove è stata impostata l'etichetta di accessibilità e assicurarsi che il valore dell'etichetta di accessibilità corrisponda o contenga tutto il testo visibile del componente.

button.title = "Login"
button.accessibilityLabel = "Submit login"

SwiftUI

Imposta un'etichetta di accessibilità che corrisponda o contenga il testo visibile del componente.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}.accessibility(label: Text("Main Menu"))

React Native

La proprietà accessibilityLabel dovrebbe corrispondere o contenere 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'
/>

Per gli elementi interattivi senza titolo, utilizzare una vista toccabile che contenga i componenti di controllo e di testo. In questo modo, il componente testo diventa l'etichetta visibile per il controllo. Imposta l'attributo dell'elemento contenitore accessibilityLabel in modo che corrisponda o contenga il testo visibile.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>