Touch-Zielgröße

Alle aktiven Bedienelemente sollten eine sichtbare und berührbare Fläche von mindestens 44 x 44 Punkt haben.

Auswirkung

Auf einem Touch-Gerät stellen kleine Bedienelemente für jeden ein Usability-Problem dar. Darüber hinaus haben Menschen mit motorischen Einschränkungen größere Schwierigkeiten, mit kleinen Zielen zu interagieren und auf sie zu zielen.

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 prüft diese Regel auch, ob die visuellen Grenzen interaktiver Elemente die Mindestgröße von 44 pt einhalten.

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

So beheben Sie das Problem

Ein durch diese Regel festgestelltes Problem tritt auf, wenn die [missing term] frame eines aktiven Steuerelements keine Höhe und Breite von 44pt oder mehr aufweist.

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 44 pt.

Im Code:

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

Dies kann über den Initialisierer und einen bestimmten Frame festgelegt werden:

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

Oder können durch Ansichtsbeschränkungen festgelegt werden. Wenn für die Schaltfläche derzeit eine Einschränkung gilt, aktualisieren Sie die Breite und Höhe auf mindestens 44 Punkte. Andernfalls können Sie Einschränkungen hinzufügen:

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

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

SwiftUI

TextFields

Bitte beachten Sie, dass es derzeit in SwiftUI keine einheitliche Möglichkeit gibt, die Größe des tippbaren Bereichs eines Textfelds zu erhöhen. Daher gibt ein SwiftUI-Textfeld für diese Regel .INCOMPLETE zurück. Bei Apple wurde ein Radarbericht eingereicht.

Knöpfe

Verwenden Sie einen Frame-Modifikator für den Inhalt des Label-Parameters und nicht für die gesamte Schaltfläche.

1. Verwenden Sie den beschriftungsbasierten Initialisierer der Schaltfläche. Er hat 'action' als ersten Parameter und 'label' als zweiten Parameter, wie unten gezeigt.

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

2. Fügen Sie dem Inhalt des Label-Parameter der Schaltfläche 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

Bei einigen Komponenten von React Native sind keine Größenanpassungen möglich, wie beispielsweise bei der Button Komponente. Stellen Sie nach Möglichkeit sicher, dass alle Steuerelemente mindestens 44pt x 44pt groß sind. Wenn dies nicht möglich ist, erkunden Sie alternative Komponenten, mit denen Sie die Größe anpassen können. Tipp: Achten Sie bei der Verwendung benutzerdefinierter Steuerelemente darauf, dass die Zugänglichkeitsrolle richtig eingestellt ist!