Redacteur

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

  • Alle geluidsfragmenten en bewegende beelden moeten een transcript hebben. Ook voor filmpjes kan een transcript een waardevolle toevoeging zijn. Een transcript is een uitgeschreven tekst waarin alles wordt beschreven dat te zien, te horen en te doen is. Bijvoorbeeld alle gesproken tekst, maar ook de belangrijke details die te zien of horen zijn. Eventuele interactieve elementen, zoals een link, moeten ook worden opgenomen in een transcript.

    Een transcript hoort voor alle bezoekers gemakkelijk te bereiken zijn. Plaats een transcript, of een link naar het bijbehorende transcript, altijd direct onder de code van het mediabestand.

    Aan bestanden die alleen uit geluid bestaan moet altijd een transcript worden toegevoegd. Aan bewegende beelden moet een transcript worden toegevoegd als er geen audiobeschrijving aanwezig is. Voor filmpjes geldt dat dit alleen verplicht is als er interactieve elementen in het filmpje aanwezig zijn.

  • Bij het schrijven van instructies is het belangrijk om niet te verwijzen naar eigenschappen die alleen met een bepaald zintuig kan worden waargenomen. Dit is niet handig voor bezoekers die geen gebruik kunnen maken van dat zintuig. Bezoekers die blind, slechtziend of kleurenblind zijn kunnen visuele aanwijzingen bijvoorbeeld niet (of niet goed) volgen.

    Gebruik dus niet alleen kleur om informatie over te dragen maar gebruik ook een andere manieren zoals tekst. Daarnaast mag je niet verwijzen naar onderdelen door alleen vorm of locatie te benoemen. Gebruik ook hierbij tekst als aanvullende aanwijzing. Schrijf dus niet:

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

    Maar zeg wel:

    • Gebruik de (groene, ronde) knop (onderaan) met tekst "Verzenden" om je gegevens te verzenden.
  • Afbeeldingen die informatie overbrengen zijn noodzakelijk voor het begrijpen van de tekst. De afbeeldingen voegen extra informatie toe aan de pagina. Deze afbeeldingen moeten een tekstueel alternatief hebben dat nauwkeurig beschrijft wat er op de afbeelding te zien is. De invulling is afhankelijk van de context en kan per situatie afwijkend zijn voor dezelfde afbeelding.

    In een CMS kan een tekstueel alternatief doorgaans worden toegevoegd in de mediatheek.

    In de code ziet dat er zo uit:

    Het tekstuele alternatief moet een goede vervanging kunnen geven voor een afbeelding. Bedenk bij het schrijven van het tekstueel alternatief altijd wat de bedoeling is van de afbeelding. Houd een tekstueel alternatief altijd nuttig en beknopt.

  • Schrijf een linktekst waaruit het doel van de link duidelijk is af te leiden. Linkteksten die duidelijk beschrijven waar ze naartoe verwijzen kunnen beter worden gebruikt door bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware of een brailleleesregel. Het helpt bezoekers om over de website te navigeren. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van links op de pagina gebruiken.

    Een duidelijke link beschrijft nauwkeurig en zo beknopt mogelijk wat het doel is van de link. Wees daarom voorzichtig met links met de inhoud “klik hier” of “lees meer”. Zonder de omliggende tekst is het niet duidelijk waar de link naar verwijst. Een te lange linktekst is ook niet handig voor bezoekers die gebruik maken van hulptechnologieën.

    In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstueel alternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei dezelfde link, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.

    Een link mag nooit leeg zijn. Een lege link is visueel misschien niet waar te nemen maar hulptechnologieën en toetsenbordnavigatie komen deze link wel tegen.

    Als het niet mogelijk is om een duidelijke linktekst te geven aan een link, dan zijn er nog een paar andere opties:

    • Zorg dat het doel van de link duidelijk wordt uit de direct omringende tekst van de link:
    • Gebruik CSS om een deel van de linktekst te verbergen:
    • Gebruik ARIA-attributen om het doel van de link te beschrijven:

    Als CSS wordt gebruikt om een deel van de linktekst te verbergen of als ARIA-attributen worden gebruikt om het doel van de link te beschrijven dan kunnen alleen bezoekers die gebruik maken van hulptechnologieën de hele linktekst waarnemen.

  • Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort tekstueel alternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden beschreven in een tekstueel alternatief. Geef in dat geval naast een beknopte beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst.

    Een langere beschrijving mag ook op een aparte pagina worden geplaatst. Plaats dan een link met de verwijzing naar die andere pagina direct voor of na de afbeelding.

    De omringende tekst hoort ook te worden gekoppeld aan de afbeelding. Dit is geen verplichting maar wel erg handig. Hiervoor kan gebruik worden gemaakt van het aria-describedby-attribuut. Gebruik het ID van het element waar de complexe afbeelding beschreven wordt. Deze informatie hoort dan ook zichtbaar te zijn voor bezoekers die wel kunnen zien.

  • In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Dit kunnen afbeeldingen zijn die verwijzen naar een andere pagina of website, maar ook afbeeldingen die een actie op de pagina uitvoeren.

    Deze afbeeldingen moeten een tekstueel alternatief hebben dat het doel van de link beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt. Voorleessoftware gebruikt het tekstuele alternatief namelijk als linktekst. Daarom is het belangrijker om het doel van de link te beschrijven, in plaats van wat er op de afbeelding te zien is.

    Als er ook tekst staat op een functionele afbeelding, dan moeten de tekst op de afbeelding én het doel van de link allebei in het tekstueel alternatief worden vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook makkelijk bereiken.

  • Afbeeldingen die alleen ter decoratie op de pagina zijn geplaatst, horen geen tekstueel alternatief te hebben. Dit zijn bijvoorbeeld afbeeldingen die geen informatie overdragen en niet noodzakelijk zijn voor het begrijpen van de tekst. Deze afbeeldingen moeten worden genegeerd door hulptechnologieën. Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

    Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <img>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

  • Afbeeldingen van tekst moeten niet worden gebruikt tenzij het echt niet anders kan. Het is toegankelijker om echte tekst te gebruiken en deze tekst met CSS vorm te geven. Met CSS kan tekst ook goed worden vormgegeven, zo kan bijvoorbeeld de kleur, de grootte, het lettertype, de spatiëring en de regelafstand worden ingesteld.

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

  • Alle mediabestanden moeten een korte tekstuele introductie hebben. Deze introductie moet de inhoud van het filmpje globaal beschrijven. Hiermee weten bezoekers waar het over gaat en kunnen zij zelf beslissen wat ze er mee willen doen.

    Een korte tekstuele introductie kan worden gegeven met een beschrijvende titel, een (globale) beschrijving van de inhoud.

  • Alle filmpjes moeten ondertiteling hebben van de gesproken tekst. Ondertiteling moet synchroon lopen met het beeld en hoort geen andere informatie te bedekken. Verder hoort de ondertiteling natuurlijk goed zichtbaar te zijn. Het is niet erg als de gesproken tekst een heel klein beetje wordt versimpeld om de ondertiteling niet te lang te maken.

    Om filmpjes nog toegankelijk te maken voor bezoekers die doof of slechthorend zijn, moeten ook de belangrijke details die te horen zijn worden toegevoegd aan de ondertiteling. Bijvoorbeeld het geluid van een deurbel, een explosie, enz. Ook muziek die speelt hoort te worden meegenomen in de ondertiteling als dit belangrijk is om het filmpje of de sfeer in het filmpje te begrijpen. Daarnaast hoort ook het volume van de spreker (fluisteren of schreeuwen) te worden meegenomen in de ondertiteling als dit van belang is.

    Er zijn verschillende vormen van ondertiteling:

    • Ingebakken in het filmpje (open captions)
    • Toegevoegd als een apart ondertitelingsbestand bij het filmpje (closed captions)

    Ondertiteling toevoegen op de grote videoplatformen:

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

  • In filmpjes wordt soms niet alle zichtbare informatie ook met geluid overgedragen. Sommige dingen zijn wel te zien, maar niet te horen. Deze visuele informatie moet met een audiobeschrijving worden toegevoegd aan het filmpje. In een audiobeschrijving beschrijft een stem de belangrijke zichtbare belangrijke details. Dit gebeurt op de momenten dat er pauzes zijn in het originele geluid van het filmpje. De audiobeschrijving moet zo veel mogelijk samenvallen met de beschreven acties. Zo kunnen bezoekers die een filmpje niet kunnen zien het filmpje ook goed volgen.

    Voor filmpjes is een audiobeschrijving niet altijd nodig. Als alle zichtbare informatie ook te horen is, dan is een audiobeschrijving niet verplicht. Aan bewegende beelden moet een audiobeschrijving worden toegevoegd als er geen transcript aanwezig is.

    Er zijn verschillende manieren om een audiobeschrijving toe te voegen:

    • Ingebakken in het filmpje of de bewegende beelden.
    • Toegevoegd als extra audio-spoor bij het filmpje of de bewegende beelden.

  • 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 dit in tekst worden aangegeven. Benoem in de tekst de naam van het veld dat verkeerd in ingevuld. Zo weet de bezoeker om welk formulierveld het gaat. Schrijf dus niet:

    • Dit veld is verplicht.

    Maar schrijf:

    • Het veld ‘Telefoonnummer’ mag niet leeg zijn.

    Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

    Geef in de foutmelding ook aan wat er precies fout is en geef, als dat kan, suggesties hoe dit kan worden verbeterd. Wees hierin zo specifiek mogelijk zodat de bezoeker niet alleen weet dát er een fout is, maar ook hoe hij deze kan oplossen. Bij veel invoervelden is al bekend in welk formaat het ingevuld moet worden. Zo bestaat een telefoonnummer in Nederland uit 10 cijfers. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

    Enkele voorbeelden:

    • Datum bestaat in de vorm dd-mm-jjjj.
    • IBAN begint met 2 letters, 2 cijfers, 4 letters.
    • Postcode bestaat uit 4 cijfers en 2 letters.
    • Telefoonnummer bestaat uit 10 cijfers.
    • URL begint met http:// of https://.

    Geboortedatum is niet juist ingevuld. Gebruik het formaat dd-mm-jjjj.

    Het veld ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit 10 cijfers.

    Koppel foutmeldingen in de code aan het invoerveld

    Om verwarring te voorkomen bij bezoekers die gebruik maken van hulptechnologieën moet een foutmelding ook in de code worden gekoppeld aan het bijbehorende invoerveld. Gebruik hiervoor het attribuut aria-describedby.

  • Door koppen te gebruiken kunnen bezoekers snel de structuur in een tekst herkennen. Een koptekst wordt vaak groter en dikgedrukt weergegeven. Dat maakt de tekst gemakkelijk om naar een onderdeel te scannen. Bezoekers die blind of slechtziend zijn kunnen dit niet (of niet goed) waarnemen. Voor deze bezoekers is het belangrijk dat de structuur niet alleen met vormgeving wordt overgebracht maar ook in de code wordt vastgelegd. Hulptechnologieën kunnen een lijst van alle koppen maken zodat bezoekers die hier gebruik van maken eenvoudig kunnen navigeren naar de informatie die zij nodig hebben.

    Om dit te realiseren moeten koppen worden opgemaakt met een HTML kop-element (<h1> t/m <h6>). In een CMS kan hiervoor een tekst worden geselecteerd en aangegeven dat het een koptekst is. Je kunt hierbij ook het niveau van de kop aangeven. Dit maakt de tekst automatisch op met het juiste HTML-element.

    Zorg dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

    • Na een kop van het eerste niveau volgt altijd een kop van het tweede niveau.
    • Na een kop van het tweede niveau kan weer een kop van het tweede niveau volgen óf een kop van het derde niveau.
    • Kopniveau’s horen niet te worden overgeslagen.
    • Lege koppen horen niet aanwezig te zijn.

  • Lijsten benadrukken belangrijke punten in een tekst. Onderdelen van een lijst worden opgemaakt met een opsommingsteken of een nummer. Door de structuur van lijsten goed vast te leggen in de code kunnen bezoekers die gebruik maken van hulptechnologieën de lijst beter begrijpen. Hulptechnologieën geven bijvoorbeeld aan hoeveel items er in een lijst staan en geven de mogelijkheid om een lijst over te slaan.

    Lijsten moeten hiervoor worden opgemaakt met een lijst-element. Er zijn verschillende soorten lijsten: een opsomming (<ul>), een genummerde lijst (<ol>) en een lijst met beschrijvingen (<dl>). Opsommingen en genummerde lijsten kunnen in (vrijwel alle) CMS worden toegevoegd. Selecteer de tekst en kies voor opsomming of genummerde lijst. Dit maakt de lijst automatisch op met het juiste HTML-element. Een lijst met beschrijvingen wordt vaak nog niet ondersteund.

    Opsomming

    Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

    In de code ziet dat er zo uit:

    Genummerde lijst

    Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

    In de code ziet dat er zo uit:

    Lijst met beschrijvingen

    Gebruik een lijst met beschrijvingen bij een lijst die bestaat uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijst bijvoorbeeld voor een verklarende woordenlijst. Niet alle CMS’en zullen dit soort lijst ondersteunen. Binnen een lijst met beschrijvingen wordt het <dt>-element gebruikt om een term aan te geven en wordt het <dd>-element om de beschrijving aan te geven.

    In de code ziet dat er zo uit:

  • Tabellen bestaan uit rijen en kolommen. De gegevens in de rijen en kolommen hebben een onderlinge relatie met elkaar. Voor bezoekers met een visuele beperking is deze relatie niet direct duidelijk. Voor deze bezoekers is het belangrijk dat deze relaties ook in de code wordt vastgelegd.

    Om dit te bereiken moeten tabellen worden opgemaakt met een tabel-element (<table>). In dit element moet ook worden aangegeven wat een tabelkop is en wat de gegevenscellen zijn. De tabelkoppen worden in de code vastgelegd met een <th>-element, gegevenscellen met een <td>-element. De meeste CMS’en bieden ondersteuning voor het invoegen van een tabel in een tekst. Bepaal nauwkeurig wat de tabelkoppen zijn. Dit maakt de tabel automatisch op met de juiste HTML-elementen.

    In de code ziet dat er zo uit:

    Geef de tabel ook een korte beschrijving. Deze beschrijving helpt bezoekers om een tabel te vinden, te begrijpen waar de tabel over gaat en te beslissen of ze de tabel wel willen lezen. Deze beschrijving wordt in de code vastgelegd met een <caption>-element.

    In de code ziet dat er zo uit:

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

  • Door een goede paginatitel te gebruiken kunnen bezoekers gemakkelijk een pagina terugvinden. De titel van een pagina wordt getoond in het venster van de browser of in het tabblad van de pagina. Voor bezoekers die gebruik maken van hulptechnologieën is een duidelijke en beschrijvende titel ook belangrijk. Deze informatie wordt aan hen als eerste gepresenteerd bij het openen van een pagina. Met een paginatitel die het onderwerp of doel van de pagina beschrijft, kunnen zij zich snel oriënteren over de inhoud van de pagina.

    Houd een paginatitel altijd nuttig en zo beknopt als mogelijk. Een titel hoort uniek te zijn en te vernieuwen als de URL van de pagina verandert.

    De paginatitel kan vaak per pagina in het CMS ingesteld worden.

    Gebruik het title-element in de <head> in de code om de paginatitel in te stellen.

    In de code ziet dat er zo uit:

  • Beschrijvende koppen en tussenkoppen zijn belangrijk om een pagina snel te begrijpen. Het helpt bezoekers om zich te oriënteren op de pagina en om snel specifieke inhoud te vinden. Zorg daarom dat elke kop op de pagina de onderliggende tekst goed beschrijft. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren naar de informatie die zij nodig hebben. Zij kunnen eventueelook direct doorspringen naar de volgende kop.

    Alle koppen en tussenkoppen op een pagina horen de structuur van de pagina nauwkeurig weer te geven. Een kop moet altijd onderliggende inhoud hebben. Lees meer over het gebruik van kop-elementen.

  • Als tekst op een pagina in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Door de anderstalige tekst te markeren met de juiste HTML-elementen blijft de tekst begrijpelijk voor alle bezoekers. Als er geen taal wordt aangegeven in de code, dan zal voorleessoftware de pagina lezen in de standaardtaal die een bezoeker heeft ingesteld. Dit is niet altijd de juiste taal, daarom is het veiliger om de taal zelf te markeren.

    Markeer het onderdeel met anderstalige tekst met het lang-attribuut. Het lang-attribuut kan worden gebruikt op elementen op blok-niveau (<div>, <p>, <table>, enz.) maar ook op inline-elementen (<span>, <a>, <strong>, enz.).

    In de code ziet dat er zo uit:

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

  • 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.1 Tekstalternatieven
      • 1.1.1 Niet-tekstuele content
    • Richtlijn 1.2 Op tijd gebaseerde media
      • 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
      • 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
      • 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
      • 1.2.5 Audiodescriptie (vooraf opgenomen)
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.2 Betekenisvolle volgorde
      • 1.3.3 Zintuiglijke eigenschappen
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.1 Gebruik van kleur
      • 1.4.11 Contrast van niet-tekstuele content
      • 1.4.3 Contrast (minimum)
      • 1.4.5 Afbeeldingen van tekst
  • Principe 2. Bedienbaar
    • Richtlijn 2.3 Toevallen en fysieke reacties
      • 2.3.1 Drie flitsen of beneden drempelwaarde
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.2 Paginatitel
      • 2.4.4 Linkdoel (in context)
      • 2.4.6 Koppen en labels
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.3 Label in naam
  • Principe 3. Begrijpelijk
    • Richtlijn 3.1 Leesbaar
      • 3.1.2 Taal van onderdelen
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.1 Fout identificatie
      • 3.3.2 Labels of instructies
      • 3.3.3 Foutsuggestie
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde