Accessible HTML Form Design Tip: Checkboxes/Radio buttons

Quickly make your check boxes and radio buttons more accessible and usable by adding a label and an id.

By giving your check box an id and then placing a label next to it that references that id the user can click the label and have the checkbox/radio button be filled-in.

<input type="checkbox" id="check1" name="check1" /><label for="check1">Check me out</label>

Without the relevant id and for attributes the user has to click on the miniscule checkbox/radio button which could prove difficult for the majority of slow-witted web users.

Comments are closed.