Aanraakdoelafstand

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Waar We Op Letten

Interactieve elementen moeten een minimale afmeting hebben van 24dp bij 24dp, of voldoende opvulling eromheen zodat, als er een cirkel met een diameter van 24dp op het midden van het element wordt geplaatst, de cirkel geen ander doelwit noch de cirkel voor een ander doelwit kruist.

Het aanraakgebied van een interactief element kan potentieel worden uitgebreid buiten de visuele grenzen - bijvoorbeeld door een TouchDelegate te gebruiken om het actieve aanraakgebied te vergroten. Na grondige overweging handhaaft Deque dat het best practice is om de visuele en interactieve grenzen van het doelwit 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 de minimale 24dp bereiken.

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. In het Attributen paneel, observeer 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 minstens 24dp × 24dp, en er zijn geen overlappende elementen die het beschikbare aanraakgebied tot onder het minimum verminderen
• 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 naburig doel kruist
• Geslaagd: Schuifregelaars behouden minstens 24dp ruimte langs de lengte van het element
• Niet geslaagd: Het element is kleiner dan 24dp × 24dp, met onvoldoende ruimte tussen zichzelf en naburige interactieve elementen
• Niet geslaagd: Een naburig interactief element vermindert het aanraakbare gebied van het geteste element tot onder de minimaal vereiste grens

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 in op minimumHeight en minimumWidth tot 24dp, en voeg marge toe tussen naburige 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 aanpassen qua grootte. Deze kunnen worden ingepakt in een View met een flex-lay-out, 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

Flutters Material-widgets handhaven standaard een aanraakgebied van 48pt bij 48pt, wat meestal voldoende ruimte biedt. Overtredingen zijn waarschijnlijker bij aangepaste aanraakdoelen die zijn gebouwd 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?

Ruimte tussen aanraakdoelen heeft een serieuze impact op gebruikers. We raden aan om dit probleem te verhelpen, 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 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
  • Succescriterium 2.5.8 - Doelgrootte (Minimaal)
• WCAG 2.2 Begrijpende Documenten
  • Begrip 2.5.8 AA - Doelgrootte (Minimaal)