Abstand von Bedienoberflächen-Zielen

Erfahren Sie, wie wir künstliche Intelligenz für diese Regel einsetzen!

Was wir überprüfen

Interaktive Elemente sollten eine Mindestgröße von 24dp × 24dp haben oder ausreichend Polsterung darum herum, sodass, wenn ein Kreis mit einem Durchmesser von 24dp auf die Mitte des Elements gelegt wird, der Kreis kein anderes Ziel noch mit dem Kreis für ein anderes Ziel überschneidet.

Der Berührungsbereich eines interaktiven Elements kann potenziell über seine sichtbaren Grenzen hinaus erweitert werden – zum Beispiel durch die Verwendung eines TouchDelegate, um den aktiven Berührungsbereich zu vergrößern. Nach reiflicher Überlegung ist Deque der Meinung, dass es am besten ist, die visuellen und interaktiven Grenzen des Ziels in Einklang zu bringen. Dies gibt dem Endbenutzer einen klaren Bereich für die Interaktion und erhöht die Erfolgschancen. Daher testet diese Regel auch, dass die visuellen Grenzen interaktiver Elemente das Mindestmaß von 24dp erfüllen.

Fehlgeschlagenes Beispiel ❌

Touch target spacing ist unzureichend

Diese Bedienelemente sind zu nah beieinander – ein Kreis mit einem Durchmesser von 24dp, der auf eines zentriert ist, überlappt das andere

Benutzer mit motorischen Einschränkungen könnten versehentlich das falsche Element aktivieren

Erfolgreiches Beispiel ✅

Touch target spacing ist ausreichend

Jedes Bedienelement ist entweder mindestens 24dp × 24dp groß, oder es hat genug Platz darum herum, sodass ein Kreis mit einem Durchmesser von 24dp, der darauf zentriert ist, kein benachbartes Ziel überschneidet

Auf einen Blick

• Diese Regel hat eine erhebliche Auswirkung auf Benutzer
• Interaktive Elemente müssen mindestens 24dp × 24dp groß sein ODER so positioniert sein, dass ein Kreis mit einem Durchmesser von 24dp, der auf das Element zentriert ist, kein benachbartes Ziel überlappt
• Sowohl die visuellen als auch die interaktiven (Trefferbereich) Grenzen müssen das Minimum erfüllen
• Schieberegler müssen mindestens 24dp Raum entlang ihrer Länge beibehalten

Auswirkung auf Benutzer

Auf einem Touch-Gerät sind kleine Bedienelemente ein Benutzerproblem für alle. Darüber hinaus haben Menschen mit motorischen Einschränkungen größere Schwierigkeiten, mit kleinen Zielen zu interagieren, die zu nahe beieinander liegen, um sie unabhängig zu aktivieren.

Bestätigen Sie das Problem des Abstands von Bedienoberflächen-Zielen

Führen Sie die Anwendung aus und navigieren Sie zu dem Bildschirm, der das zu testende Element enthält.

1. Öffnen Sie in Android Studio den Layout-Inspektor (Tools > Layout Inspector)
2. Wählen Sie das zu testende Element im Komponentenbaum oder auf der Leinwand aus
3. Beobachten Sie im Eigenschaften-Panel die Breite, Höhe und Position des ausgewählten Elements im Verhältnis zu benachbarten interaktiven Elementen
4. Identifizieren Sie bei Bedarf die Pixeldichte des Geräts, um dp-Werte zu bestätigen

Eines der folgenden Ergebnisse trifft zu:

• Bestanden: Das Element ist mindestens 24dp × 24dp groß, und es gibt keine überlappenden Elemente, die den verfügbaren tippbaren Bereich unter das Minimum reduzieren
• Bestanden: Das Element ist kleiner als 24dp × 24dp, aber die Polsterung darum ist groß genug, sodass ein Kreis mit einem Durchmesser von 24dp, der auf das Element zentriert ist, kein benachbartes Ziel überschneidet
• Bestanden: Schieberegler halten mindestens 24dp Platz entlang der Länge des Elements
• Nicht bestanden: Das Element ist kleiner als 24dp × 24dp, mit unzureichendem Abstand zwischen sich und benachbarten interaktiven Elementen
• Nicht bestanden: Ein benachbartes interaktives Element reduziert den tippbaren Bereich des getesteten Elements unter die Mindestgrenze

Probleme beheben

Um Probleme mit dem Abstand von Bedienoberflächen-Zielen zu beheben, stellen Sie sicher, dass jedes interaktive Element entweder mindestens 24dp × 24dp groß ist oder ausreichend Abstand hat, sodass ein Kreis mit einem Durchmesser von 24dp, der darauf zentriert ist, kein benachbartes interaktives Ziel überschneidet.

XML

Setzen Sie minimumHeight und minimumWidth auf 24dp und fügen Sie einen Abstand zwischen benachbarten interaktiven Elementen hinzu.

Im Code:

Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);

In der Layout-Definition:

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="24dp"
     android:minimumWidth="24dp"
     android:text="@string/batman_likes_accessible_buttons" />

Gestalten

Verwenden Sie Modifier.defaultMinSize, um eine Mindesthöhe und -breite festzulegen, und padding, um Abstände zwischen benachbarten interaktiven Elementen hinzuzufügen.

Button(
    modifier = Modifier
        .defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
        .padding(start = 24.dp, top = 24.dp),
    onClick = { }
) {
    Text(stringResource(id = R.string.button))
}

React Native

Passen Sie die Höhe und Breite der interaktiven Elemente an und verwenden Sie Layouteigenschaften, um Abstände zwischen ihnen hinzuzufügen.

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Bestimmte Elemente erlauben keine einfache Größenanpassung. Diese können in einen View mit einem flexiblen Layout umwickelt werden, wobei die gap-Eigenschaft genutzt wird, um ordnungsgemäße Abstände zwischen den Elementen zu erzielen:

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
   <Slider
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   />
</View>

Flutter

Flutters Material-Widgets erzwingen standardmäßig einen 48pt x 48pt Berührungsbereich, der normalerweise ausreichende Abstände bietet. Verstöße treten am ehesten bei benutzerdefinierten Berührungszielen auf, die mit GestureDetector erstellt wurden, bei denen der Abstand manuell verwaltet werden muss.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Kann ich diese Regel ignorieren?

Der Berührungsbereichsabstand hat eine Schwerwiegende Auswirkungen für Benutzer. Wir empfehlen, dieses Problem außer in seltenen Fällen zu beheben, in denen Layoutbeschränkungen dies wirklich unmöglich machen. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• WCAG 2.2 - 2.5.8 Berührungsziel (AAA)

Hinweis: Der vollständige Zugriff auf die Deque University-Ressourcen erfordert ein Abonnement.

Andere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.2, W3C-Empfehlung
  • Erfolgskriterium 2.5.8 - Zielgröße (Minimum)
• WCAG 2.2 Verständnis-Dokumente
  • Verständnis von 2.5.8 AA - Zielgröße (Minimum)