4.1.2 Velden zonder zichtbaar label hebben een beschrijvende tooltip

In het vorige ijkpunt gingen we er van uit dat elk formulierveld een zichtbaar label heeft. Dit is niet altijd mogelijk of wenselijk. Dit ijkpunt bevat een aantal uitzonderingen op die regel. In die gevallen zijn beschrijvende tooltips verplicht. Tooltips voegt u toe met behulp van het title-attribuut.

Uitzondering

Een formulier dat bestaat uit 1 invoerveld en een knop heeft geen zichtbaar label en dus ook geen label-element nodig. Het opschrift van de knop geeft de functie aan. Het typische voorbeeld is een zoekfunctie. We raden wel aan om het title-attribuut te gebruiken.

Voorbeeld

<form>
  <input type="text" name="zoek" title="Zoekterm" />
  <input type="submit" value="Zoek" />
</form>

Niet toegestaan

Het is niet toegestaan het value-attribuut als enige label te gebruiken:

Voorbeeld (niet goed)

<input type="text" value="Gebruikersnaam" />
<input type="text" value="Wachtwoord" />

Wat we ook niet toestaan is het verbergen van labels (met behulp van CSS) en het herhalen van de instructietekst in een ander HTML-element, zoals een paragraaf (<p>) of <span>.

Toegestaan

In bepaalde gevallen is een visueel label niet handig. Gebruik dan het title-element.

Voorbeeld 1: datum

<fieldset>
<legend>Geboortedatum:</legend>
<select title="dag" name="gdag">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<select title="maand" name="gmaand">
<option>januari</option>
<option>februari</option>
<option>maart</option>
<option>april</option>
<option>mei</option>
</select>

<select title="jaar" name="gjaar">
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
</select>
</fieldset>

Voorbeeld 2: score

<form>
  <fieldset>
    <legend>De kwaliteit van de maaltijd was</legend>
    <strong>Ondermaats</strong>
    <input type="radio" value="1" name="score" title="1 op een schaal van 5" />
    <input type="radio" value="2" name="score" title="2 op een schaal van 5" />
    <input type="radio" value="3" name="score" title="3 op een schaal van 5" />
    <input type="radio" value="4" name="score" title="4 op een schaal van 5" />
    <input type="radio" value="5" name="score" title="5 op een schaal van 5" />
    <strong>Uitstekend</strong>
  </fieldset>
</form>

Voorbeeld 3: rekeningnummer

<form>
  <fieldset>
    <legend>Rekeningnummer</legend>
    <input type="text" size="3" maxlength="3" name="deel-1" title="Deel 1 (3 cijfers)" />
    <input type="text" size="7" maxlength="7" name="deel-2" title="Deel 2 (7 cijfers)" />
    <input type="text" size="2" maxlength="2" name="deel-3" title="Deel 3 (2 cijfers)" />
  </fieldset>
</form>

Waarom?

De inhoud van het title-attribuut wordt voorgelezen en in braille weergegeven als een formulierveld focus krijgt.

Tooltips zijn ook nuttig voor andere bezoekers die het scherm wel kunnen zien: ze verschijnen in de buurt van een invoerveld als u er met de muis over beweegt en kunnen extra ondersteuning bieden bij het invullen van een formulier.