HTMLhulp.nl logo
Best practices voor toegankelijke loginformulieren in HTML

Best practices voor toegankelijke loginformulieren in HTML

Best practices voor toegankelijke loginformulieren in HTML

Een loginformulier is vaak de toegangspoort tot een afgeschermd gedeelte van een website, zoals een ledenomgeving, webshop of beheerderspaneel. Omdat dit formulier zo cruciaal is, moet het niet alleen veilig zijn, maar ook gebruiksvriendelijk en toegankelijk voor iedereen. In dit artikel leer je stap voor stap hoe je een goed loginformulier in HTML bouwt, welke best practices je moet volgen en hoe je ervoor zorgt dat ook mensen met beperkingen er probleemloos gebruik van kunnen maken.

Waarom een toegankelijk loginformulier belangrijk is

  • Iedereen moet kunnen inloggen: ook gebruikers met visuele of motorische beperkingen.

  • WCAG-richtlijnen: toegankelijkheid is in veel landen verplicht en voorkomt juridische problemen.

  • Betere gebruikerservaring: een goed ontworpen formulier verlaagt de frustratie en vergroot de kans dat mensen blijven terugkomen.

  • Veiligheid en vertrouwen: een overzichtelijk en duidelijk formulier straalt professionaliteit uit.

De basis van een loginformulier in HTML

Een loginformulier bestaat meestal uit:

  1. Een veld voor gebruikersnaam of e-mail.

  2. Een veld voor wachtwoord.

  3. Een login-knop.

<form action="/login" method="post">
<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" required>

<label for="password">Wachtwoord</label>
<input type="password" id="password" name="password" required>

<button type="submit">Inloggen</button>
</form>

Labels koppelen aan invoervelden

Gebruik altijd <label> voor elk invoerveld. Dit is essentieel voor schermlezers en maakt de invoervelden ook klikbaar.

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

Placeholder vs. label

Plaats nooit alleen de placeholder als vervanging van een label. Placeholders verdwijnen zodra je begint te typen en maken formulieren minder toegankelijk. Labels blijven altijd zichtbaar en bieden duidelijkheid.

Fout:

<input type="text" placeholder="E-mailadres">

Goed:

<label for="email">E-mailadres</label>
<input type="email" id="email" placeholder="naam@voorbeeld.nl">

Toetsenbordvriendelijkheid

Een loginformulier moet volledig te bedienen zijn met het toetsenbord.

  • Tab navigeert door de velden.

  • Enter verstuurt het formulier wanneer de focus op een invoerveld staat.

Zorg voor duidelijke focusstijlen:

input:focus, button:focus {
outline: 3px solid #00bf63;
outline-offset: 2px;
}

Wachtwoordveld best practices

Toon wachtwoordoptie

Gebruikers maken minder fouten als ze hun wachtwoord zichtbaar kunnen maken.

<label for="password">Wachtwoord</label>
<input type="password" id="password" name="password">
<input type="checkbox" id="show-password">
<label for="show-password">Toon wachtwoord</label>

<script>
const pw = document.getElementById("password");
const show = document.getElementById("show-password");
show.addEventListener("change", () => {
pw.type = show.checked ? "text" : "password";
});
</script>

Hints en vereisten

Als je bepaalde wachtwoordregels hebt (bijvoorbeeld minimaal 8 tekens), geef dat duidelijk aan met aria-describedby.

<input type="password" id="password" name="password" aria-describedby="pw-help">
<small id="pw-help">Je wachtwoord moet minimaal 8 tekens bevatten.</small>

Foutmeldingen en feedback

Geef duidelijke foutmeldingen die gekoppeld zijn aan velden.

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error">Voer een geldig e-mailadres in.</span>

Met aria-describedby weet een schermlezer dat de foutmelding bij dit veld hoort.

Extra functies voor een beter loginformulier

Wachtwoord vergeten-link

Altijd toevoegen, zodat gebruikers toegang kunnen herstellen.

<a href="/wachtwoord-vergeten">Wachtwoord vergeten?</a>

Blijf ingelogd-optie

Met een checkbox bied je gebruikers gemak, maar zorg voor een duidelijke uitleg.

<label>
<input type="checkbox" name="remember">
Blijf ingelogd
</label>

Login met externe providers

Voor sommige sites is inloggen met Google, Facebook of LinkedIn handig. Geef deze opties duidelijk aan, maar bied altijd een standaard loginmogelijkheid aan.

Veiligheidsoverwegingen

  • Gebruik altijd HTTPS zodat login-gegevens versleuteld verzonden worden.

  • Voorkom autocomplete bij gevoelige velden waar dat niet wenselijk is.

<input type="password" autocomplete="current-password">

  • Gebruik tokens om CSRF-aanvallen tegen te gaan.

  • Geef nooit aan welk veld fout was bij een mislukte login (voorkomt dat hackers e-mailadressen kunnen raden).

Responsief design

Op mobiel moet een loginformulier net zo prettig werken als op desktop. Gebruik:

form {
max-width: 400px;
margin: auto;
padding: 1rem;
}
input, button {
width: 100%;
box-sizing: border-box;
}

Voorbeeld van een compleet toegankelijk loginformulier

<form action="/login" method="post">
<fieldset>
<legend>Inloggen</legend>

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

<label for="password">Wachtwoord</label>
<input type="password" id="password" name="password" required autocomplete="current-password" aria-describedby="pw-help">
<small id="pw-help">Minimaal 8 tekens.</small>

<label>
<input type="checkbox" name="remember">
Blijf ingelogd
</label>

<button type="submit">Inloggen</button>
<a href="/wachtwoord-vergeten">Wachtwoord vergeten?</a>
</fieldset>
</form>

Veelgemaakte fouten bij loginformulieren

  1. Alleen placeholders gebruiken, geen labels.

  2. Geen duidelijke foutmeldingen tonen.

  3. Wachtwoordregels niet communiceren.

  4. Geen toetsenbordnavigatie of focusstijlen.

  5. Loginformulier zonder HTTPS aanbieden.

Tips voor toegankelijke loginformulieren

  • Gebruik altijd labels en duidelijke beschrijvingen.

  • Zorg dat alle velden toegankelijk zijn met schermlezers.

  • Voeg opties toe zoals wachtwoord tonen en wachtwoord vergeten.

  • Geef duidelijke feedback bij fouten.

  • Houd het formulier kort en overzichtelijk.

Een toegankelijk loginformulier in HTML zorgt ervoor dat iedereen zonder frustratie kan inloggen, ongeacht apparaat, beperking of vaardigheidsniveau.