Eingebettete aktive Steuerung

Erfahren Sie, wie wir künstliche Intelligenz bei dieser Regel verwenden!

Was wir prüfen

Ein Barrierefreiheitselement sollte keine mehrfachen aktiven Steuerungen eingebettet haben. TalkBack kann nicht mehr als eine Steuerung innerhalb eines einzigen Barrierefreiheitselements aktivieren, sodass der Benutzer in der Lage sein sollte, sich auf jede aktive Steuerung individuell zu konzentrieren und mit ihr zu interagieren.

Fehlgeschlagenes Beispiel ❌

TalkBack focuses each entire card as a single unit

Die Schaltflächen „In den Warenkorb“, Wunschliste und Teilen, die in jeder Karte eingebettet sind, sind nicht erreichbar

TalkBack-Benutzer können keine einzelnen Steuerungen innerhalb der Karte aktivieren

Erfolgreiches Beispiel ✅

Jede Steuerung innerhalb einer Karte wird individually focusable von TalkBack

TalkBack navigiert zu dem Bild, dem Produktnamen, der „In den Warenkorb“-Schaltfläche, der Wunschliste und der Teilen-Schaltfläche als separate Elemente

Benutzer können jede Aktion unabhängig aktivieren

Auf einen Blick

• Diese Regel hat eine kritische Auswirkung auf die Benutzer
• Ein Barrierefreiheitselement sollte keine mehrfachen interaktiven Steuerungen enthalten, die individuell anklickbar, aber für Hilfstechnologie verborgen sind
• TalkBack kann nur eine Aktion pro fokussiertem Element aktivieren - wenn mehrere Steuerungen geschachtelt und verborgen sind, können Benutzer sie nicht unabhängig erreichen

Auswirkungen auf Benutzer

Menschen, die TalkBack verwenden, sind am meisten betroffen. Wenn mehrere aktive Steuerungen innerhalb eines einzigen Barrierefreiheitselements geschachtelt sind, kann TalkBack nur eine von ihnen aktivieren oder möglicherweise die falsche aktivieren. Das bedeutet, dass Benutzer möglicherweise eine unbeabsichtigte Aktion auslösen, gar keine Antwort erhalten oder völlig unfähig sind, auf bestimmte Steuerungen zuzugreifen.

Problem mit eingebetteten aktiven Steuerungen bestätigen

1. TalkBack einschalten
2. Versuchen Sie, sich auf die Steuerung zu konzentrieren
3. Versuchen Sie, die Steuerung zu aktivieren
4. Eines der folgenden Dinge wird passieren:
   • Nicht zugänglich: Nichts passiert
   • Nicht zugänglich: Die Steuerung wird aktiviert, aber ihr Fokusrahmen enthält eine andere Steuerung
   • Nicht zugänglich: Eine andere Steuerung wird aktiviert
   • Zugänglich: Die Steuerung wird aktiviert und ist die einzige Steuerung in ihrem Fokusrahmen

Probleme beheben

Vermeiden Sie verschachtelte anklickbare Elemente. Stellen Sie sicher, dass jedes anklickbare Element einzeln durch Hilfstechnologie fokussiert werden kann. Wenn ein übergeordnetes Element eine Gesamtaktion steuern muss, sollten untergeordnete Steuerungen für Hilfstechnologie versteckt werden, damit Benutzern keine widersprüchlichen oder unerreichbaren Interaktionen präsentiert werden.

XML

Setzen Sie nicht die importantForAccessibility-Eigenschaft auf "no" bei anklickbaren Elementen, die innerhalb eines Layouts eingebettet sind. Wenn untergeordnete Steuerungen nicht individuell zugänglich sein sollen, stellen Sie sicher, dass das übergeordnete Element die Aktion übernimmt und das einzige fokussierbare Element ist.

Compose

Vermeiden Sie das untenstehende Muster, bei dem ein anklickbarer Elternteil enthaltene Kinder mit invisibleToUser() versteckt – TalkBack-Benutzer werden die versteckten untergeordneten Steuerungen nicht erreichen können:

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

Sollten die Kinder individuelle Aktionen haben, stellen Sie sicher, dass der Elternteil nicht ebenfalls anklickbar ist. Das erfolgreiche Beispiel unten zeigt jedes Kind als unabhängig anklickbar, mit einem nicht anklickbaren Elternteil:

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

React Native

Wenn eine untergeordnete Steuerung nicht einzeln fokussiert werden soll, stellen Sie sicher, dass das übergeordnete Element zugänglich ist und die Aktion übernimmt. Setzen Sie importantForAccessibility='no-hide-descendants' auf das Kind, sodass es für Hilfstechnologie verborgen ist:

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

Kann ich diese Regel ignorieren?

Eingebettete aktive Steuerung hat eine kritische Auswirkung für Benutzer, und wir empfehlen dringend, diese Probleme zu beheben. Da dies eine experimentelle Regel ist, sollten Sie die Ergebnisse manuell überprüfen. Wenn Sie bestätigt haben, dass alle aktiven Steuerungen innerhalb des Elements einzeln durch TalkBack erreichbar und aktivierbar sind, kann es akzeptabel sein, das Ergebnis zu ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Kursseiten der Deque University

• 2.1.1 Tastatur (A)

Hinweis: Voller Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C-Empfehlung
  • Erfolgskriterium 2.1.1 - Tastatur
• WCAG 2.1 Verständnis-Dokumente
  • Verständnis von 2.1.1 A - Tastatur