Zorg voor duidelijke labels en instructies bij invoervelden
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: