Je leest moeilijk Nederlands

Bij formulieren hoort een foutcontrole ingebouwd te zijn. De foutcontrole controleert automatisch of een verplicht onderdeel leeg is gelaten of dat een invoerveld verkeerd is ingevuld. Als er een fout is gevonden, dan moet de foutmelding in tekst worden weergegeven. Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

Benoem in de tekst van de foutmelding de naam van het veld dat verkeerd is ingevuld en benoem precies wat de fout is. Schrijf dus niet:

• Dit veld is verplicht.

Maar schrijf:

• Het veld ‘Telefoonnummer’ mag niet leeg zijn.

In de code kan ook worden aangegeven welk veld verkeerd is ingevuld. Gebruik hiervoor het attribuut aria-invalid. Daarnaast hoort de foutmelding in de code aan het bijbehorende invoerveld te worden gekoppeld. Dit voorkomt verwarring bij bezoekers die gebruik maken van hulptechnologieën. Een foutmelding kan op een aantal manieren worden gekoppeld zoals met een aria-describedby-attribuut.

In de code ziet dat er zo uit:

<label for="veld1">Telefoonnummer:</label>
<input type="text" id="veld1" aria-invalid="true" aria-describedby="fout">
<span id="fout">Het veld &lsquo;Telefoonnummer&rsquo; mag niet leeg zijn.</span>

Open dit onderwerp op een eigen pagina

Als er een fout is gevonden en suggesties voor verbetering zijn bekend, dan moeten deze suggesties aan de bezoeker worden getoond. De suggesties kunnen worden gebruikt om beter te begrijpen wat er precies ingevuld moet worden.

Bij veel invoervelden is bekend in welk formaat het ingevuld moet worden. Zo bestaat in Nederland een telefoonnummer uit 10 cijfers en een postcode uit 4 cijfers en 2 letters. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

Schrijf dus niet:

• Dit veld is niet juist ingevuld.

Maar schrijf:

• Geboortedatum is niet juist ingevuld. Gebruik het formaat dd-mm-jjjj.
• Het veld ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit 10 cijfers.

Open dit onderwerp op een eigen pagina

Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

Schrijf dus niet:

• Gebruik de ronde knop om je gegevens te verzenden. (vorm)
• Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
• Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

Maar zeg wel:

• Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

Open dit onderwerp op een eigen pagina

Koppen moeten het onderwerp of doel van de onderliggende tekst beschrijven. Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren.

Zorg dat elke kop iets zegt over de tekst die eronder staat, zodat de koppen de onderliggende content goed beschrijven. Dit helpt iedereen om een tekst beter te begrijpen, en alle koppen samen horen een goed beeld te geven van de hele content. Een kop moet dus ook altijd content hebben.

Mensen die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren.

Open dit onderwerp op een eigen pagina

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

Een taalwissel voor onderdelen van een webpagina wordt ingesteld met het lang-attribuut in het element die een andere taal heeft dan de hoofdtaal van de website. Het lang-attribuut kan worden gebruikt op blok-elementen (<​​div​>, <​​p​>, <​​table​>, enz.) maar ook op inline-elementen (<​​span​>, <​​a​>, <​​strong​>, enz.).

In de code ziet dat er zo uit:

<p lang="en">The quick brown fox jumps over the lazy dog.</p>

<p lang="en">In Dutch we say <span lang="nl">Pa's wijze lynx bezag vroom het fikse aquaduct</span>.</p>

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Open dit onderwerp op een eigen pagina

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Stel de standaardtaal van een website in. Dit helpt software om de taal van de content te bepalen.

De taal van een website wordt ingesteld met het lang-attribuut in het <​​html​>-element.

In de code ziet dat er zo uit:

<html lang="nl">
...
</html>

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Open dit onderwerp op een eigen pagina

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.

In de code zit dat er zo uit:

<a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

De linktekst kan eventueel in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

<a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>

<a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>

Open dit onderwerp op een eigen pagina

Onderdelen die hetzelfde doen horen overal dezelfde naam te krijgen. Dat geldt voor de zichtbare tekst en voor het alternatief van een pictogram. Heet dezelfde knop op de ene pagina “Zoeken”, op de andere “Zoek”, en staat er elders alleen een vergrootglas zonder tekst, dan is dat voor wie kijkt één ding en voor wie luistert drie.

Waar het vaak misgaat:

• Een pictogram zonder tekst, met per pagina een ander alternatief: “zoeken”, “zoek”, “vergrootglas”.
• Downloadlinks: “Download pdf”, “Pdf downloaden”, “Bekijk het rapport” — voor hetzelfde bestand.
• De knop die een formulier verstuurt: “Versturen”, “Verzenden”, “Aanvragen”, “Ok”.
• Een sluitkruisje dat de ene keer “Sluiten” heet en de andere keer “Annuleren”.

Dit telt het zwaarst bij spraakbediening. Wie zijn computer met zijn stem bedient zegt “klik Zoeken”. Heet de knop op die pagina “Zoek”, dan gebeurt er niets.

Open dit onderwerp op een eigen pagina

Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

In de code ziet dat er zo uit:

<html lang="nl">
  <head>
    <title>WCAG.nl - Digitale toegankelijkheid voor iedereen</title>
    ...

Open dit onderwerp op een eigen pagina

Biedt een website op meerdere pagina’s hulp aan, dan hoort die hulp op elke pagina op dezelfde plek te staan, in dezelfde volgorde. Staat het telefoonnummer op de ene pagina rechtsboven en op de volgende ergens anders, dan raakt de bezoeker het kwijt op het moment dat hij het nodig heeft.

Het gaat er niet om óf er hulp wordt aangeboden — dat is een eigen keuze. Het gaat erom dat de hulp niet per pagina verspringt. Dit criterium is nieuw in WCAG 2.2 en staat op niveau A, dus het valt onder de wettelijke eis.

Als hulp telt:

• Een telefoonnummer of e-mailadres.
• Een link naar contact of een contactformulier.
• Een chatvenster of een chatbot.
• Een link naar veelgestelde vragen of een helpdesk.
• Een link naar een zelfhulppagina bij een specifieke stap.

Open dit onderwerp op een eigen pagina

Zorg voor labels bij invoervelden

Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

Koppel labels in de code aan een invoerveld

Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

In de code ziet dat er zo uit:

<label for="veld1">Naam:</label>
<input type="text" id="veld1">

<label for="veld2">Kies je kleur:</label>
<select id="veld2">
  <option value="0">Rood</option>
  <option value="1">Groen</option>
  <option value="2">Blauw</option>
</select>

<input type="checkbox" id="veld3">
<label for="veld3">Meld mij aan voor de nieuwsbrief</label>

Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

In de code ziet dat er zo uit:

<input type="text" aria-label="Naam">

Groepeer meerdere secties van gerelateerde invoervelden

Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

In de code ziet dat er zo uit:

<fieldset>
  <legend>Ben jij al orgaandonor?</legend>

  <input type="radio" id="veld1">
  <label for="veld1" value="ja">Ja, ik ben orgaandonor</label>

  <input type="radio" id="veld2">
  <label for="veld2" value="nee">Nee, ik ben geen orgaandonor</label>
</fieldset>

Zorg voor instructies bij invoervelden

Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

Geef aan dat een invoerveld verplicht is

Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

In de code ziet dat er zo uit:

<label for="veld1">Naam: (verplicht)</label>
<input type="text" id="veld1">

Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

In de code ziet dat er zo uit:

<p>Alle velden met een * zijn verplicht.</p>

<label for="veld1">Naam: *</label>
<input type="text" id="veld1">

<label for="veld2">Favoriete dier: *</label>
<input type="text" id="veld2">

Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

<p>Alle velden met een * zijn verplicht.</p>

<label for="veld1">Naam: *</label>
<input type="text" id="veld1" aria-required="true">

<fieldset>
  <legend>Ben jij al orgaandonor? *</legend>

  <input type="radio" id="veld2" value="ja" aria-required="true">
  <label for="veld2">Ja, ik ben orgaandonor</label>

  <input type="radio" id="veld3" value="nee" aria-required="true">
  <label for="veld3">Nee, ik ben geen orgaandonor</label>
</fieldset>

Geef het aan als er een verplicht invoerformaat is verplicht is

Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

In de code ziet dat er zo uit:

<label for="veld1">Geboortedatum (dd-mm-jjjj):</label>
<input type="text" id="veld1">

Maar dit kan ook via het attribuut aria-describedby.

In de code ziet dat er zo uit:

<label for="veld1">Geboortedatum:</label>
<input type="text" id="veld1" aria-describedby="beschrijving">
<span id="beschrijving">dd-mm-jjjj</span>

Open dit onderwerp op een eigen pagina