Afstand van aanraakdoelen

Wat We Controleren

Interactieve elementen moeten een minimale afmeting hebben van 24 × 24 punten, of voldoende opvulling rondom hebben, zodat als er een cirkel met een diameter van 24 punten in het midden van het element wordt geplaatst, de cirkel geen ander doel kruist noch met de cirkel voor een ander doel.

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.

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. Selecteer binnen Xcode 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 ten minste 24pt × 24pt, en er zijn geen overlappende elementen die het beschikbare klikbare gebied onder het minimum verlagen
• Geslaagd: Het element is kleiner dan 24pt × 24pt, maar de opvulling eromheen is groot genoeg dat een cirkel met een diameter van 24pt gecentreerd op het element geen aangrenzend doel kruist
• Geslaagd: Sliders 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 aangrenzend interactief element vermindert het klikbare gebied van het geteste element tot onder de minimumdrempel

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, werk de width en height parameters bij naar minstens 24pt

In code:

Werk de width en height van het element bij frame om minstens 24pt te zijn.

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 laten geen eenvoudige grootte-aanpassingen toe. Deze kunnen worden omhuld met een View met een flex-layout, waarbij de gap eigenschap wordt gebruikt om de juiste 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

Material-widgets van Flutter handhaven standaard een aanraakgebied van 48pt bij 48pt, wat meestal voor voldoende ruimte zorgt. Overtredingen gebeuren waarschijnlijker met aangepaste tikdoelen die zijn gebouwd met GestureDetector, waarbij afstand 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?

Afstand van aanraakdoelen heeft een Serieuze impact voor gebruikers. We raden aan om dit probleem te verhelpen, behalve in zeldzame gevallen waarin layoutbeperkingen het echt onmogelijk maken. Leer 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

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