Touch-Zielabstand

Interaktive Steuerelemente sollten eine Mindestabmessung von 24 x 24 dp aufweisen oder so positioniert sein, dass, wenn ein Kreis mit einem Durchmesser von 24 dp in der Mitte des Steuerelements platziert wird, der Kreis sich nicht mit einem anderen Ziel oder mit dem Kreis für ein anderes Ziel 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.

Bestätigung

1. Ermitteln Sie die Pixeldichte Ihres Android-Geräts.
2. Verwenden Sie den Ansichtshierarchieinspektor, um zu bestätigen, wie groß das Steuerelement in Pixeln ist.
3. 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.
   • Zugänglich: Schieberegler halten einen Abstand von 24 dp entlang der Länge der Steuerung ein.
   • Nicht zugänglich: Es gibt eine andere anklickbare Ansicht, die den tippbaren Bereich der getesteten Ansicht unter den 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.
• Passe benachbarte anklickbare Ansichten an, um ausreichend Platz zwischen anklickbaren Komponenten zu ermöglichen.
• Entfernen Sie Hindernisse um die Schieberegler.
• Füge einen Rand um anklickbare Ansichten hinzu.
• Stellen Sie die Mindesthöhe und -breite der Ansicht auf 24 dp ein.

XML

Passen Sie die Mindesthöhe und -breite im Code an:

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

Passen Sie die Mindesthöhe und -breite in der Layoutdefinition an:

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

Compose

Passen Sie die Mindesthöhe und -breite im Code an:

Button(modifier = modifier
  .constrainAs(textButtonBottom) {
      top.linkTo(slider.bottom)
      start.linkTo(parent.start)
      bottom.linkTo(parent.bottom)
  }
  .padding(start = 24.dp, top = 24.dp), onClick = { }) {
  Text(stringResource(id = R.string.button))
}

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, bei denen sich Abstände nicht so einfach ändern lassen, können in einer view Komponente mit flexiblem Layout eingeschlossen werden. Durch das Festlegen der Eigenschaft gap können entsprechende Abstände erreicht werden:

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