Direct naar de inhoud

Succescriterium 2.5.2 Aanwijzerannulering

Niveau A

Lees de officiële tekst van succescriterium 2.5.2 Aanwijzerannulering

  • Klik annuleren: click en niet mousedown

    Een gewone knop met een click voldoet al aan dit criterium. De browser voert die pas uit als de bezoeker op hetzelfde onderdeel loslaat.

    // goed: wegschuiven voordat je loslaat en er gebeurt niets
    knop.addEventListener('click', verwijder);
    
    // fout: gaat af zodra de knop wordt geraakt
    knop.addEventListener('mousedown', verwijder);
    knop.addEventListener('pointerdown', verwijder);
    knop.addEventListener('touchstart', verwijder);

    De onderste drie worden meestal gebruikt omdat de knop dan sneller aanvoelt. Dat verschil is een paar honderdste seconde, en het kost de bezoeker de mogelijkheid om zich te bedenken.

    Kun je niet om het indrukken heen, geef dan een weg terug. Een melding met “Ongedaan maken” die tien seconden blijft staan is genoeg, en is voor iedereen een verbetering. Zorg wel dat die melding zelf met het toetsenbord bereikbaar is en lang genoeg blijft staan; anders verplaats je het probleem.

    Open dit onderwerp op een eigen pagina

  • Klik annuleren: wat het criterium vraagt

    Een klik bestaat uit twee momenten: het indrukken en het loslaten. Reageert een knop al op het indrukken, dan is een vergissing niet meer terug te nemen. Reageert hij op het loslaten, dan kan de bezoeker zijn vinger of muis nog wegschuiven en gebeurt er niets.

    Zorg daarom dat een knop pas reageert bij het loslaten. Kan dat niet, geef dan een manier om de actie ongedaan te maken. Dit criterium staat op niveau A.

    Dit maakt verschil voor:

    • Bezoekers met trillende handen, die zelden meteen goed raken.
    • Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
    • Bezoekers die slecht zien en pas bij aanraking merken waar ze zitten.
    • Bezoekers die hun telefoon bedienen terwijl ze bewegen.

    Reageren op het indrukken mag wel als dat bij de handeling hoort. Een pianotoets op een scherm hoort te klinken bij aanraking. Hetzelfde geldt voor slepen en tekenen.

    Het gaat vooral om de knoppen waar een vergissing gevolgen heeft: verwijderen, versturen, betalen en opzeggen.

    Open dit onderwerp op een eigen pagina

  • Klik annuleren: zo test je het

    Deze test duurt tien seconden per knop en vraagt alleen een muis of een vinger.

    Ga als volgt te werk:

    • Druk een knop in en houd vast.
    • Schuif de muis of vinger van de knop af, ernaast.
    • Laat los.

    Er hoort niets te gebeuren. Gebeurt het toch, dan reageert de knop op het indrukken en is de afwijking gevonden.

    Test niet alle knoppen. Begin bij de knoppen waar een vergissing gevolgen heeft: verwijderen, versturen, betalen, opzeggen, en alles wat een venster sluit zonder op te slaan.

    In de console van Chrome is dit ook op te zoeken:

    ['mousedown', 'pointerdown', 'touchstart'].forEach(function (soort) {
      document.querySelectorAll('*').forEach(function (el) {
        if (typeof getEventListeners === 'function' && getEventListeners(el)[soort]) {
          console.warn(soort, el);
        }
      });
    });

    getEventListeners bestaat alleen in de console van Chrome. In andere browsers zoek je in de bronbestanden naar die drie woorden; dat werkt overal.

    Open dit onderwerp op een eigen pagina

Terug naar boven