Nome del controllo attivo

Ogni visualizzazione interattiva dovrebbe avere un nome accessibile disponibile per tecnologie assistive come VoiceOver e Controllo vocale.

Impatto

Le persone più colpite sono quelle che utilizzano VoiceOver. Un elemento di controllo senza nome non trasmetterà il contesto o lo scopo completo alla persona che interagisce con il controllo.

Conferma

1. Attiva VoiceOver
2. Mettere a fuoco il controllo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: non annuncerà il suo nome, ma solo il suo ruolo e valore, se presente.
   • Accessibile: il suo nome verrà annunciato in VoiceOver.

Come risolvere

UIKit

Per risolvere un problema rilevato da questa regola, aggiungere un accessibilityLabel al controllo.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Assicurati che il testo del controllo sia significativo o fornisci un accessibilityLabel se è necessario più contesto.

Caso d'uso: Pulsante con un'immagine per la sua etichetta

Assicurati che l'immagine abbia un nome significativo. Tieni presente che questa non sarà un'opzione quando si supportano più lingue. Se il nome non è utilizzabile, imposta un accessibilityLabel sull'immagine.

In alternativa, è possibile combinare il controllo e le sue sottoviste per creare un unico elemento. Se non è disponibile del testo significativo, impostare un accessibilityLabel sull'intera vista come mostrato di seguito.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
}

React Native

Per risolvere un problema rilevato da questa regola, aggiungere un elemento accessibilityLabel al componente di controllo.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Quando gli elementi sono raggruppati insieme all'interno di una vista contenitore, aggiungi la accessible prop e la accessibilityLabel prop alla vista contenitore:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>