Größe der berührbaren Fläche

Was wir überprüfen

Alle interaktiven Elemente sollten eine Mindestgröße von 44pt x 44pt haben, sowohl für die visuelle als auch für die antippbare Fläche.

Der Erfassungsbereich eines interaktiven Elements kann potenziell über seine visuellen Grenzen hinaus erweitert werden – zum Beispiel, indem ein Gestenerkenner mit einem größeren Aktivierungsbereich angebracht wird. Nach sorgfältiger Überlegung hält Deque es jedoch für eine bewährte Praxis, dass die visuellen und interaktiven Grenzen des Ziels übereinstimmen. Dies gibt dem Endnutzer einen klaren Bereich, mit dem er interagieren kann, um die besten Erfolgschancen zu haben. Daher wird auch überprüft, ob die visuellen Grenzen interaktiver Elemente das Minimum von 44pt erfüllen.

Fehlerbeispiel ❌

Touch target size = 20pt × 20pt

Dieses Element ist kleiner als das Minimum von 44pt × 44pt

Der Tippbereich ist zu klein, um ihn zuverlässig zu aktivieren, insbesondere für Benutzer mit motorischen Einschränkungen

Bestandenes Beispiel ✅

Touch target size = 44pt × 44pt

Dieses Element erfüllt das Minimum von 44pt × 44pt

Sowohl die visuellen als auch die antippbaren Grenzen sind groß genug, um präzise aktiviert zu werden.

Auf einen Blick

• Diese Regel hat eine moderate Auswirkung für Benutzer
• Alle interaktiven Elemente müssen einen visuellen und antippbaren Rahmen von mindestens 44pt x 44pt haben
• Sowohl die visuellen als auch die interaktiven (Erfassungsbereich) Grenzen müssen das Minimum erfüllen
• Kleine Steuerelemente sind ein Nutzbarkeitsproblem für alle und besonders problematisch für Benutzer mit motorischen Einschränkungen

Auswirkung auf Benutzer

Auf einem Touch-Gerät sind kleine Steuerelemente ein Nutzbarkeitsproblem für alle. Zusätzlich haben Menschen mit motorischen Einschränkungen größere Schwierigkeiten, mit kleinen Zielen zu interagieren und sie zu treffen.

Berührbare-Fläche-Problem bestätigen

Führen Sie die Anwendung in Xcode aus und navigieren Sie zu dem Bildschirm mit dem zu testenden interaktiven Element.

1. Wählen Sie in Xcode Debug-Ansichtshierarchie aus
2. Wählen Sie das zu testende Element aus
3. Öffnen Sie das Inspektor-Panel, falls nicht sichtbar
4. Wählen Sie den Größeninspektor
5. Beobachten Sie die Breite und Höhe des ausgewählten Elements

Wenn die Breite oder Höhe weniger als 44pt beträgt, fällt das Element durch diese Regel.

Probleme beheben

Um Probleme mit der Größe der berührbaren Fläche zu lösen, stellen Sie sicher, dass der visuelle Rahmen jedes interaktiven Elements mindestens 44pt × 44pt beträgt. Sowohl die visuellen Grenzen als auch der antippbare Erfassungsbereich sollten übereinstimmen – nur die Berührungsfläche durch einen Gestenerkenner zu erweitern, ist nicht ausreichend.

Ein Problem, das durch diese Regel gefunden wird, tritt auf, wenn die frame eines aktiven Steuerelements nicht eine Höhe und Breite von 44pt oder mehr hat.

UIKit

Setzen Sie den Rahmen des interaktiven Elements auf mindestens 44pt × 44pt mit einer der folgenden Methoden.

Im Storyboard:

1. Navigieren Sie zu dem interaktiven Element
2. Öffnen Sie das Inspektor-Panel, falls nicht sichtbar
3. Wählen Sie den Größeninspektor
4. Unter View aktualisieren Sie die Parameter width und height auf mindestens 44pt

Im Code:

Update the width and height of the interactive element's frame to at least 44pt.

Dies kann durch den Initialisierer und einen spezifischen Frame eingestellt werden:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

oder, es kann durch Ansichtsconstraints eingestellt werden. Wenn es eine aktuelle Einschränkung auf der Schaltfläche gibt, aktualisieren Sie die Breite und Höhe auf mindestens 44 Punkte. Andernfalls können Sie Constraints hinzufügen:

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

Wenden Sie einen .frame Modifikator an, um Steuerelemente auf mindestens 44pt × 44pt zu erweitern.

Textfelder

Bitte beachten Sie, dass es derzeit in SwiftUI keine konsistente Möglichkeit gibt, die Größe des antippbaren Bereichs eines Textfeldes zu vergrößern, sodass ein SwiftUI TextField für diese Regel .INCOMPLETE zurückgeben wird. Ein Radar-Bericht wurde bei Apple eingereicht.

Schaltflächen

Verwenden Sie eine Rahmenmodifikation für die Inhalte des label-Parameters anstatt für den gesamten Button.

1. Verwenden Sie den label-basierten Initialisierer von Button, der 'action' als ersten Parameter und 'label' als zweiten Parameter hat, wie unten gezeigt.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
  }
)

1. Fügen Sie den Inhalten des Button-label-Parameters einen Rahmenmodifikator hinzu und geben Sie eine Höhe und Breite von mindestens 44 an.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
  }
)

React Native

Verwenden Sie plattformspezifische Größenangaben, um sicherzustellen, dass die Steuerelemente die Mindestgröße für Berührungstasten erreichen.

Einige Komponenten von React Native sind nicht anpassbar, um Größenanpassungen zu ermöglichen, wie die Button-Komponente. Stellen Sie nach Möglichkeit sicher, dass alle interaktiven Elemente mindestens 44pt x 44pt groß sind. Falls dies nicht möglich ist, erkunden Sie alternative Komponenten, die eine Größenanpassung erlauben.

Tipp: Stellen Sie bei der Verwendung von benutzerdefinierten Steuerelementen sicher, dass die Zugänglichkeitsrolle korrekt eingestellt ist!

Flutter

Flutters Material-Widgets (ElevatedButton, IconButton usw.) erzwingen automatisch eine Mindesttastbereichsgröße von 48pt x 48pt, sodass sie diese Anforderung standardmäßig erfüllen. Verstöße kommen typischerweise von benutzerdefinierten Tippzielen, die mit GestureDetector erstellt wurden, welche den Tippbereich nicht über die visuelle Größe hinaus erweitern.

  // 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 eine Moderate Auswirkungen für Benutzer. In Fällen, in denen eine Designbeschränkung die Einhaltung des Mindestmaßes von 44pt verhindert — wie z. B. ein Symbol in einer sehr dichten Symbolleiste — dokumentieren Sie die Entscheidung und erkunden Sie Alternativen, bevor Sie die Regel ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• 2.5.5 Zielgröße (AAA)

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
  • Erfolgskriterium 2.5.5 - Zielgröße
• WCAG 2.1 Understanding Docs
  • Verstehen 2.5.5 AAA - Zielgröße