Aanraakdoelgrootte

Wat We Controleren

Alle interactieve elementen moeten een minimale grootte hebben van 44pt bij 44pt, zowel voor de visuele als de aanklikbare gebieden.

Het raakgebied van een interactief element kan potentieel worden vergroot buiten zijn visuele grenzen - bijvoorbeeld door een gebaarherkenner te gebruiken met een groter activatiegebied. Na zorgvuldige overweging handhaaft Deque dat het best practice is om de visuele en interactieve grenzen van het doel uit te lijnen. Dit biedt de eindgebruiker een duidelijk gebied om mee te werken voor de beste kans op succes. Daarom test deze regel ook of de visuele grenzen van interactieve elementen het minimum van 44pt halen.

Mislukt Voorbeeld ❌

Touch target size = 20pt × 20pt

Dit element is kleiner dan het minimale 44pt × 44pt

Het aanraakgedeelte is te klein om betrouwbaar te activeren, vooral voor gebruikers met motorische beperkingen

Geslaagd Voorbeeld ✅

Touch target size = 44pt × 44pt

Dit element voldoet aan het minimale 44pt × 44pt

Zowel de visuele als de aanraakgrenzen zijn groot genoeg om nauwkeurig te activeren.

In Eén Oogopslag

• Deze regel heeft een matige impact voor gebruikers
• Alle interactieve elementen moeten een visueel en aanklikbaar kader hebben van minstens 44pt × 44pt
• Zowel de visuele als de interactieve (raakgebied) grenzen moeten voldoen aan het minimum
• Kleine bedieningselementen zijn een gebruiksprobleem voor iedereen, en vooral problematisch voor gebruikers met motorische beperkingen

Impact op Gebruikers

Op een touchapparaat zijn kleine bedieningselementen een gebruiksprobleem voor iedereen. Bovendien hebben mensen met motorische beperkingen meer moeite om te richten op, en te interacteren met, kleine doelen.

Bevestig Aanraakdoelgrootteprobleem

Run de applicatie binnen Xcode en navigeer naar het scherm met het te testen interactieve element.

1. Selecteer binnen Xcode Debug View Hierarchy
2. Selecteer het te testen element
3. Open het Inspecteurs Paneel als het niet zichtbaar is
4. Selecteer de Maatinspecteur
5. Observeer de breedte en hoogte van het geselecteerde element

Als de breedte of hoogte minder dan 44pt is, voldoet het element niet aan deze regel.

Los Problemen op

Om problemen met de Aanraakdoelgrootte op te lossen, zorg ervoor dat het visuele kader van elk interactief element ten minste 44pt × 44pt is. Zowel de visuele grenzen als het aanklikbare raakgebied moeten overeenkomen — alleen het raakgebied uitbreiden met een gebaarherkenner is niet voldoende.

Een probleem dat door deze regel wordt gevonden, doet zich voor wanneer de frame van een actief element niet een hoogte en breedte van 44pt of meer heeft.

UIKit

Stel het kader van het interactieve element in op minstens 44pt × 44pt met een van de volgende benaderingen.

In storyboard:

1. Navigeer naar het interactieve element
2. Open het Inspecteurs Paneel als het niet zichtbaar is
3. Selecteer de Maatinspecteur
4. Onder View, update de width en height parameters tot minstens 44pt

In code:

Update de width en height van het interactieve element's frame tot minstens 44pt.

Dit kan worden ingesteld via de initialisator en een specifiek frame:

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

of, kan worden ingesteld via weergavebeperkingen. Als er een huidige beperking op de knop staat, ga je verder en update je de breedte en hoogte naar een minimum van 44 punten. Anders kun je beperkingen toevoegen:

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

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

SwiftUI

Pas een .frame-modifier toe om de bedieningsorganen uit te breiden tot minstens 44pt × 44pt.

TextFields

Houd er rekening mee dat er momenteel in SwiftUI geen consistente manier is om de grootte van het aanraakgebied van een TextField te vergroten, dus een SwiftUI TextField zal .INCOMPLETE retourneren voor deze regel. Er is een radar rapport ingediend bij Apple.

Knoppen

Gebruik een frame-modifier op de inhoud van de label parameter in plaats van op de hele knop.

1. Gebruik de op labels gebaseerde initialisatie van de Button, waarbij 'actie' de eerste parameter is en 'label' de tweede parameter, zoals hieronder getoond.

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

1. Voeg een frame-modifier toe aan de inhoud van de Button's label-parameter, met een hoogte en breedte van minstens 44.

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

React Native

Gebruik platformspecifieke eigenschapsmaten om ervoor te zorgen dat de bedieningselementen voldoen aan de minimale aanraakdoelgrootte.

Sommige componenten van React Native zijn niet aanpasbaar om grootteaanpassingen mogelijk te maken, zoals de Button-component. Indien mogelijk, zorg ervoor dat alle interactieve elementen minimaal 44pt bij 44pt zijn. Als dat niet mogelijk is, verken alternatieve componenten waarmee u de grootte kunt aanpassen.

Tip: Zorg ervoor dat de toegankelijkheidsrol correct is ingesteld bij het gebruik van aangepaste bedieningselementen!

Flutter

Flutter's Material-widgets (ElevatedButton, IconButton, etc.) zorgen automatisch voor een minimaal aanraakgebied van 48pt bij 48pt, zodat ze aan deze eis voldoen. Overtredingen komen meestal van aangepaste aanraakdoelen die zijn gebouwd met GestureDetector, die het aanraakgebied niet uitbreidt buiten de visuele grootte.

  // 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),
    ),                                                                                                  
  )

Kan ik deze regel negeren?

Aanraakdoelgrootte heeft een matige impact voor gebruikers. In gevallen waarin een ontwerperestrictie het niet mogelijk maakt om aan het minimum van 44pt te voldoen — zoals een werkbalkpictogram in een zeer dicht interface — documenteer de beslissing en verken alternatieven voordat de regel wordt genegeerd. Leer meer over regels negeren.

Bronnen

Deque University Cursus Pagina's

• 2.5.5 Doelgrootte (AAA)

Opmerking: Volledige toegang tot Deque Universiteit-bronnen vereist een abonnement.

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 2.5.5 - Doelgrootte
• WCAG 2.1 Begrip Documenten
  • Inzicht in 2.5.5 AAA - Doelgrootte