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.

In welke gevallen?

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

Voorbeeld 1: datum

datumvelden

<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

Score

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

Voorbeeld 3: rekeningnummer

Rekeningnummer

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

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.

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

Zoekveld

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

Zelf testen

Ga na of er tekstvelden, keuzelijsten, keuzerondjes of aankruisvakjes zonder zichtbaar label gebruikt worden op de website.

Controleer of deze formulierelementen een betekenisvolle tooltip hebben in de vorm van een title-attribuut. In de meeste browsers verschijnt de tooltip als u de muisaanwijzer boven het element houdt. Om zeker te zijn kunt u dit controelren in de html-code of met de developer toolbar.

Web developer toolbar in Firefox:

  • Information > Display Title Attributes
  • Is er een title-atribuut gebruikt en is het beschrijvend?
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.