Using the label Tag for Accessibility

Here at Smartlab Software we pride ourselves in trying to make a website as accessible as possible. We try and make the sites conform to section 508 (government) standard and WCAG priorities 1,2, and 3 as best we can. It makes good business sense.

One of the most common improvements is to add a label tag for every text and textarea input tags in a form.

current method

<p><input >Full Name</p>

using a label

<p><input id="fullname" type="text" >
<label for="fullname">Full Name</label></p>

If you want the text to appear before the input box move the label tag before the input tag like this:

<p><label for="fullname">Full Name</label>
<input id="fullname" type="text" ></p>

As you can see it is pretty easy to add the label tag. Your users will thank you for it.

Leave a Reply

You must be logged in to post a comment.