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.

Bookmark and Share
This entry was posted in Accessibility. Bookmark the permalink.

Leave a Reply