Belgisch kwaliteitslabel voor toegankelijke websites. AnySurfer vervangt BlindSurfer sinds 1 juli 2006.

Formulieren op internet bestaan enerzijds uit formuliervelden (zoals invoervelden, keuzerondjes, aankruisvakjes en keuzelijsten) en anderzijds uit instructies of labels, die informatie geven bij een formulierveld. Het volstaat niet om labels in de buurt van een veld te plaatsen; ze moeten ook expliciet verbonden zijn met behulp van het label-element.

Voeg aan elk formulierelement een id toe met een unieke waarde. Deze waarde herhaalt u in het for-attribuut van het label-element. Plaats het label-element rond de instructietekst die bij het formulierveld hoort. Het is hierbij onbelangrijk of het formulierelement en de instructietekst in verschillende tabelcellen of div's zijn geplaatst.

Voorbeeldcode

<form>
  <div>
    <label for="naam">Uw naam</label>
    <input type="text" id="naam" name="naam" />
  </div>
  <div>
    <input type="checkbox" name="auto" id="wagen">
    <label for="wagen">Ik heb een eigen wagen</label>
  </div>
  <div>
    <label for="v">Station van vertrek:</label>
    <select name="departure" id="v">
        <option value="0">Leuven</option>
        <option value="1">Gent</option>
    </select>
  </div>
  <p>
    <label for="fb">Geef ons uw feedback:</label>
    <textarea rows="5" cols="50" id="fb" name="txt7">
    </textarea>
  </p>
</form>

Voordelen

Labels zijn in de eerste plaats een belangrijke hulp voor screenreadergebruikers. Deze software kan niet zelf inschatten welke instructie bij welk formulierveld hoort. Dankzij de label/for-constructie kan de juiste instructie voorgelezen worden als de cursor op een formulierveld terechtkomt.

Het gebruik van labels heeft ook voordelen voor muisgebruikers: om een checkbox of radiobutton aan te vinken of om de cursorfocus te verplaatsen naar een tekstveld of combobox, volstaat het om op de labeltekst te klikken. Vooral mensen met een motorische beperking maken hier dankbaar gebruik van.

Opmerking

Er is nog een tweede techniek om het label-element te gebruiken, maar deze heeft niet dezelfde voordelen en daarom staan we het gebruik niet toe.

<p><label>Naam: <input type="text" name="naam" /></label></p>
<p><label><input type="checkbox" name="auto"> 
Ik beschik over een eigen wagen</label></p>

Deze methode lijkt eenvoudiger, maar kunt u enkel gebruiken als het formulierveld en het label niet door andere tags zijn gescheiden. Bovendien is de ondersteuning in screenreaders minder goed en valt het effect van de aanklikbare labeltekst weg in Internet Explorer.

Naar boven