Toetsenbord

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

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

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

Wie een wachtwoordbeheerder gebruikt hoeft niets te onthouden en niets over te typen. Daarmee is de eis vervuld, zolang de site die beheerder niet in de weg zit.

Zet daarom het juiste autocomplete-woord op elk veld:

<label for="gebruiker">E-mailadres</label>
<input id="gebruiker" name="gebruiker" type="email"
       autocomplete="username">

<label for="wachtwoord">Wachtwoord</label>
<input id="wachtwoord" name="wachtwoord" type="password"
       autocomplete="current-password">

<label for="code">Code uit je sms</label>
<input id="code" name="code" type="text" inputmode="numeric"
       autocomplete="one-time-code">

De laatste wordt het vaakst vergeten en helpt het meest: met one-time-code biedt de telefoon de code uit de sms zelf aan boven het toetsenbord.

Drie dingen die je niet moet doen:

• Plakken blokkeren. Bedoeld tegen slordigheid, werkt alleen tegen wie het goed doet.
• De code opknippen in losse vakjes. Geen wachtwoordbeheerder komt daar doorheen.
• Het wachtwoordveld hernoemen om beheerders te misleiden.

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

Bij het inloggen mag geen cognitieve test worden opgelegd: geen puzzel, geen code die onthouden en overgetypt moet worden, en geen vraag naar iets wat de bezoeker uit zijn hoofd moet weten. De inlog is de plek waar iedere gebruiker langs moet; wat daar misgaat maakt de rest van de dienst onbereikbaar.

Er zijn twee uitwegen. Er mag een alternatief zijn dat de test niet vraagt, of de test mag gaan over het herkennen van objecten of van een plaatje dat de bezoeker zelf heeft aangeleverd. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA.

Waar het misgaat:

• Een CAPTCHA met vervormde letters. Dat is puur een test.
• Een code uit een sms die overgetypt moet worden in een venster dat de sms bedekt.
• Zes losse vakjes voor die code, waar geen wachtwoordbeheerder mee overweg kan.
• Een beveiligingsvraag over een eerste huisdier of de meisjesnaam van een moeder.
• Plakken blokkeren in het wachtwoordveld.

Open dit onderwerp op een eigen pagina

Deze test duurt vijf minuten en gaat met een eigen account.

Ga als volgt te werk:

• Zet het wachtwoord in een wachtwoordbeheerder.
• Log uit en weer in. Vult de beheerder beide velden?
• Komt er een tweede stap? Is die code te plakken, of wordt hij aangeboden?
• Noteer alles wat met het hoofd of de vingers moest gebeuren.

Waar je op let:

• Losse vakjes voor de code. Probeer te plakken — lukt het?
• Een CAPTCHA in welke vorm dan ook.
• Een beveiligingsvraag.
• Een tijdslimiet die niet gehaald wordt bij langzaam typen.
• Een venster dat de sms bedekt, zodat de code niet te lezen is.

De controle in de code:

document.querySelectorAll('input').forEach(function (el) {
  console.log(el.type, '·', el.autocomplete || 'GEEN AUTOCOMPLETE', '·', el.name);
});

Staat er bij het wachtwoordveld geen current-password en bij het codeveld geen one-time-code, dan is duidelijk waar te beginnen.

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

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

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

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

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

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