In an age where user feedback and interaction has become so popular, accessible forms have become that much more important. Many sites have already embraced making their forms accessible, and done a pretty good job of it, but inevitably some will still lack that little extra something – as small as an inappropriately named label through to no accessible features at all.
1. Using label tags
Labels should always be used and include the
for attribute (e.g.
<label for="name">). The value used should match the
id of the input field that the label is being used for:
<label for="name">Name</label> <input type="text" id="name">
Labels for inputs, select dropdowns and textareas should precede the input, though labels for radio buttons and checkboxes should follow the input, as follows:
<input type="checkbox" id="terms"> <label for="terms">Accept our terms & conditions</label>