Berührungszielgröße
Stellen Sie sicher, dass interaktive Steuerelemente groß genug sind, um zuverlässig angetippt werden zu können
Erfahren Sie, wie wir künstliche Intelligenz für diese Regel verwenden!
Was wir überprüfen
Alle interaktiven Elemente sollten eine Mindestgröße von 44dp x 44dp haben, sowohl für die visuelle als auch für die tippbare Fläche.
Der Berührungsbereich eines interaktiven Elements kann potenziell über seine visuellen Grenzen hinaus erweitert werden – beispielsweise durch die Verwendung eines TouchDelegate, um den aktiven Berührungsbereich zu vergrößern. Nach sorgfältiger Überlegung hält Deque daran fest, dass es bewährte Praxis ist, die visuellen und interaktiven Grenzen des Ziels in Einklang zu bringen. Dies gibt dem Endbenutzer einen klaren Bereich zur Interaktion für die bestmögliche Erfolgschance. Daher wird in dieser Regel auch getestet, ob die visuellen Grenzen interaktiver Elemente die Mindestvorgabe von 44dp erfüllen.
Nicht bestehen Beispiel ❌
Touch target size = 20dp × 20dp
Dieses Element ist kleiner als das Mindestmaß von 44dp × 44dp
Der Tippbereich ist zu klein, um zuverlässig aktiviert werden zu können, insbesondere für Benutzer mit motorischen Einschränkungen.
Bestandenes Beispiel ✅
Touch target size = 44dp × 44dp
Dieses Element erfüllt das Mindestmaß von 44dp × 44dp
Sowohl die visuellen als auch die tippbaren Bereiche sind groß genug, um genau aktiviert zu werden.
Auf einen Blick
- Diese Regel hat einen moderaten Einfluss auf die Benutzer
- Alle interaktiven Elemente müssen eine visuelle und tippbare Größe von mindestens 44dp × 44dp haben
- Sowohl die visuellen als auch die interaktiven (Trefferbereich) Grenzen müssen die Mindestanforderungen erfüllen
- Kleine Bedienelemente sind ein Usability-Problem für alle und besonders problematisch für Benutzer mit motorischen Einschränkungen
Auswirkungen auf Benutzer
Auf einem Berührungsgerät sind kleine Bedienelemente ein Usability-Problem für alle. Zusätzlich haben Menschen mit motorischen Einschränkungen größere Schwierigkeiten, mit kleinen Zielen zu interagieren und sie zu treffen.
Touch-Zielgröße überprüfen
Starten Sie die Anwendung und navigieren Sie zum Bildschirm, der das zu testende Element enthält.
- Öffnen Sie in Android Studio den Layout-Inspektor (Tools > Layout-Inspektor)
- Wählen Sie das zu testende Element im Komponentenbaum oder auf der Leinwand aus
- Beobachten Sie im Attribute-Panel die
width- undheight-Werte in dp - Identifizieren Sie bei Bedarf die Pixeldichte des Geräts, um die dp-Werte zu bestätigen
Wenn eine der Dimensionen weniger als 44dp beträgt, fällt das Element bei dieser Regel durch.
Probleme beheben
Um Probleme mit der Touch-Zielgröße zu lösen, stellen Sie sicher, dass die visuelle Größe jedes interaktiven Elements mindestens 44dp × 44dp beträgt. Sowohl die visuellen Grenzen als auch der tippbare Trefferbereich sollten übereinstimmen – nur den Berührungsbereich über TouchDelegate zu erweitern, ist nicht ausreichend.
Ein Problem, das durch diese Regel gefunden wird, tritt auf, wenn die height- und/oder width-Werte eines interaktiven Elements nicht 44dp oder mehr betragen.
XML
Setzen Sie minimumHeight und minimumWidth auf das Element oder setzen Sie explizite layout_width- und layout_height-Werte von mindestens 44dp.
Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="44dp"
android:minimumWidth="44dp"
android:text="@string/batman_likes_accessible_buttons" />Komponieren
Verwenden Sie einen Modifier.size oder Modifier.defaultMinSize, um eine Mindestgröße von mindestens 44dp × 44dp festzulegen.
Button(
onClick = { },
modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
Text(text = "Scan for Issues")
}React Native
Verwenden Sie plattformspezifische Größenattribute, um sicherzustellen, dass Steuerelemente die Mindestanforderung an die Touch-Zielgröße erfüllen.
Einige Komponenten von React Native sind nicht anpassbar, um Größenanpassungen zuzulassen, wie die Button-Komponente.
Falls möglich, stellen Sie sicher, dass alle interaktiven Elemente mindestens 44dp x 44dp groß sind. Wenn dies nicht möglich ist, erkunden Sie alternative Komponenten, die eine Größenanpassung erlauben.
Tipp: Beim Verwenden benutzerdefinierter Steuerelemente stellen Sie sicher, dass die Zugänglichkeitsrolle richtig eingestellt ist!
Flutter
Flutters Material-Widgets (ElevatedButton, IconButton usw.) erzwingen automatisch eine Mindestberührungsfläche von 48dp x 48dp, sodass sie diese Anforderung standardmäßig erfüllen. Verstöße treten typischerweise bei benutzerdefinierten Tippzielen auf, die mit GestureDetector erstellt wurden, der den Tippbereich nicht über die visuelle Größe hinaus erweitert.
// Failing — tap target is only 24×24
GestureDetector(
onTap: () {},
child: Container(
width: 24,
height: 24,
color: Colors.blue,
child: const Icon(Icons.close, size: 16, color: Colors.white),
),
)
// Passing — tap target meets 44×44 minimum
GestureDetector(
onTap: () {},
child: Container(
width: 44,
height: 44,
color: Colors.blue,
child: const Icon(Icons.close, size: 24, color: Colors.white),
),
)Kann ich diese Regel ignorieren?
Die Berührungszielgröße hat einen Moderater Einfluss für Benutzer. In Fällen, in denen eine Designbeschränkung das Erreichen des Mindestmaßes von 44dp verhindert – wie ein Symbol in einer sehr dichten Oberfläche – dokumentieren Sie die Entscheidung und erkunden Sie Alternativen, bevor Sie die Regel ignorieren. Erfahren Sie mehr über Regeln ignorieren.
Ressourcen
Deque Universität Kursseiten
Hinweis: Der vollständige Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.
Weitere Ressourcen
- Web Content Accessibility Guidelines (WCAG) 2.1, W3C-Empfehlung
- WCAG 2.1 Erklärungstexte