Otsikon paikka valintaruuduissa ja valintanapeissa

Tällä sivulla sama kysely on toteutettu kahdella tavalla: ensimmäisessä label-elementti on ennen kenttää, toisessa kentän jälkeen. Kokeile molempia hiirellä ja näppäimistöllä.

• Valintanappi (radio) on yksivalintainen.
• Valintaruutu (checkbox) on monivalintainen.
• Samaan ryhmään kuuluvilla napeilla ja ruuduilla on sama name-attribuutin arvo.
• Ryhmän kysymys kerrotaan legend-elementissä. Ilman sitä ruudunlukijan käyttäjä kuulee vaihtoehdot muttei kysymystä.
• Otsikon napsauttaminen valitsee kentän, jos for ja id vastaavat toisiaan.

Suositus: valintaruuduissa ja valintanapeissa otsikko tulee kentän jälkeen, koska ruutu luetaan ensin ja sen merkitys vasta sitten. Tekstikentissä, valintalistoissa ja tekstialueissa otsikko tulee ennen kenttää.

1. Otsikko ennen kenttää

2. Otsikko kentän jälkeen (suositeltava)

Jälkimmäisen lomakkeen lähdekoodi

<fieldset>
  <legend>Kuinka usein käyt ostoksilla?</legend>
  <p>
    <input id="b-viikoittain" type="radio" name="tiheys" value="viikoittain" checked="checked" />
    <label for="b-viikoittain">Viikoittain</label><br />
    <input id="b-kuukausittain" type="radio" name="tiheys" value="kuukausittain" />
    <label for="b-kuukausittain">Kuukausittain</label><br />
    <input id="b-harvemmin" type="radio" name="tiheys" value="harvemmin" />
    <label for="b-harvemmin">Harvemmin</label>
  </p>
</fieldset>