Aanraakdoelafstand

Leer hoe we kunstmatige intelligentie gebruiken voor deze regel!

Waar We Op Letten

Interactieve elementen moeten een minimale afmeting van 24dp bij 24dp hebben, of voldoende opvulling eromheen zodat, als een cirkel met een diameter van 24dp in het midden van het element wordt geplaatst, de cirkel zich niet met een ander doelwit noch met de cirkel van een ander doelwit snijdt.

Het aanraakgebied van een interactief element kan mogelijk worden uitgebreid buiten zijn visuele grenzen - bijvoorbeeld door een TouchDelegate te gebruiken om het actieve aanraakgebied te vergroten. Na zorgvuldige overweging beweert Deque dat het een beste praktijk is om de visuele en interactieve grenzen van het doelwit op één lijn te houden. Dit geeft de eindgebruiker een duidelijk gebied om mee te werken voor de beste kans op succes. Daarom wordt in deze regel ook getest of de visuele grenzen van interactieve elementen voldoen aan de minimale 24dp.

Fout Voorbeeld ❌

Touch target spacing is onvoldoende

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

Gebruikers met motorische beperkingen kunnen per ongeluk het verkeerde element activeren

Goed Voorbeeld ✅

Touch target spacing is voldoende

Elke bediening is ofwel minstens 24dp × 24dp, of heeft genoeg omliggende ruimte zodat een cirkel met een diameter van 24dp gecentreerd erop geen aangrenzend doelwit snijdt

In Een Oogopslag

• Deze regel heeft een serieuze impact voor gebruikers
• Interactieve elementen moeten minstens 24dp × 24dp zijn, OF zo gepositioneerd dat een cirkel met een diameter van 24dp gecentreerd op het element geen overlappende doelen raakt
• Zowel de visuele als interactieve (aanraakgebied) grenzen moeten aan de minimumvereiste voldoen
• Schuifregelaars moeten minstens 24dp ruimte langs hun lengte behouden

Impact op Gebruikers

Op een aanraakapparaat zijn kleine bedieningselementen een bruikbaarheidsprobleem voor iedereen. Bovendien hebben mensen met motorische beperkingen meer moeite met het bedienen van kleine doelen die te dicht bij elkaar liggen om onafhankelijk geactiveerd te worden.

Bevestig Probleem met Aanraakdoelafstand

Voer de applicatie uit en navigeer naar het scherm met het element dat getest moet worden.

1. Open in Android Studio de Layout Inspector (Tools > Layout Inspector)
2. Selecteer het element dat getest moet worden in de componentenboom of het canvas
3. Observeer in het Attributen-paneel de breedte, hoogte en positie van het geselecteerde element ten opzichte van naburige interactieve elementen
4. Identificeer indien nodig de pixeldichtheid van het apparaat om dp-waarden te bevestigen

Eén van de volgende uitkomsten is van toepassing:

• Geslaagd: Het element is minimaal 24dp × 24dp, en er zijn geen overlappende elementen die het beschikbare aanraakoppervlak onder het minimum reduceren
• Geslaagd: Het element is kleiner dan 24dp × 24dp, maar de opvulling eromheen is groot genoeg zodat een cirkel met een diameter van 24dp gecentreerd op het element geen aangrenzend doelwit snijdt
• Geslaagd: Schuifregelaars houden minstens 24dp ruimte langs de lengte van het element aan
• Niet geslaagd: Het element is kleiner dan 24dp × 24dp, met onvoldoende ruimte tussen zichzelf en aangrenzende interactieve elementen
• Niet geslaagd: Een naburig interactief element vermindert het aanraakoppervlak van het geteste element tot onder de minimale drempel

Problemen Oplossen

Om problemen met Aanraakdoelafstand op te lossen, zorg ervoor dat elk interactief element ofwel minstens 24dp × 24dp is, of voldoende marge heeft zodat een cirkel met een diameter van 24dp gecentreerd op het element geen naburig interactief doel kruist.

XML

Stel minimumHeight en minimumWidth in op 24dp, en voeg marge toe tussen aangrenzende interactieve elementen.

In code:

Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);

In lay-outdefinitie:

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="24dp"
     android:minimumWidth="24dp"
     android:text="@string/batman_likes_accessible_buttons" />

Samenstellen

Gebruik Modifier.defaultMinSize om een minimale hoogte en breedte in te stellen, en padding om ruimte toe te voegen tussen aangrenzende interactieve elementen.

Button(
    modifier = Modifier
        .defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
        .padding(start = 24.dp, top = 24.dp),
    onClick = { }
) {
    Text(stringResource(id = R.string.button))
}

React Native

Pas de hoogte en breedte van interactieve elementen aan, en gebruik lay-outeigenschappen om ruimte ertussen toe te voegen.

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

Bepaalde elementen laten zich niet gemakkelijk in grootte aanpassen. Deze kunnen worden omhuld in een View met een flex-layout, waarbij de gap-eigenschap wordt gebruikt om de juiste ruimte 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 aanraakgebied van 48pt bij 48pt, wat doorgaans voor voldoende ruimte zorgt. Overtredingen komen het meest voor bij aangepaste tapdoelwitten die zijn gemaakt met GestureDetector, waarbij 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. Meer informatie over regels negeren.

Bronnen

Deque University Cursuspagina's

• WCAG 2.2 - 2.5.8 Aanraakdoel (AAA)

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

Andere bronnen

• Richtlijnen voor de Toegankelijkheid van Webinhoud (WCAG) 2.2, W3C Aanbeveling
  • Succes Criterium 2.5.8 - Doelgrootte (Minimum)
• WCAG 2.2 Begrijpende Documenten
  • Inzicht in 2.5.8 AA - Doelgrootte (Minimum)