Vormgeving

Afbeeldingen

  • Gebruik geen flitsende content. Laat onderdelen in elk geval niet meer dan 3 keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of media.

Bediening

  • 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.

Formulieren

  • 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:

    				
    					
    				
    			

    Let op: Placeholdertekst mag niet als enige manier worden gebruikt om een label toe te voegen aan een invoerveld.

    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:

    				
    					
    				
    			

Media

  • Gebruik geen flitsende content. Laat onderdelen in elk geval niet meer dan 3 keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of media.

Navigatie

  • 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.

Ontwerp

  • De kleur van tekst moet genoeg contrast hebben tegen de achtergrond. Zo is de tekst voor alle bezoekers goed leesbaar. Tekst moet een contrastverhouding hebben van minimaal:

    • 4,5:1 voor tekst kleiner dan 24px of 19px dikgedrukt.
    • 3:1 voor tekst groter dan 24px of 19px dikgedrukt.

    Deze contrasteisen gelden ook voor tekst op afbeeldingen.

    Let op: Deze contrastverhoudingen mogen niet naar boven worden afgerond. De contrastverhouding tussen de hexadecimale kleurcodes #777777 (grijs) en #FFFFFF (wit) is 4,47:1. Dit is dus niet genoeg.

    Om een contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-checker. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

    Er zijn een paar uitzonderingen voor contrast van tekst zoals logo’s, decoratieve tekst en elementen die niet actief zijn.

  • De focus indicator moet duidelijk zichtbaar zijn. De focus indicator laat zien welk onderdeel de toetsenbordfocus heeft. Dit is dus belangrijk voor iedereen die met het toetsenbord navigeert. Vaak wordt het weergeven door een zichtbare rand om het element.

    Elke browser heeft een standaard focus indicator maar de stijlkenmerken kunnen ook worden aangepast. Als de stijlkenmerken worden aangepast, zorg dan voor genoeg contrast tussen de kleur van de focus indicator en de kleur van de achtergrond. De focus indicator moet een contrastverhouding hebben van minimaal 3:1.

    Om een contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-checker. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

  • Met kleur kan gemakkelijk de aandacht worden getrokken of onderscheid worden gemaakt tussen verschillende onderdelen. Bijvoorbeeld voor een waarschuwingsbericht op een pagina of verschillende lijnen in een grafiek. Kleur is handig maar mag niet als enige manier worden gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Informatie die alleen wordt overgebracht met kleur kan door bezoekers die kleurenblind of slechtziend zijn niet (of niet goed) worden waargenomen.

    Zorg ook voor andere manieren zoals tekst, tekststijlen, iconen of patronen. Gebruik bijvoorbeeld niet alleen een groen of rood bolletje maar een groen vinkje en rood kruisje. Of gebruik in een grafiek niet alleen een afwijkende kleur per lijn maar gebruik een legenda en plaats ook een icoon op de lijn.

  • 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.

  • Zorg dat componenten die dezelfde functionaliteit hebben op de hele website hetzelfde worden benoemd. Zo kunnen bezoekers herhalende onderdelen makkelijk terug vinden. Het gaat dan bijvoorbeeld om:

    • teksten op knoppen;
    • labels bij invoervelden;
    • linkteksten;
    • alternatieve teksten van iconen die dezelfde functie hebben.

    Door onderdelen op een consistente manier te benoemen kunnen bezoekers die gebruik maken van schermlezers sneller en efficiënter hun weg vinden.

    Voorbeeld:
    De tekst op de knop bij een zoekveld is op alle pagina’s ‘zoeken’, en niet op sommige pagina’s ‘vinden’.

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.1 Gebruik van kleur
      • 1.4.3 Contrast (minimum)
      • 1.4.11 Contrast van niet-tekstuele content
  • Principe 2. Bedienbaar
    • Richtlijn 2.3 Toevallen en fysieke reacties
      • 2.3.1 Drie flitsen of beneden drempelwaarde
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.6 Koppen en labels
      • 2.4.7 Focus zichtbaar
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.1 Aanwijzergebaren
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.3 Consistente navigatie
      • 3.2.4 Consistente identificatie
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.2 Labels of instructies