Vormgever

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Sommige functionaliteit op een website is alleen te uit te voeren met een moeilijk gebaar. Bijvoorbeeld gebaren waarbij de bezoeker meerdere vingers moet gebruiken (meerpuntsgebaren) of gebaren waarbij de bezoeker een vinger (of de aanwijzer) in een bepaald pad moet bewegen (pad gebaseerde gebaren). Bezoekers kunnen, om verschillende redenen, soms niet in staat zijn om moeilijke gebaren te maken met hun vingers of met een aanwijzer. Bijvoorbeeld door een motorische beperking.

Zorg dat functionaliteit die met gebaren wordt geactiveerd, ook met een klik, dubbelklik of klikken-en-vasthouden van een muis kan worden geactiveerd. Dit kan bijvoorbeeld met een eenvoudige bediening toe te voegen.

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:

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:

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:

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:

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:

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

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:

Maar dit kan ook via het attribuut aria-describedby.

In de code ziet dat er zo uit:

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De richtlijnen vereisen voor deze onderdelen een contrastverhouding van ten minste 3:1 tegen alle aangrenzende kleuren. Het kan dus zijn dat een contrast op meerdere plekken gemeten moet worden.

Formulierelementen

Formulierelementen, zoals invoervelden, keuzerondjes en selectievakjes moeten genoeg contrast hebben. Zorg voor een duidelijke rand of een achtergrondkleur met voldoende contrast. Ook de verschillende statussen van deze elementen moeten genoeg contrast hebben. Het moet duidelijk zijn of een keuzerondje of selectievakje is geselecteerd of juist niet.

Iconen

Informatieve iconen en iconen die ook worden gebruik als link of knop moeten genoeg contrast hebben.

Grafieken en diagrammen

Ook onderdelen in grafieken en diagrammen moeten genoeg contrast hebben. Denk hierbij aan de lijnen in een grafiek en de onderdelen in een diagram.

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Kleur kan helpen om eenvoudig informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden, maar het mag niet de enige manier zijn. Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden.

Gebruik ook andere manieren, zoals met tekst of een icoon.

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

Deze contrasteisen gelden ook voor tekst op afbeeldingen.