Vormgever

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

  • Voor de oriëntatie op een pagina is het prettig om de vaste pagina-onderdelen telkens in dezelfde volgorde te tonen. Dit helpt alle bezoekers met het navigeren over de website en het vinden van informatie op een pagina. Het is belangrijk voor de toegankelijkheid van de website dat deze volgorde niet alleen in de vormgeving hetzelfde blijft, maar ook in de broncode.

    Per pagina mogen wel onderdelen worden weggelaten of worden toegevoegd.

  • De focusindicator is belangrijk voor iedereen die met het toetsenbord navigeert. Het laat zien welk onderdeel de toetsenbordfocus heeft. De browser heeft hiervoor een standaard focusindicator maar deze kan ook worden aangepast. Als je deze aanpast, zorg dan voor voldoende contrast. Een contrastverhouding van ten minste 3:1 tussen de kleur van de focusindicator en de kleur van de achtergrond is vereist.

  • Tekst met voldoende contrast is voor iedereen goed leesbaar, ook voor bezoekers die kleurenblind of slechtziend zijn. De richtlijnen vereisen een contrastverhouding van ten minste 4,5:1 tussen de kleur van de tekst en de kleur van de achtergrond. Om de contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-tool. Bijvoorbeeld de tool op https://webaim.org/resources/contrastchecker/.

    Grote tekst is gemakkelijker om te lezen. Voor grote tekst geldt daarom een andere contrasteis. Met ‘grote tekst’ wordt tekst van ten minste 24px (1.5em) bedoeld, of tekst van ten minste 18.5px dikgedrukt (ongeveer 1.2em of 120%). De contrastverhouding voor grote tekst moet ten minste 3:1 zijn.

    Niet voor alle tekst is het nodig om voldoende contrast te gebruiken. Er zijn namelijk een paar uitzonderingen zoals logo’s, tekst die puur decoratief is, tekst op afbeeldingen die puur decoratief zijn en knoppen die niet actief zijn.

  • 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 dragen. Informatie die alleen wordt overgebracht door kleur is niet toegankelijk voor bezoekers met een visuele beperking.

    Bezoekers die kleurenblind, slechtziend of blind zijn kunnen informatie informatie die alleen wordt overgebracht door kleur niet (goed) waarnemen. Zorg dat er naast alleen kleur ook andere manieren worden gebruikt zoals tekst, tekststijlen, iconen of patronen. Gebruik in een grafiek bijvoorbeeld niet alleen per lijn een afwijkende kleur maar ook een icoon op de lijn.

  • Pagina’s en teksten zijn geschreven om op een logische volgorde gelezen te worden. Wij lezen bijvoorbeeld van links naar rechts en we lezen eerst de linkerkolom en dan de rechterkolom. Deze volgorde moet ook worden vastgelegd in de code. Als dit niet is vastgelegd in de code, kan de inhoud lastig zijn om te begrijpen voor bezoekers die gebruik maken van hulptechnologieën.

    Sommige manieren van coderen zorgt dat een logische volgorde visueel wel zichtbaar is maar in de code niet niet juist is vastgelegd.

  • Laat onderdelen 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 filmpjes.

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

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.2 Betekenisvolle volgorde
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.1 Gebruik van kleur
      • 1.4.11 Contrast van niet-tekstuele content
      • 1.4.3 Contrast (minimum)
  • 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
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.1 Aanwijzergebaren
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.3 Consistente navigatie
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.2 Labels of instructies