Beschriftung im zugänglichen Namen

Eine fokussierbare Zugänglichkeitsansicht sollte sicherstellen, dass ihr Name ihre sichtbare Beschriftung enthält.

Auswirkung

Von den erkannten Problemen sind vor allem Menschen betroffen, die TalkBack verwenden und/oder unter einer Sehschwäche leiden. Probleme können zu einer verwirrenden oder widersprüchlichen Erfahrung zwischen der Ansage von TalkBack und dem Inhalt auf dem Bildschirm beitragen.

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: Der von TalkBack angekündigte Text unterscheidet sich vom angezeigten Widget-Namen.
   • Zugänglich: Der von TalkBack angekündigte Text ist derselbe oder enthält den angezeigten Widget-Namen.

So beheben Sie das Problem

XML

Legen Sie eine Inhaltsbeschreibung fest, die entweder mit dem sichtbaren Text übereinstimmt oder diesen enthält. Wenn das Steuerelement ein Button oder ein anklickbares TextView ist:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");

Wenn das Steuerelement ein CheckBox ist, siehe CheckBox-Name.

Compose

Stellen Sie sicher, dass die Bedienelemente contentDescription den Namen der Ansicht enthalten.

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

React Native

Die accessibilityLabel Eigenschaft sollte entweder mit dem sichtbaren Text der Komponente übereinstimmen oder ihn enthalten.

Standardmäßig verwendet eine Schaltfläche ihren Titel als accessibilityLabel und erfüllt daher diese Regel.

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

Verwenden Sie für interaktive Elemente ohne Titel eine Touch-View, die die Steuerungselemente und Textkomponenten enthält. Auf diese Weise wird die Textkomponente zur sichtbaren Beschriftung für das Steuerelement. Stellen Sie das accessibilityLabel des enthaltenden Elements so ein, dass es entweder mit dem sichtbaren Text übereinstimmt oder diesen enthält.

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