Aanwijzer

Slepen vraagt drie dingen tegelijk: precies raken, ingedrukt houden en tegelijk bewegen. Voor wie beeft, met zijn ogen aanwijst of een schakelaar gebruikt zijn dat drie opgaven achter elkaar. Kan een functie alleen met slepen worden bediend, zorg dan dat die ook met losse klikken of tikken werkt.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA.

Waar het opduikt:

• Schuifregelaars voor een prijsbereik of het volume.
• Lijsten die je herschikt door onderdelen te verslepen.
• Kaarten die je moet verschuiven om een ander gebied te zien.
• Een carrousel die alleen met vegen te bedienen is.

Er is een uitzondering als het slepen de handeling zelf is: een handtekening zetten, tekenen, schilderen. Bij twijfel helpt één vraag: is hetzelfde resultaat met knoppen te bereiken? Bij een schuifregelaar wel, bij een handtekening niet.

Open dit onderwerp op een eigen pagina

Zet de automatische schermdraaiing van de telefoon aan, open de site en draai het toestel om. Meer is er niet nodig.

Waar je op let:

• Verschijnt er een melding dat je moet draaien? Dan is dat de fout.
• Blijft alle inhoud zichtbaar en bruikbaar?
• Gaat het menu nog open, en past het op het scherm?
• Werkt een formulier nog, inclusief de knop onderaan?
• Blijf je op dezelfde plek in de pagina, of springt hij naar boven?

Zonder telefoon kan het ook: maak het browservenster laag en breed, bijvoorbeeld 900 bij 400 pixels. In de ontwikkelaarshulpmiddelen van de browser is ook een toestel te kiezen en te draaien.

Open dit onderwerp op een eigen pagina

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);

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

De fout zit bijna altijd op één van twee plekken. De eerste is een media query die de inhoud verbergt:

/* verbergt de site in liggende stand — nooit doen */
@media (orientation: landscape) {
  .inhoud { display: none; }
  .draai-melding { display: block; }
}

Gebruik orientation gerust om de indeling aan te passen. Gebruik hem nooit om iets te verbergen.

De tweede is het manifest of de app-instellingen:

{
  "orientation": "portrait"
}

De melding weghalen is de eerste stap. De tweede is zorgen dat het er liggend ook goed uitziet. In liggende stand is het scherm laag en breed, en dat is dezelfde situatie als bij inzoomen:

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hero { min-block-size: 60vh; }   /* niet: height: 60vh */

Open dit onderwerp op een eigen pagina

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.

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

Open dit onderwerp op een eigen pagina

Een knop of link moet minstens 24 bij 24 pixels groot zijn. Is hij kleiner, dan moet er minstens 24 pixels ruimte omheen zitten waar geen andere knop staat. Een vingertop is ongeveer een centimeter breed, zo’n 40 pixels, en dus groter dan een sluitkruisje van 16 bij 16.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA. Vierentwintig is een ondergrens en geen streefwaarde: voor een vinger is 44 pixels prettiger. Apple en Google houden in hun eigen richtlijnen 44 en 48 aan.

Dit raakt vooral:

• Bezoekers met trillende handen, door parkinson, MS of ouderdom.
• Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
• Bezoekers met één werkende hand, die de telefoon vasthouden en bedienen met dezelfde duim.

Open dit onderwerp op een eigen pagina

Hiervoor is geen software nodig die je moet installeren. De browser toont de maat van elk onderdeel.

Eén knop meten:

• Klik met de rechtermuisknop op de knop en kies Inspecteren.
• Beweeg de muis over het onderdeel in de code. De browser tekent het gebied op de pagina en zet de maat erbij, bijvoorbeeld 18 × 18.
• Is een van beide getallen kleiner dan 24, meet dan de ruimte tot de knop ernaast.

Een hele pagina in één keer: plak dit in het tabblad Console. Het zet een rode rand om elke knop en link die te klein is.

document.querySelectorAll('a, button, input, select, summary')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.width) + '×' + Math.round(r.height), el);
    }
  });

Doe de test ook op een smal scherm. Knoppen die op een breed scherm ruim staan, komen op een telefoon tegen elkaar aan.

Open dit onderwerp op een eigen pagina

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

Zoek eerst alles op wat normaal versleept wordt: schuifregelaars, herschikbare lijsten, kaarten en carrousels.

Ga daarna als volgt te werk:

• Bedien het onderdeel zonder ingedrukt te houden.
• Gebruik alleen losse klikken of tikken.
• Lukt het niet, dan is dat de afwijking.

Doe de test daarna nog eens met alleen het toetsenbord. Dat is 2.1.1 Toetsenbord, maar het gaat vaak om dezelfde onderdelen.

Test ook op een aanraakscherm. Onderdelen die met een muis goed werken zijn met een vinger soms alleen te vegen, en dan is er geen alternatief.

Uitzonderingen waar je geen afwijking op hoeft te melden:

• Een handtekening zetten. Het pad dat wordt getrokken is het resultaat.
• Tekenen of schilderen.
• Een handeling waarbij de precieze plek telt en die niet in stappen te doen is.

Open dit onderwerp op een eigen pagina

Knoppen hoeven er niet groter uit te zien. Het gaat om het gebied dat op een tik reageert, en dat mag onzichtbaar zijn.

De eenvoudigste oplossing laat het pictogram op 16 pixels staan en maakt de knop eromheen 24:

.icoonknop {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Is er echt geen ruimte, vergroot het gebied dan met een onzichtbare laag over de knop heen. Het beeld blijft klein, het doel wordt groot:

.icoonknop { position: relative; }

.icoonknop::after {
  content: "";
  position: absolute;
  inset: -8px;          /* 8 pixels extra aan elke kant */
}

Waar het meestal misgaat:

• Rijen pictogrammen naast elkaar in een tabel of werkbalk.
• Het sluitkruisje van een venster. Dat is bijna altijd te klein, terwijl het de knop is die iemand onder tijdsdruk zoekt.
• Paginanummers onder een lijst, vaak 20 bij 20 met een paar pixels ertussen.

Open dit onderwerp op een eigen pagina

De oplossing is bijna altijd hetzelfde: het slepen blijft, er komt een manier met losse klikken naast.

Bij een schuifregelaar gebruik je input type="range", die met de pijltoetsen te bedienen is. Voor de aanwijzer zet je er twee knoppen naast, met het getal erbij zodat zichtbaar is wat er verandert:

<button type="button" aria-label="Minder">−</button>
<input type="range" id="prijs" min="0" max="500" step="10" value="100">
<button type="button" aria-label="Meer">+</button>
<output for="prijs">100 euro</output>

Bij een lijst die herschikt kan worden zet je bij elk onderdeel een knop omhoog en een knop omlaag. Dat werkt met de muis, met een aanraakscherm, met een toetsenbord en met een schermlezer:

<li>
  Nieuwsbrief
  <button type="button" aria-label="Nieuwsbrief omhoog">↑</button>
  <button type="button" aria-label="Nieuwsbrief omlaag">↓</button>
</li>

Bij een carrousel horen er knoppen voor vorige en volgende te zijn naast het vegen. Bij een kaart knoppen om te verschuiven en te zoomen; de meeste kaartbibliotheken hebben die al, maar soms staan ze uit.

Open dit onderwerp op een eigen pagina

Een website moet werken in zowel de staande als de liggende stand. Niet iedereen kan zijn apparaat draaien: een telefoon in een houder op een rolstoel staat vast, en wie een tablet op een standaard heeft staan of met één hand werkt kan dat ook niet. Een melding als “Draai je scherm voor de beste ervaring” maakt de site voor die bezoekers onbruikbaar.

Je mag geen stand afdwingen, tenzij het echt niet anders kan — een piano-app of het fotograferen van een cheque zijn de gebruikelijke voorbeelden.

Wat er ook onder valt:

• Een pagina die alleen in staande stand een menu toont.
• Een videospeler die in liggende stand het scherm overneemt en niet meer terug wil.
• Een app die in de manifest-instellingen op één stand is vastgezet.

Open dit onderwerp op een eigen pagina