Toegankelijk inloggen: authenticatie zonder puzzel

Er heerst een hardnekkig idee dat een inlogscherm veiliger wordt naarmate het lastiger is. Plakken uitzetten in het wachtwoordveld, een rekensom eronder, een puzzel met verkeerslichten, en een code die binnen dertig seconden moet worden overgetypt. Voor aanvallers maakt het vaak weinig uit. Voor klanten met dyslexie, een geheugenprobleem, een motorische beperking of gewoon een lange werkdag wordt het een muur. Toegankelijk inloggen en veilig inloggen gaan prima samen, als u weet waar de knelpunten zitten.

Wat WCAG 2.2 vraagt: criterium 3.3.8

Met WCAG 2.2, gepubliceerd in oktober 2023, kwam criterium 3.3.8 “Toegankelijke authenticatie (minimum)” op niveau AA. De kern: geen stap in het inlogproces mag afhangen van een cognitieve functietest, tenzij er een alternatief is of een hulpmiddel dat de test overneemt.

Een cognitieve functietest is iets wat u moet onthouden, overschrijven, uitrekenen of oplossen. Een wachtwoord uit het hoofd kennen hoort daarbij. Dat betekent niet dat wachtwoorden verboden zijn. Het betekent dat de gebruiker het niet uit zijn hoofd hoeft te typen. Als een wachtwoordmanager het kan invullen of als plakken werkt, is het in orde.

Er zijn twee uitzonderingen die op AA-niveau zijn toegestaan:

• Objecten herkennen. Een test die vraagt om bijvoorbeeld foto’s met een fiets aan te wijzen, mag op AA nog. Op AAA (criterium 3.3.9) niet meer.
• Persoonlijke inhoud. Een afbeelding herkennen die de gebruiker zelf eerder heeft geüpload.

Ook die uitzonderingen zijn voor mensen met een visuele beperking vaak onbruikbaar zonder alternatief. Daarover meer in het artikel over captcha's en toegankelijkheid.

Plakken en wachtwoordmanagers

Dit is de snelste winst. Controleer of uw inlogformulier:

• plakken toestaat in het wachtwoordveld en in het veld voor een verificatiecode;
• de juiste autocomplete-waarden heeft, zodat browsers en wachtwoordmanagers het herkennen;
• gewone invoervelden gebruikt, niet zes losse vakjes voor een code die elk maar één teken accepteren en plakken onmogelijk maken.

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

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

<label for="code">Code uit de app</label>
<input id="code" inputmode="numeric" autocomplete="one-time-code">

Bij registreren of wachtwoord wijzigen gebruikt u autocomplete="new-password", zodat de wachtwoordmanager een sterk wachtwoord kan voorstellen. Meer over deze waarden staat in autocomplete in formulieren.

Een knop om het wachtwoord zichtbaar te maken helpt ook. Wie moeite heeft met typen, ziet dan of hij een fout maakt voordat hij op Inloggen drukt. Zorg dat die knop een naam heeft, zoals “Wachtwoord tonen”, en met het toetsenbord bereikbaar is.

Tweestapsverificatie zonder overtypen

Tweestapsverificatie is een goede maatregel, ook voor beheerders van een WordPress-site; zie tweestapsverificatie voor WordPress. Voor toegankelijkheid gaat het om de vorm:

Captcha’s en beveiligingsvragen

Klassieke captcha’s met vervormde letters zijn een cognitieve functietest: u moet tekens herkennen en overtypen. Een rekensom (“Hoeveel is 4 plus 7?”) ook. Zonder alternatief voldoen ze niet aan 3.3.8. Beveiligingsvragen als “Wat was de naam van uw eerste huisdier?” vragen om iets te onthouden en hebben hetzelfde probleem.

Er zijn betere manieren om robots buiten te houden, zoals onzichtbare controles op de achtergrond, beperken van het aantal inlogpogingen en melden bij verdacht gedrag. Bij formulieren die geen inlog zijn, zoals een contactformulier, speelt 3.3.8 niet, maar daar zijn captcha’s om andere redenen lastig. Hoe u spam tegengaat zonder bezoekers te hinderen, leest u in de bredere uitleg over toegankelijke formulieren.

Foutmeldingen en tijdslimieten bij het inloggen

Ook de rest van het inlogscherm telt mee. Een paar dingen die we vaak tegenkomen:

• Een vage foutmelding zoals “Ongeldige invoer”. Zeg liever “E-mailadres of wachtwoord klopt niet” en zet de focus terug in het formulier.
• Een melding die alleen in rood verschijnt en niet wordt voorgelezen. Koppel de melding aan het formulier en laat een screenreader hem aankondigen.
• Het formulier wordt leeggemaakt na een fout. Laat het e-mailadres staan, zodat de gebruiker alleen het wachtwoord opnieuw hoeft in te voeren.
• Een sessie die verloopt tijdens het invullen van een code. Geef een waarschuwing en de mogelijkheid om meer tijd te krijgen.
• Een blokkade na drie pogingen zonder uitleg hoe het verder moet. Zeg wat er gebeurt en hoe iemand weer toegang krijgt.

Vergeet de herstelroute niet

Criterium 3.3.8 geldt voor elke stap van de authenticatie, dus ook voor “Wachtwoord vergeten”. Die route wordt vaak minder zorgvuldig gebouwd dan het inlogscherm zelf. Zet de link duidelijk zichtbaar bij het wachtwoordveld, niet onder in kleine grijze letters. Vraag niet om gegevens die iemand moet opzoeken of onthouden, zoals een klantnummer, als een e-mailadres ook volstaat. En zorg dat het formulier voor een nieuw wachtwoord dezelfde regels volgt: plakken toegestaan, new-password als autocomplete en de eisen aan het wachtwoord vooraf in tekst vermeld, niet pas in de foutmelding.

Let ook op hoe lang iemand mag doen over inloggen of afrekenen. Een sessie die na een paar minuten verloopt, is voor veel bezoekers net te kort. Hoe u dat oplost, staat in tijdslimieten op uw website.

Is toegankelijk inloggen op uw site mogelijk? Zelf testen

1. Kopieer uw wachtwoord uit een wachtwoordmanager en plak het in het veld. Lukt dat?
2. Laat de browser het formulier invullen. Worden beide velden herkend?
3. Plak een verificatiecode in het codeveld, ook als dat uit losse vakjes bestaat.
4. Typ bewust een fout wachtwoord. Is de melding duidelijk en blijft het e-mailadres staan?
5. Kijk of er ergens een puzzel, som of geheugenvraag is zonder alternatief.

In WordPress zit het inlogscherm vaak in WooCommerce, een ledenplugin of een beveiligingsplugin. Die laatste voegen soms een captcha toe zonder dat iemand er nog aan denkt. Kijk na elke wijziging aan uw beveiliging of het inloggen nog voor iedereen werkt. Meer over het grotere plaatje vindt u op onze pagina over een toegankelijke website.