Je beweegt moeilijk

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

Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Drie oplossingen die niet genoeg zijn:

• Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
• De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
• Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

Open dit onderwerp op een eigen pagina

De eenvoudigste oplossing is geen tooltip bouwen maar de tekst op de pagina zetten. Kan dat niet, dan moeten er drie dingen kloppen.

Escape sluit de uitleg:

element.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { verbergTooltip(); }
});

De aanwijzer kan erheen. Laat geen gat tussen het onderdeel en de uitleg: beweegt de aanwijzer over dat gat, dan telt dat als wegwijzen en verdwijnt de uitleg.

.tooltip {
  margin-block-start: 0;
  padding-block-start: 8px;
  pointer-events: auto;
}

En er zit geen tijdklok op. Een bezoeker die langzaam leest is na drie seconden halverwege:

setTimeout(verbergTooltip, 3000);   /* niet doen */

<button aria-describedby="uitleg-btw">Btw-nummer</button>
<div id="uitleg-btw" role="tooltip">Je btw-nummer staat op je factuur.</div>

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

Met een muis is deze fout nauwelijks te vinden: je klikt, kiest en bent klaar. Met het toetsenbord komt hij meteen boven.

Ga als volgt te werk:

• Tab naar een keuzelijst.
• Ga met de pijltoetsen omlaag door de opties, alsof je aan het kijken bent.
• Gebeurt er iets? Dan is dat de fout.
• Doe hetzelfde met vinkjes en keuzerondjes: spatie erop en kijken of de pagina blijft staan.

Vergeet de tekstvelden niet. Vul een veld in en druk op Tab om verder te gaan. Verandert er dan iets aan de pagina — een blok dat verschijnt, een sprong naar boven — dan valt dat ook onder dit criterium.

In de code is het ook op te zoeken:

document.querySelectorAll('[onchange], select, input[type=checkbox], input[type=radio]')
  .forEach(function (el) {
    if (el.getAttribute('onchange')) console.warn('onchange:', el);
  });

Zoek in de bronbestanden daarnaast naar form.submit() en addEventListener('change'. Niet elke treffer is fout, maar het zijn wel de plekken om te kijken.

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

De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met scroll-margin geef je die ruimte op.

:where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-block-start: 120px;   /* de hoogte van de koptekst */
  scroll-margin-block-end: 90px;      /* wat er onderaan blijft staan */
}

Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.

body:has(:focus-visible) .chatknop {
  opacity: 0;
  pointer-events: none;
}

De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.

Open dit onderwerp op een eigen pagina

Het bedienen van een onderdeel mag niet vanzelf de context veranderen: geen nieuwe pagina, geen ander venster en geen verplaatste focus. Tenzij vooraf is aangekondigd dat dat gebeurt. Een keuzelijst die zichzelf verstuurt verandert de pagina terwijl de bezoeker nog aan het kiezen is — wie met de pijltjestoetsen door een lijst met landen gaat, is al weg bij de tweede optie.

De drie klassiekers:

• Een keuzelijst die verstuurt. Van land, taal of sortering.
• Een veld dat de focus doorzet. Vier vakjes voor een pincode, en na elk cijfer springt de focus door. Bij een typefout is er geen weg terug.
• Een vinkje dat de pagina herlaadt, bijvoorbeeld een filter dat meteen zoekt.

Wie kijkt, ziet dat de pagina verandert. Wie luistert, hoort een schermlezer opnieuw beginnen zonder te weten waarom. Wie langzaam bedient, raakt in de knel omdat het gebeurt vóór hij klaar is.

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

Dit is een test met pen en papier. Er is geen software voor nodig, en juist daarom wordt hij zelden gedaan.

Ga als volgt te werk:

• Begin bij het begin van een proces met meerdere stappen: een bestelling, een aanvraag, een aanmelding.
• Schrijf bij elke stap op wélke gegevens er gevraagd worden. Niet wat je invult, maar wat er gevraagd wordt.
• Loop het lijstje na. Staat er iets twee keer op?

Staat er iets twee keer, dan is dat een afwijking — tenzij het een wachtwoord is of iets wat echt veranderd kan zijn.

Waar het meestal zit:

• Factuuradres en afleveradres.
• E-mailadres bij het aanmaken van een account en daarna nog eens bij het bestellen.
• Een naam bovenaan een formulier en nog eens bij de ondertekening.
• Een klantnummer dat in stap 1 wordt ingevoerd en in stap 3 opnieuw.

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

Eén regel lost het meeste op: schrijf de HTML in de volgorde waarin de pagina gelezen moet worden, en gebruik CSS alleen om te bepalen wáár iets staat.

Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Het oog volgt de nieuwe plek, het toetsenbord de oude:

.blok    { order: -1; }
.raster  { grid-row: 1; grid-column: 2; }
.zijbalk { position: absolute; right: 0; }

Wil je de tekst links en het beeld rechts, zet de tekst dan eerst in de HTML. Op een smal scherm komt alles onder elkaar in die volgorde te staan, en dan klopt het daar ook.

<div class="tweeluik">
  <div class="tekst">…</div>       <!-- eerst lezen, eerst in de code -->
  <figure class="beeld">…</figure>
</div>

.tweeluik { display: grid; grid-template-columns: 1fr 1fr; }

Let daarnaast op twee plekken waar de volgorde met script wordt bepaald. Een venster dat opengaat hoort de focus mee te nemen en bij het sluiten terug te geven aan de knop waarop is gedrukt. Een menu dat uitklapt hoort zijn onderdelen meteen na de knop te hebben staan, niet onderaan de pagina.

Open dit onderwerp op een eigen pagina

De focusvolgorde is te toetsen met het toetsenbord en het oog. Er is geen software voor nodig.

Ga als volgt te werk:

• Klik bovenaan de pagina, buiten een link of invoerveld.
• Druk op Tab en volg met je ogen waar de focus heen springt.
• Teken die route in gedachten na: loopt hij van links naar rechts en van boven naar beneden?

Springt de focus vooruit en dan weer terug omhoog, dan is de afwijking gevonden. Begin bij formulieren: daar heeft een verkeerde volgorde de meeste gevolgen.

Drie plekken waar het vaak misgaat:

• Een venster dat opengaat en de focus achterlaat op de pagina erachter.
• Een uitklapmenu waarvan de onderdelen onderaan de pagina in de code staan.
• Een tweeluik met beeld en tekst waarvan de code omgekeerd is.

Zoek in de bronbestanden daarnaast naar een positieve tabindex. Elke treffer is vrijwel zeker een fout:

tabindex="1"
tabindex="2"

Zoek ook naar order: en flex-direction: row-reverse in het stijlbestand. Dat hoeft geen fout te zijn, maar het is wel de plek waar je moet kijken.

Open dit onderwerp op een eigen pagina

De zichtbaarheid van de focus is met het toetsenbord te toetsen. Er is geen software voor nodig.

Ga als volgt te werk:

• Open de pagina en klik één keer bovenaan, buiten een link of invoerveld.
• Druk op Tab, en blijf drukken tot je onderaan de pagina bent.
• Kijk bij elke druk of zichtbaar is welk onderdeel is geselecteerd.

Let daarbij op vier dingen:

• Verdwijnt de focus? Er verandert niets in beeld, terwijl er wel iets is geselecteerd.
• Springt de focus heen en weer? Dan klopt de volgorde niet met wat er staat. Dat valt onder 2.4.3.
• Kom je ergens niet meer weg? Een venster of videospeler die je met Tab niet uit komt is een toetsenbordval.
• Schuift de pagina mee? Staat het geselecteerde onderdeel half onder een vaste balk, dan valt dat onder 2.4.11.

Is de focus nergens te zien, zoek dan in het stijlbestand naar deze regels:

outline: none;
outline: 0;

Staan die er, en staat er geen eigen rand voor in de plaats, dan is de oorzaak gevonden.

Open dit onderwerp op een eigen pagina

Zoek eerst alles op wat verschijnt bij aanwijzen of bij focus. Dat zijn meestal vraagtekens, pictogrammen, menu’s en linkvoorbeelden.

Ga daarna als volgt te werk:

• Wijs het onderdeel aan tot de uitleg verschijnt.
• Beweeg de aanwijzer langzaam naar de uitleg toe. Blijft hij staan?
• Ga met de aanwijzer over de uitleg heen. Blijft hij nog steeds staan?
• Druk op Escape zonder de aanwijzer te verplaatsen. Verdwijnt hij?
• Wijs opnieuw aan en wacht tien seconden. Verdwijnt hij vanzelf?

Doe de test daarna met het toetsenbord. Tab naar hetzelfde onderdeel: verschijnt de uitleg ook dan? Zo niet, dan mist een deel van de bezoekers hem helemaal.

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

Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.

Ga als volgt te werk:

• Scroll een halve pagina naar beneden.
• Klik ergens in de tekst, buiten een link.
• Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
• Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.

Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.

Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:

document.addEventListener('focusin', function (e) {
  var r = e.target.getBoundingClientRect();
  var boven = document.elementFromPoint(r.left + 4, r.top + 4);
  if (boven && boven !== e.target && !e.target.contains(boven)) {
    console.warn('bedekt door', boven, e.target);
  }
});

Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.

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

Gegevens die binnen hetzelfde proces al zijn ingevuld, mogen niet een tweede keer worden gevraagd. Gebeurt dat toch, dan moeten ze automatisch worden ingevuld of te kiezen zijn uit wat er al staat. Overbodig typen is niet gelijk verdeeld: wie met één vinger, met zijn stem of met een schakelaar werkt is er minuten mee kwijt, en maakt bij elke aanslag kans op een fout.

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

Er zijn twee uitzonderingen: als het opnieuw invullen nodig is voor de veiligheid, zoals bij een wachtwoord, en als de oude informatie niet meer geldig is.

Open dit onderwerp op een eigen pagina

De eis laat vrij hóe het wordt opgelost. Er zijn drie manieren, en welke past hangt af van hoe zeker het antwoord hetzelfde is.

Weet je het antwoord zeker, vul het dan in. De bezoeker kan het nog aanpassen:

<label for="post-straat">Straat en huisnummer</label>
<input id="post-straat" name="post_straat"
       value="Marsweg 89A"
       autocomplete="shipping street-address">

Een vinkje “hetzelfde als hierboven” is de bekendste oplossing en meestal de beste. Zet hem aan als dat het gewone geval is, dan hoeft de meerderheid niets te doen:

<input type="checkbox" id="zelfde" name="zelfde" checked>
<label for="zelfde">Mijn afleveradres is hetzelfde als mijn factuuradres</label>

Zijn er meerdere eerdere antwoorden, geef dan een keuzelijst in plaats van een leeg veld.

Zet daarnaast op elk veld het juiste autocomplete-woord. Dan vult de browser of de wachtwoordbeheerder het zelf in, zonder eigen code. Daarmee voldoe je meteen aan 1.3.5 Identificeer het doel van de input:

autocomplete="name"
autocomplete="email"
autocomplete="postal-code"
autocomplete="shipping street-address"
autocomplete="billing street-address"

Open dit onderwerp op een eigen pagina

Er is één oplossing die altijd werkt en die in twee minuten is gebouwd: zet er een knop naast.

<!-- niet doen -->
<select onchange="this.form.submit()">

<!-- wel doen -->
<select id="sortering" name="sortering">…</select>
<button type="submit">Toon resultaten</button>

Dat kost één klik en voorkomt dat een bezoeker per ongeluk ergens anders belandt. Het werkt bovendien zonder JavaScript.

Wil je toch automatisch versturen, dan mag dat als je het vooraf aankondigt. Zet die aankondiging in het label en niet erachter, anders wordt hij pas gelezen als het al is gebeurd:

<label for="taal">Taal <span class="hint">(de pagina laadt opnieuw)</span></label>
<select id="taal" name="taal" onchange="this.form.submit()">

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

Wie met het toetsenbord werkt krijgt de pagina als een rij: eerst dit, dan dat. Het overzicht dat een ziende bezoeker in één blik heeft, ontbreekt daarbij. Klopt de volgorde van de focus niet met de volgorde waarin de pagina te lezen is, dan raakt de bezoeker de draad kwijt. Zorg daarom dat de focus in een logische volgorde door de pagina loopt.

De oorzaak is bijna altijd dezelfde. Het ontwerp vraagt het beeld rechts en de tekst links; in de code staat het beeld eerst en wordt het met CSS naar rechts geschoven. Op het scherm klopt dat, maar de focus volgt de code. De bezoeker springt dan eerst naar rechts, dan naar links en dan weer naar rechts.

Bij een formulier heeft dat gevolgen. Gaat de focus van Postcode naar Versturen en pas daarna naar Huisnummer, dan wordt het formulier half ingevuld verstuurd.

Open dit onderwerp op een eigen pagina

Een balk die vastgeplakt in beeld blijft staan kan het onderdeel bedekken waar de toetsenbordfocus net naartoe is gesprongen. De bezoeker ziet dan niet welk onderdeel is geselecteerd en weet niet wat er gebeurt bij het indrukken van Enter. Zorg daarom dat het onderdeel met de focus niet volledig bedekt wordt.

Een deel mag bedekt zijn, als de rest maar zichtbaar blijft. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA, dus het valt onder de wettelijke eis. Er is ook een strengere versie: 2.4.12 Focus niet bedekt (uitgebreid) op niveau AAA, waarbij er niets overheen mag staan.

De oorzaak is bijna altijd een van deze:

• Een menubalk die vastgeplakt bovenaan blijft staan.
• Een cookiemelding onderaan het scherm.
• Een chatknop in de hoek.
• Een balk met acties die verschijnt zodra de bezoeker scrolt.
• Een tabel met een vastgezette kop of kolom.

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

Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

Dit raakt vooral:

• Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
• Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
• Bezoekers die met een schakelaar of met hun stem werken.

De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

Open dit onderwerp op een eigen pagina

Verschijnt er extra inhoud zodra een bezoeker iets aanwijst of met het toetsenbord selecteert — een tooltip, een uitklapmenu, een voorbeeldvenster — dan moet die inhoud te lezen zijn. Wie ingezoomd werkt ziet de uitleg buiten zijn deel van het scherm staan en moet er met de aanwijzer naartoe. Verdwijnt de uitleg onderweg, dan is hij onbereikbaar.

Er gelden drie eisen:

• Wegklikbaar. De uitleg is te sluiten met Escape, zonder de aanwijzer te verplaatsen.
• Aanwijsbaar. De aanwijzer kan erheen zonder dat de uitleg verdwijnt.
• Blijvend. De uitleg blijft staan tot de bezoeker wegwijst, hem sluit of de informatie niet meer klopt. Niet tot een tijdklok afloopt.

Waar dit opduikt: tooltips bij een pictogram of vraagteken, uitklapmenu’s die opengaan bij aanwijzen, voorbeeldvensters bij een link, foutmeldingen die bij focus verschijnen, en een winkelmandje dat opengaat bij aanwijzen.

Open dit onderwerp op een eigen pagina