Welcome to Web Axe - Practical Web Accessibility Tips
Hello and welcome to Web Axe. This is your host Dennis Lembree and this is the second episode - glad you could join me. And what we're going to be talking about today is forms and how to add a label tag to a form element in order to make it accessible and a little more user friendly.
This technique is priority 2 by the W3C standards which is a little surprising to me since forms are so popular on the web, and it's not very hard to implement this technique. By the way, this is checkpoint 10.3.2 if you want to go to W3.org and look it up.
So, let's get on with it then. Let's say you have a field in a form on your web page called YourEmail so you want the user to enter his or her email address. So you have the words "Your Email" and then [<input type="text" name="txtEmail" id="txtEmail"> ] Now, make sure you have the id="txtEmail" in there because you're going to need it for this functionality but also because it's just good XHTML practise - hopefully that's what you're writing for.
So, the next step is simply to add that label tag. So you can put it in front or after your input but basically, I mean it could be anywhere on the page but in good practise you probably want to place it just before your input tag and you want to wrap it around the words 'your email' because what you're doing is you're actually setting - attaching that label semantically, attaching that label "Your Email" to the input field. So you would type [ <label for="txtEmail">Your Email</label> ]. So you've wrapped the label tag around the words Your Email and you've got the for="txtEmail" attribute in your label. So that's basically it - now your email form element is accessible and 508-compliant and it's also user friendly because on most browsers if you click on the label text, your cursor will become enabled in the field so you don't have to click on the field all the time, you could also click on the label text which is kind of nice. In some browsers, if you even mouse over the label text, the form element, especially radio buttons, will highlight so you know that that label text is associated with that form element.
And keep in mind that you know that your attributes should have double quotes around them - I didn't want to repeat that for every attribute when I was explaining this - and there you have it - accessible form elements on your website.
So that's your tip for this episode. Thanks for listening, take care.
Visit Web Axe at Web Axe.blogspot.com. Grab your RSS or ATOM feed here. You can also leave a comment or send Dennis an email.