Abstand von Touch-Zielen

Was wir überprüfen

Interaktive Elemente sollten eine Mindestabmessung von 24 × 24 Punkten haben oder ausreichend Polsterung um sich herum, sodass ein Kreis mit einem Durchmesser von 24 Punkten, der in der Mitte des Elements platziert wird, nicht mit einem anderen Ziel noch mit dem Kreis für ein anderes Ziel überschneidet.

Der Berührungsbereich eines interaktiven Elements kann potenziell über seine visuellen Grenzen hinaus erweitert werden – zum Beispiel durch das Hinzufügen eines Gestenerkenners mit einem größeren Aktivierungsbereich. Nach sorgfältiger Abwägung hält Deque die beste Praxis für gegeben, dass die visuellen und interaktiven Grenzen des Ziels übereinstimmen. Dies gibt dem Endbenutzer einen klaren Bereich zum Interagieren und erhöht die Erfolgswahrscheinlichkeit. Daher prüft diese Regel auch, dass die visuellen Grenzen interaktiver Elemente das Mindestmaß von 24pt erfüllen.

Fehlerhaftes Beispiel ❌

Touch target spacing ist unzureichend

Diese Steuerungselemente sind zu nah beieinander - ein Kreis mit einem Durchmesser von 24pt, der auf eines zentriert ist, überlappt das andere

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

Einwandfreies Beispiel ✅

Touch target spacing ist ausreichend

Jedes Steuerungselement ist entweder mindestens 24pt × 24pt groß oder hat genügend umgebenden Raum, sodass ein Kreis mit einem Durchmesser von 24pt, der darauf zentriert ist, keine benachbarten Ziele schneidet

Auf einen Blick

• Diese Regel hat erhebliche Auswirkungen für Benutzer
• Interaktive Elemente müssen mindestens 24pt × 24pt groß sein ODER so positioniert sein, dass ein Kreis mit einem Durchmesser von 24pt, der auf dem Element zentriert ist, sich nicht mit einem benachbarten Ziel überlappt
• Sowohl die visuellen als auch die interaktiven (Berührungsbereich) Grenzen müssen das Mindestmaß erfüllen
• Schieberegler müssen mindestens 24pt Abstand entlang ihrer Länge einhalten
• Kleine, dicht gepackte Steuerungselemente sind besonders schwierig für Benutzer mit motorischen Einschränkungen

Auswirkung auf Benutzer

Auf einem Touch-Gerät sind kleine Steuerungselemente ein Usability-Problem für alle. Darüber hinaus haben Menschen mit motorischen Einschränkungen verstärkte Schwierigkeiten, mit kleinen Zielen zu interagieren, die zu dicht beieinander liegen, um sie unabhängig voneinander zu aktivieren.

Bestätigung des Fehlers bei Touch-Ziel-Abständen

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

1. Wählen Sie in Xcode Ansichtshierarchie debuggen aus
2. Wählen Sie das zu testende Element aus
3. Öffnen Sie das Inspektoren-Panel, falls es nicht sichtbar ist
4. Wählen Sie die Größeninspektor
5. Beobachten Sie die Breite, Höhe und Position des ausgewählten Elements relativ zu benachbarten interaktiven Elementen

Eines der folgenden Ergebnisse trifft zu:

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

Probleme beheben

Um Abstand-Probleme bei Touch-Zielen zu beheben, stellen Sie sicher, dass jedes interaktive Element entweder mindestens 24pt × 24pt groß ist oder genügend Rand hat, sodass ein Kreis mit einem Durchmesser von 24pt, der darauf zentriert ist, sich nicht mit einem benachbarten interaktiven Ziel überschneidet.

UIKit

Setzen Sie die Mindesthöhe und -breite auf 24pt und fügen Sie Rand zwischen benachbarten interaktiven Elementen hinzu.

Im Storyboard:

1. Navigieren Sie zum interaktiven Element
2. Öffnen Sie das Inspektorenpanel, wenn es nicht sichtbar ist
3. Wählen Sie den Größeninspektor
4. Aktualisieren Sie unter View die width- und height-Parameter auf mindestens 24 pt

Im Code:

Aktualisieren Sie die width und height des Elements' frame auf mindestens 24 pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Verwenden Sie einen .frame-Modifikator am interaktiven Element, um die Mindesthöhe und -breite festzulegen.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

Passen Sie die Höhe und Breite der interaktiven Elemente an und verwenden Sie Layout-Eigenschaften, 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 einem View mit einem Flex-Layout verpackt werden, wobei die gap-Eigenschaft verwendet wird, um den richtigen Abstand zwischen den Elementen zu erreichen:

<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 eine Berührungsfläche von 48 pt x 48 pt, was normalerweise ausreichenden Abstand bietet. Verletzungen sind am ehesten bei benutzerdefinierten Berührungszielen möglich, die mit GestureDetector erstellt wurden, wobei 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 Abstand der Berührungsziele hat eine Erhebliche Auswirkungen für die Benutzer. Wir empfehlen, dieses Problem zu beheben, außer in seltenen Fällen, in denen es aufgrund von Layout-Einschränkungen wirklich nicht möglich ist. 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 Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C-Empfehlung
  • Erfolgskriterium 2.5.8 - Zielgröße (Minimum)
• WCAG 2.2 Verstehensdokumente
  • Verständnis 2.5.8 AA - Zielgröße (Minimum)