Afstand van aanraakdoelen

Wat We Controleren

Interactieve elementen moeten een minimale afmeting van 24 × 24 punten hebben, of voldoende opvulling eromheen, zodat als er een cirkel met een diameter van 24 punten in het midden van het element wordt geplaatst, de cirkel niet zou overlappen met een ander doelwit noch met de cirkel voor een ander doelwit.

Het bereik van een interactief element kan mogelijk worden uitgebreid buiten de visuele grenzen — bijvoorbeeld door een gebarenherkenner toe te voegen met een groter activatiegebied. Na zorgvuldig overleg blijft Deque van mening dat het een best practice is om de visuele en interactieve grenzen van het doel overeen te laten komen. 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 24pt.

Foute Voorbeeld ❌

Touch target spacing is onvoldoende

Deze bedieningselementen liggen te dicht bij elkaar - een cirkel met een diameter van 24pt gecentreerd op één overlapt de andere

Gebruikers met motorische beperkingen kunnen per ongeluk het verkeerde element activeren

Goede Voorbeeld ✅

Touch target spacing is voldoende

Elk bedieningselement is ofwel minstens 24pt × 24pt, of heeft voldoende omringende ruimte zodat een cirkel met een diameter van 24pt gecentreerd op het element niet overlapt met een aangrenzend doelwit

In één oogopslag

• Deze regel heeft een serieuze impact voor gebruikers
• Interactieve elementen moeten minimaal 24pt × 24pt zijn, OF zo gepositioneerd zijn dat een cirkel met een diameter van 24pt gecentreerd op het element geen aangrenzend doel overlapt
• Zowel de visuele als de interactieve (bereik) grenzen moeten aan het minimum voldoen
• Sliders moeten minstens 24pt ruimte langs hun lengte behouden
• Kleine, dicht opeengepakte bedieningselementen zijn vooral moeilijk voor gebruikers met motorische beperkingen

Impact op Gebruikers

Op een aanraakapparaat vormen kleine bedieningselementen voor iedereen een bruikbaarheidsprobleem. Bovendien hebben mensen met motorische beperkingen meer moeite om te communiceren met kleine doelen die te dicht bij elkaar liggen om onafhankelijk te activeren.

Bevestig probleem met Afstand van aanraakdoelen

Voer de applicatie uit binnen Xcode en navigeer naar het scherm met het interactieve element om te testen.

1. Binnen Xcode, selecteer Debug View Hierarchy
2. Selecteer het element om te testen
3. Open het Inspecteurs-paneel als het niet zichtbaar is
4. Selecteer de Grootte-inspecteur
5. Observeer de breedte, hoogte en positie van het geselecteerde element, in relatie tot aangrenzende interactieve elementen

Een van de volgende uitkomsten is van toepassing:

• Geslaagd: Het element is minstens 24pt × 24pt, en er zijn geen overlappende elementen die het beschikbare aanraakbare gebied onder het minimum verminderen
• Geslaagd: Het element is kleiner dan 24pt × 24pt, maar de opvulling eromheen is groot genoeg zodat een cirkel met een diameter van 24pt gecentreerd op het element niet overlapt met een aangrenzend doelwit
• Geslaagd: Schuifregelaars behouden minstens 24pt ruimte langs de lengte van het element
• Mislukt: Het element is kleiner dan 24pt × 24pt, met onvoldoende ruimte tussen zichzelf en aangrenzende interactieve elementen
• Mislukt: Een naburig interactief element vermindert het aanraakbare gebied van het geteste element tot onder de minimale drempel

Problemen oplossen

Om problemen met de Afstand van aanraakdoelen op te lossen, zorg ervoor dat elk interactief element ofwel ten minste 24pt × 24pt is of genoeg marge heeft zodat een cirkel van 24pt-diameter gecentreerd erop geen aangrenzend interactief doel overlapt.

UIKit

Stel de minimumhoogte en -breedte in op 24pt en voeg marge toe tussen aangrenzende interactieve elementen.

In storyboard:

1. Navigeer naar het interactieve element
2. Open het Inspecteurs-paneel als het niet zichtbaar is
3. Selecteer de Grootte-inspecteur
4. Onder View, update de width en height parameters tot minstens 24pt

In code:

Werk de width en height van het element's frame bij naar minstens 24pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Gebruik een .frame modifier op het interactieve element om de minimale hoogte en breedte in te stellen.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

Pas de hoogte en breedte aan van interactieve elementen en gebruik layouteigenschappen om ruimte tussen hen toe te voegen.

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Bepaalde elementen staan niet gemakkelijk grootteaanpassingen toe. Deze kunnen worden omhuld in een View met een flex lay-out, gebruikmakend van de gap eigenschap om een goede afstand tussen elementen te bereiken:

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
   <Slider
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   />
</View>

Flutter

Flutter's Material-widgets handhaven standaard een aanraakbaar gebied van 48pt bij 48pt, wat doorgaans voldoende ruimte biedt. Overtredingen komen waarschijnlijk het meest voor bij aangepaste aanraakdoelen gemaakt met GestureDetector, waar de ruimte handmatig moet worden beheerd.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Kan ik deze regel negeren?

Touch Target Spacing heeft een Serieuze impact voor gebruikers. We raden aan dit probleem op te lossen, behalve in zeldzame gevallen waarin lay-outbeperkingen het echt onmogelijk maken. Lees meer over regels negeren.

Bronnen

Deque University Cursuspagina's

• WCAG 2.2 - 2.5.8 Touch Target (AAA)

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

Andere bronnen

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C Aanbeveling
  • Sucesscriterium 2.5.8 - Doelgrootte (Minimum)
• WCAG 2.2 Begrijpen Documenten
  • Begrijpen 2.5.8 AA - Doelgrootte (Minimum)