Ajattelin kirjoittaa lyhyesti miksi HTML:n label-elementtejä pitäisi käyttää. 456 Berea Street on kuitenkin tehnyt saman vähän kattavammin: Use the label element to make your HTML forms accessible. Kannattaa lukea jos aihe tuntuu vieraalta.

Nopea demonstraatio:

Checkbox ilman label-elementtiä

Alemmassa valinnassa koko teksti toimii klikattavana kohteena. </form>

Viisi hyvää syytä miksi sinunkin pitäisi käyttää labeleita:

  • Kaikki muutkin käyttävät labeleita. Käyttäjien voi aluksi olla vaikeaa oppia klikkaamaan labeleita, sillä muutos lomakkeessa on melko pieni. Mutta kun sen kerran oppii sitä odottaa kaikilta kohtaamiltaan lomakkeilta.
  • Checkboxien klikkaaminen hiirellä on rasittavaa. Fittsin lain mukaan kohteen osoittamiseen kuluva aika on kääntäen verrannollinen sen kokoon. Pienten checkboxien klikkaaminen on siksi hidasta ja vaatii käyttäjältä ylimääräistä keskittymistä.
  • Checkboxien klikkaaminen mobiiliselaimilla on todella rasittavaa. Klikattavan kohteen pienen koon lisäksi osoitin on huomattavan epätarkka (Nokian puhelimista löytyvä "hiiri" tai sormi iPodissa).
  • Kaksi edellistä kohtaa yhdistettynä johonkin motoriseen ongelmaan tekee tehtävästä jo lähes mahdottoman.
  • <label>-tagien käyttö on erittäin helppoa, joten käyttämättömyydelle ei pitäisi olla mitään estettä.

Terveisin nimim. "ketuttaa joka ikinen kerta kun törmää näin helppoon virheeseen" :P

Kategoria: web-kehitys