Touch-Zielabstand

Interaktive Steuerelemente sollten eine Mindestabmessung von 24 x 24 Punkten aufweisen oder so positioniert sein, dass, wenn in die Mitte des Steuerelements ein Kreis mit einem Durchmesser von 24 Punkten gesetzt wird, sich der Kreis nicht mit einem anderen Zielbereich oder mit dem Kreis für einen anderen Zielbereich schneidet.

Auswirkung

Auf einem Touch-Gerät stellen kleine Bedienelemente für jeden ein Usability-Problem dar. Darüber hinaus fällt es Menschen, die motorische Einschränkungen erleben, zunehmend schwerer, mit kleinen Zielen zu interagieren.

Erwartungen

Interaktive Elemente bieten das Potenzial, die Berührungsfläche eines Ziels zu erweitern, ohne die visuellen Grenzen des Ziels zu vergrößern, etwa durch den Einsatz einer Gestenerkennung. Nach sorgfältiger Überlegung beharrt Deque darauf, dass es die beste Vorgehensweise ist, die visuellen und interaktiven Grenzen des Ziels auszurichten. Dadurch steht dem Endbenutzer ein klarer Bereich zur Verfügung, mit dem er interagieren kann, um die besten Erfolgschancen zu haben. Daher testet diese Regel auch, ob die visuellen Grenzen interaktiver Elemente mindestens 24 pt betragen.

Bestätigung

Führen Sie die Anwendung in Xcode aus und navigieren Sie zum Bildschirm mit dem zu testenden aktiven Steuerelement.

1. Wählen Sie in Xcode Debug View Hierarchy
2. Wählen Sie das zu testende Steuerelement aus
3. Öffnen Sie das Inspektorfenster, falls es nicht sichtbar ist
4. Wählen Sie den Größeninspektor
5. Beobachten Sie die Breite und Höhe des ausgewählten Steuerelements
6. Eines der folgenden Ereignisse wird eintreten:

• Zugänglich: Die Ansicht ist größer als die Mindestanforderung und weist keine überlappenden Ansichten auf, die dazu führen, dass das verfügbare Ziel kleiner als 24 x 24 ist.
• Zugänglich: Die Ansicht wird kleiner sein als das Minimum von 24 x 24, aber durch die Polsterung um die Ansicht herum ist für die Schaltfläche genügend Platz vorhanden, damit Benutzer zuverlässig darauf tippen können.
• Barrierefrei: Schieberegler halten einen Abstand von 24pt entlang der Länge des Steuerelements ein.
• Nicht barrierefrei: Die Ansicht ist kleiner als das Minimum von 24 x 24 und weist keinen ausreichenden Abstand zu benachbarten Ansichten auf.
• Nicht zugänglich: Es gibt eine andere interaktive Ansicht, die den tippbaren Bereich der getesteten Ansicht unter diesen Mindestschwellenwert reduziert.

So beheben Sie das Problem

Ein durch diese Regel festgestelltes Problem tritt auf, wenn der Rahmen eines aktiven Steuerelements keine Höhe und Breite von 24 pt oder mehr aufweist.

• Festlegen der Mindesthöhe und -breite der Ansicht auf 24 x 24 pt.
• Passen Sie benachbarte interaktive Ansichten an, um ausreichend Platz zwischen den interaktiven Komponenten zu gewährleisten.
• Entfernen Sie Hindernisse um die Schieberegler.
• Fügen Sie einen Rand um interaktive Ansichten hinzu.

UIKit

Im Storyboard:

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

Im Code:

Aktualisieren Sie das width und height des aktiven Steuerelements frame auf mindestens 24 pt.

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

SwiftUI

Verwenden Sie einen Rahmenmodifikator für die Ansicht, um die richtige Höhe und Breite festzulegen.

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

React Native

Passen Sie Höhe und Breite interaktiver Komponenten an:

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

Einige Komponenten, die eine einfache Abstandseinstellung nicht zulassen, können in eine view Komponente mit Flex-Layout eingeschlossen werden. Dabei wird die gap Property verwendet, um geeignete Abstände 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 }}
   </Slider>
</View>