Verschachtelte aktive Steuerung

In ein Barrierefreiheitselement sollten nicht mehrere aktive Bedienelemente eingebettet sein. Jedes aktive Bedienelement sollte individuell fokussiert und bedient werden.

Auswirkung

Am stärksten betroffen sind Personen, die TalkBack verwenden. TalkBack kann nicht mehr als ein aktives Steuerelement innerhalb eines anderen Zugänglichkeitselement aktivieren.

Bestätigung

1. TalkBack aktivieren
2. Versuchen Sie, den Fokus auf die Steuerelemente zu legen
3. Versuchen Sie, das Steuerelement zu aktivieren
4. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: Ein anderes Steuerelement ist aktiviert.
   • Nicht zugänglich: Das Steuerelement ist aktiviert, aber sein Fokusbereich enthält ein anderes Steuerelement.
   • Nicht zugänglich: Es passiert nichts.
   • Zugänglich: Das Steuerelement ist aktiviert und ist das einzige Steuerelement in seinem Fokusbereich.

So beheben Sie das Problem

Vermeiden Sie verschachtelte anklickbare Elemente. Stellen Sie sicher, dass jedes anklickbare Element mithilfe der Barrierefreiheitstechnologie fokussierbar ist. Ansichten, auf die ohne assistiven Technologien zugegriffen werden kann, sollten jedem zur Verfügung stehen, der assistiven Technologien verwendet.

XML

Vermeiden Sie es, die importantForAccessibility Eigenschaft für alle anklickbaren Ansichten, die in einem Layout verschachtelt sind, auf no festzulegen.

Compose

Entfernen Sie im folgenden Beispiel invisibleToUser , um sicherzustellen, dass die Ansichten für jeden verfügbar sind, der unterstützende Technologien verwendet. Beachten Sie, dass das übergeordnete Element anklickbar ist und dies zu unerwünschtem Verhalten führen kann, wenn nicht direkt mit den Ansichten „Einstellungen“ oder „Informationen“ interagiert wird.

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

Ein Beispiel hierfür wäre, dass alle Ansichten für die Integration mit unterstützenden Technologien sichtbar sind, deren übergeordnetes Element nicht anklickbar ist:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

Ein Steuerelement, das in ein anderes Steuerelement eingebettet ist, sollte nicht interaktiv oder fokussierbar sein. Das übergeordnete Steuerelement sollte fokussierbar und anklickbar sein. Um dies zu erreichen, stellen Sie sicher, dass das übergeordnete Element zugänglich ist und über eine Klickaktion verfügt. Für die untergeordnete Komponente sollte importantForAccessibility auf no-hide-descendants gesetzt sein.

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>