Aanraaktargetgrootte

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Wat Wij Controleren

Alle interactieve elementen moeten een minimale grootte hebben van 44dp bij 44dp, zowel voor het visuele als het aanraakbare gebied.

Het aanraakgebied van een interactief element kan mogelijk worden uitgebreid buiten zijn visuele grenzen — bijvoorbeeld door gebruik te maken van een TouchDelegate om het actieve aanraakgebied te vergroten. Na zorgvuldige overweging houdt Deque vol dat het de beste praktijk is om de visuele en interactieve grenzen van het target op elkaar af te stemmen. Dit geeft 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 voldoen aan de minimale 44dp.

In Een Oogopslag

• Deze regel heeft een gematigde impact voor gebruikers
• Alle interactieve elementen moeten een visuele en aanraakbare grootte hebben van minstens 44dp × 44dp
• Zowel de visuele als de interactieve (aanraakgebied) grenzen moeten voldoen aan het minimum
• Kleine bedieningselementen vormen een gebruiksprobleem voor iedereen en zijn bijzonder problematisch voor gebruikers met motorische beperkingen

Impact op Gebruikers

Op een aanraakapparaat zijn kleine bedieningselementen een gebruiksprobleem voor iedereen. Bovendien hebben mensen met motorische beperkingen meer moeite met het bedienen van kleine doelen.

Bevestig Aanraaktargetgrootte Probleem

Start de applicatie en navigeer naar het scherm met het te testen element.

1. Open in Android Studio de Layout Inspector (Tools > Layout Inspector)
2. Selecteer het te testen element in de componentenboom of canvas
3. In het Attributen paneel, observeer de width en height waarden in dp
4. Indien nodig, bepaal de pixeldichtheid van het apparaat om dp-waarden te bevestigen

Als een van beide dimensies minder is dan 44dp, voldoet het element niet aan deze regel.

Problemen Oplossen

Om problemen met de aanraaktargetgrootte op te lossen, zorg ervoor dat de visuele grootte van elk interactief element minstens 44dp × 44dp is. Zowel de visuele grenzen als het aanraakbare gebied moeten overeenkomen — alleen het aanraakgebied uitbreiden via TouchDelegate is niet voldoende.

Een probleem gevonden door deze regel doet zich voor wanneer de height en/of width waarden van een interactief element niet 44dp of meer zijn.

XML

Stel minimumHeight en minimumWidth op het element in, of stel expliciete layout_width en layout_height waarden van minstens 44dp in.

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" />

Compose

Gebruik een Modifier.size of Modifier.defaultMinSize om een minimale grootte van minstens 44dp × 44dp in te stellen.

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "Scan for Issues")
}

React Native

Gebruik platform-specifieke grootte-eigenschappen om ervoor te zorgen dat de bedieningselementen voldoen aan de minimale aanraaktargetgrootte.

Sommige componenten van React Native zijn niet aanpasbaar voor grootte-aanpassingen, zoals de Button component. Indien mogelijk, zorg ervoor dat alle interactieve elementen minstens 44dp bij 44dp zijn. Als dat niet mogelijk is, onderzoek dan alternatieve componenten die wel het aanpassen van de grootte toestaan.

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

Flutter

Flutter's Material-widgets (ElevatedButton, IconButton, enz.) automatisch een minimale aanraakgrootte van 48dp bij 48dp afdwingen, zodat ze standaard aan deze eis voldoen. Overtredingen komen meestal voort uit aangepaste tapdoelen die zijn gebouwd met GestureDetector, die het tapgebied niet uitbreiden 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 gematigde impact voor gebruikers. In gevallen waarin een ontwerpbeperking het onmogelijk maakt om aan de minimale 44dp te voldoen — zoals een werkbalkpictogram in een zeer dicht interface — documenteer dan de beslissing en onderzoek alternatieven voordat de regel wordt genegeerd. Leer meer over het negeren van regels.

Bronnen

Deque University Cursus Pagina's

• 2.5.5 Doelgrootte (AAA)

Opmerking: Volledige toegang tot Deque University-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
  • Begrip 2.5.5 AAA - Doelgrootte