Aanraaktargetgrootte
Zorg ervoor dat interactieve bedieningselementen groot genoeg zijn om nauwkeurig te tikken
Kom erachter 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 voorbij de visuele grenzen — bijvoorbeeld door een TouchDelegate te gebruiken om het actieve aanraakgebied te vergroten. Na zorgvuldige overweging blijft Deque van mening dat het best practice is om de visuele en interactieve grenzen van het doel op elkaar af te stemmen. Dit geeft de eindgebruiker een helder 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 minimaal 44dp.
Foutief Voorbeeld ❌
Touch target size = 20dp × 20dp
Dit element is kleiner dan de 44dp × 44dp minimum
Het tikgebied is te klein om betrouwbaar te activeren, vooral voor gebruikers met motorische beperkingen.
Correct Voorbeeld ✅
Touch target size = 44dp × 44dp
Dit element voldoet aan het 44dp × 44dp minimum
Zowel de visuele als de tikbare grenzen zijn groot genoeg om nauwkeurig te activeren.
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.
- Open in Android Studio de Layout Inspector (Tools > Layout Inspector)
- Selecteer het te testen element in de componentenboom of canvas
- Observeer in het Attributen-paneel de
width- enheight-waarden in dp - 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 aanraakdoelgrootte op te lossen, moet u ervoor zorgen dat de visuele grootte van elk interactief element ten minste 44dp × 44dp is. Zowel de visuele grenzen als het tikbare gebied moeten overeenkomen — alleen het aanraakgebied vergroten via TouchDelegate is niet voldoende.
Een probleem dat door deze regel wordt gevonden, treedt op wanneer de height- en/of width-waarden van een interactief element niet 44dp of meer zijn.
XML
Stel minimumHeight en minimumWidth in op het element, of stel expliciete layout_width- en layout_height-waarden in van ten minste 44dp.
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 ten minste 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 kunnen niet worden aangepast voor grootteaanpassingen, zoals de Button-component.
Indien mogelijk, zorg ervoor dat alle interactieve elementen minimaal 44dp bij 44dp zijn. Als dat niet mogelijk is, verken dan alternatieve componenten waarmee u de grootte wel kunt aanpassen.
Tip: Zorg ervoor dat bij het gebruik van aangepaste bedieningselementen de toegankelijkheidsrol correct is ingesteld!
Flutter
De Material-widgets van Flutter (ElevatedButton, IconButton, enz.) zorgen automatisch voor een minimaal aanraakgebied van 48dp bij 48dp, dus ze voldoen vanuit zichzelf aan deze eis. Overtredingen komen meestal van aangepaste tikdoelen die zijn gebouwd met GestureDetector, wat het aanraakgebied niet verder vergroot 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?
Aanmaakdoelgrootte heeft een gematigde impact voor gebruikers. In gevallen waarin een ontwerprandvoorwaarde het voldoen aan het 44dp-minimum voorkomt — zoals een werkbalkpictogram in een zeer dichtgepakt interface — documenteer de beslissing en verken alternatieven voordat u de regel negeert. Leer meer over het negeren van regels.
Bronnen
Deque University Cursus Pagina's
Opmerking: Volledige toegang tot Deque University-bronnen vereist een abonnement.
Andere Bronnen
- Web Content Accessibility Guidelines (WCAG) 2.1, W3C Aanbeveling
- WCAG 2.1 Begrip Documenten