Name der aktiven Ansicht

Jede interaktive Ansicht sollte einen barrierefreien Namen haben, der für unterstützende Technologien wie TalkBack und Voice Access verfügbar ist.

Auswirkung

Am stärksten betroffen sind Personen, die TalkBack verwenden. Die Unfähigkeit, sich auf ein Ansichtselement zu konzentrieren oder sich den Namen des Ansichtselements über TalkBack ansagen zu lassen, führt zu einer nicht zugänglichen Erfahrung.

Bestätigung

1. TalkBack aktivieren
2. Versuchen Sie, den Fokus auf die Steuerelemente zu legen
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: Fokussieren auf das Bedienelement nicht möglich.
   • Nicht zugänglich: Fokussiert, aber nicht mit TalkBack angekündigt.
   • Zugänglich: Fokussiert und angekündigt in TalkBack.

So beheben Sie das Problem

XML

Nutzen Sie die Texteigenschaft eines Steuerelements oder die Inhaltsbeschreibung einer Ansicht, um sicherzustellen, dass TalkBack genaue Informationen weitergeben kann.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Kombinieren Sie Bildschaltflächen mit einer Inhaltsbeschreibung oder einem Text, um deren Zweck anzugeben.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Schaltflächen ohne Bilder sollten Text für TalkBack bereitstellen.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie der Steuerkomponente ein accessibilityLabel hinzu.

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

Wenn Elemente in einer enthaltenen Ansicht gruppiert sind, fügen Sie die accessible -Eigenschaft und die accessibilityLabel -Eigenschaft zur enthaltenen Ansicht hinzu:

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