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.

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 treedt op wanneer de frame van een actief bedieningselement geen hoogte en breedte heeft van 44pt of meer.

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 naar minimaal 44pt

In code:

Update de width en height van het interactieve element frame naar minimaal 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 besturingselementen uit te breiden naar minimaal 44pt × 44pt.

TextFields

Houd er rekening mee dat er momenteel in SwiftUI geen consistente manier is om de grootte van het aanklikbare gebied van een TextField te vergroten, dus een SwiftUI TextField zal retourneren .INCOMPLETE 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 gehele knop.

1. Gebruik de Button‘s label-gebaseerde initializer, die ‘actie’ als de eerste parameter heeft en ‘label’ als 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 Knop's label parameter, waarbij een hoogte en breedte van minimaal 44 is gespecificeerd.

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 voor maatveranderingen, zoals de Button component. Indien mogelijk, zorg ervoor dat alle interactieve elementen minstens 44pt bij 44pt zijn. Als dat niet mogelijk is, verken dan alternatieve componenten die wel toelaten dat je de grootte aanpast.

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

Flutter

Flutter's Materiaalwidgets (ElevatedButton, IconButton, enz.) handhaven automatisch een minimale aanraakoppervlakte van 48pt bij 48pt, zodat ze standaard aan deze eis voldoen. Overtredingen komen doorgaans van aangepaste tiktargets gebouwd met GestureDetector, die het tikgebied niet verder uitbreiden dan 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 waar een ontwerpbeperking voorkomt dat het minimum van 44pt wordt gehaald — zoals een werkbalkpictogram in een zeer dichte interface — documenteer de beslissing en verken alternatieve mogelijkheden voordat je de regel negeert. Lees 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
  • Succescriteria 2.5.5 - Doelgrootte
• WCAG 2.1 Begrip Documenten
  • Inzicht in 2.5.5 AAA - Doelgrootte