Descriptions

Bij een formulierveld kun je extra informatie plaatsen, met bijvoorbeeld uitleg over hoe een veld in te vullen, de eisen voor een wachtwoord, foutmeldingen of waarschuwingen. We geven deze extra informatie hier de verzamelnaam "descriptions", om aan te sluiten bij de term “accessible description”, die in toegankelijkheidsstandaarden wordt gebruikt.

Plaats descriptions tussen label en formulierveld

Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld. Omdat de gebruiker van boven naar beneden leest, komt deze informatie na het label op een logisch moment in de leesvolgorde.

[Voorbeeld alleen visueel]

<label for="wachtwoord">Nieuw wachtwoord</label>
<div id="description-wachtwoord">
    Kies een wachtwoord van minimaal 8 karakters lang.
</div>
<input
    id="wachtwoord"
    type="password"
    name="nieuw-wachtwoord"
    aria-describedby="description-wachtwoord"
/>

                
               

Ook is dan de kans dat de informatie overlapt met bijvoorbeeld browserpopups kleiner. Lees hiervoor het artikel Avoid Messages Under Fields van Adrian Roselli.

[Fout voorbeeld van inconsequente plek]

<label for="wachtwoord">Nieuw wachtwoord</label>
<input
    id="wachtwoord"
    type="password"
    name="nieuw-wachtwoord"
    aria-describedby="description-wachtwoord"
/>
<div id="description-wachtwoord">
    Kies een wachtwoord van minimaal 8 karakters lang.
</div>

                
               

[Fout voorbeeld van inconsequente plek]

Fout visueel Voorbeeld van een description onder de iput.

<label for="wachtwoord">Nieuw wachtwoord</label>
<input
    id="wachtwoord"
    type="password"
    name="nieuw-wachtwoord"
    aria-describedby="description-wachtwoord"
/>
<div id="description-wachtwoord">
    Kies een wachtwoord van minimaal 8 karaters lang.
</div>

                
               

Fout visueel voorbeeld van een description boven de input en foutmelding eronder.

<label for="wachtwoord">Nieuw wachtwoord</label>
<div id="description-wachtwoord">
    Kies een wachtwoord van minimaal 8 karaters lang.
</div>

<input
    id="wachtwoord"
    type="password"
    name="nieuw-wachtwoord"
    aria-describedby="description-wachtwoord error-wachtwoord"
/>
<div id="error-wachtwoord">
    Je gekozen wachtwoord is te kort.
</div>

                
               

Koppel een description aan het formulierveld

Voor screenreadergebruikers is het belangrijk dat de description samen wordt voorgelezen met het formulierveld. Dat kan door deze twee aan elkaar te koppelen via aria-describedby.

Let op: De gebruikte ID’s moeten uniek zijn voor de pagina, anders worden de verkeerde descriptions bij de velden voorgelezen.

Opzet in de HTML:

Geef description een ID: id="description-wachtwoord".
Verwijs in het formulierveld naar dat ID:aria-describedby="description-wachtwoord".

Hierdoor wordt naast de labeltekst ook de description voorgelezen, wanneer een screen reader gebruiker het formulierveld focus geeft.

Meerdere descriptions koppelen

Je kunt meerdere descriptions koppelen aan een formulierveld. Bijvoorbeeld als er een ook nog een foutmelding is. Geef dan aria-describedby twee waardes (IDs), mee gescheiden door een spatie.

Voorbeeld van extra informatie plus een foutmelding (visueel en in code).

<label for="wachtwoord">Nieuw wachtwoord</label>
<div id="description-wachtwoord">Kies een wachtwoord van minimaal 8 karakters lang.</div>
<div id="error-wachtwoord">Je gekozen wachtwoord is te kort.</div>
<input
  id="wachtwoord"
  type="password"
  name="nieuw-wachtwoord"
  aria-describedby="description-wachtwoord error-wachtwoord"
/>

                
               

De volgorde van de ID's meegegeven in de aria-describedby is de volgorde waarin het voorgelezen wordt.

Fieldset: Plaats descriptions tussen legend en eerste item

Radiobuttons en checkboxes worden gegroepeerd in een fieldset. De "vraag" staat in de legend. Plaats de description dan onder de legend vlak boven het eerste label/formulierveld. De description kan aan de fieldset worden gekoppeld. [Voorbeeld visueel en in code]

<fieldset aria-describedby="error-inloggen">
    <legend >Wilt u inloggen?</legend>
    <div id="error-inloggen">Kies of u wilt inloggen.</div>
    <label for="inloggen-ja">Ja</label>
    <input
        id="inloggen-ja"
        type="radio"
        name="inloggen"
        value="ja"
    />
    <label for="inloggen-nee">Nee</label>
    <input
        id="inloggen-nee"
        type="radio"
        name="inloggen"
        value="nee"
    />
</fieldset>

                
               

Houd het aanklikbare gedeelte groot genoeg

Bij een goede koppeling tussen het label en het formulierveld, zijn beide elementen aanklikbaar. Dat maakt het aanklikbare gedeelte groot.

Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld tenminste 24 bij 24 pixels is, liefst 44 bij 44 pixels. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren.

Een minimale grootte van het aanklikbare gedeelte is een vereiste volgens WCAC succescriterium 2.5.8 (Niveau A): Minimale trootte van het aanwijsgebied.

[voorbeeld van kleine en grote radiobutton > Jeffrey wil wel afbeeldingen maken]

Houd de description kort en to-the-point.

Heb je erg veel tekst nodig, vermeld deze tekst dan boven het formulier of op een introductiepagina voordat een gebruiker het formulier gaat invullen.

Als informatie niet gekoppeld aan een formulierveld, is er de kans dan een screenreadergebruiker deze informatie mist.

Gebruik liever geen tooltips, dan maak je het voor de gebruiker moeilijker om belangrijke informatie te lezen. Het vergt een extra klik (of toetsenbordaanslagen) en wordt niet door alle gebruikers goed begrepen. Als het echt belangrijk is, laat de informatie dan meteen zien.

[fout visueel voorbeeld van een tooltip met weinig info > Jeffrey wil wel afbeeldingen maken][goed voorbeeld met gebruik description ipv tooltip]

[todo]Hier, als de pagina over tooltips klaar is een link toevoegen.