Building Accessible Web Forms

Building Accessible Web Forms - Improving accessibility with the "label" tag
(Page 3 of 5 )

So far, we have consciously implemented the layout for any form present in our website. According to the concepts previously defined, screen readers are potentially capable of reading the description of each form input reasonably well. Although they've been enhanced with newer software programs and better sound hardware, we should always consider those people who use older devices or outdated software. Even so, in many cases, it's pretty difficult for a screen reader to read out the purpose of form inputs, since the final result depends on how we have laid out each form element. Here's where the <label> tag becomes extremely handy for our Web forms.

If we code online forms, making sure that each form input has a <label> tag wrapping the associated text, then we're giving screen readers a lot more of a chance to correctly read the text associated with the form control. We'll be expanding accessibility by 200 percent or more. With the use of the <label> tag, most of modern screen readers will be able to correctly interpret the text related to a form element.

Let's see the proper implementation of this tag in the source code. For instance, we've set up the following lines in the markup:

<form action="processform.php" method="post">

First Name<input name="firstname" type="text" />

<br /><br />

Last Name<input name="lastname" type="text" />

- - -

</form>

In order to apply the <label> tag to each form input, our initial code would be rewritten as follows:

<form action="processform.php" method="post">

<label>First Name<input name="firstname" type="text" /></label>

<br /><br />

<label>Last Name<input name="lastname" type="text" /></label>

- - -

</form>

As you can see, we've wrapped every form input element using a <label> tag to associate the text element with the corresponding <input> element. Another possible way to implement this tag would be assigning an id to the form control and then applying that id value to the "for" attribute of the <label> element. Here is an example to demonstrate this, using the previous markup:

<form action="processform.php" method="post">

<label for="firstname">First Name</label>

<input name="firstname" type="text" id="firstname" /></label>

<label for="lastname">Last Name</label>

<input name="lastname" type="text" id="lastname" />

- - -

</form>

In the last example, we've defined the "for" attribute for each <label> element and assigned the id value corresponding to each <input> element. In thi way we provide the proper association between the text and the form control. This last approach is necessary when we have physically separated the <label> element from the form control tag itself in the source code.

If we have laid out the form using a table structure, we might place the <label> element wrapping the text for the form control in one table cell, and the input element in another, using the "for" attribute to maintain the correct association. Here is an example to illustrate this approach:

<form action="processform.php" method="post">

<table>

<tr>

<td><label for="firstname">First Name</label></td>

<td><input name="firstname" type="text" id="firstname"/></td>

</tr>

- - -

</table>

</form>

In this situation, both the <label> element and the form control reside in different table cells. However the association between them is always maintained with the "for" <label> attribute and the "id" assigned to each <input> element.

This schema is extremely useful when we're creating forms using tables as a container element, which is probably the most usual situation for many websites. Without the proper implementation of the <label> tag, a table-based form layout, where the text for an input element might be placed in a separated cell, and the form control in another, will cause serious problems to screen readers interpreting the content associated to the input element. Otherwise, if we're using the <label> tag correctly, as we've done in the previous example, screen readers shouldn't have problems reading the content.

Also, an important issue to be considered when we're utilizing tables for the layout of forms is to check our tables in a linearized view. We should always check our tables in a linearized mode to make sure that they will render consistently across the page, and that the linkage between the text and a form control is properly maintained. Using the <label> tag ensures that this linkage is strongly kept. 

Whether we implement <label> elements to wrap input tags or employ the "for" attribute in conjunction with ids, we'll be making our forms a lot more accessible.

So far, we've applied <label> elements to each form control. However, there are still a few tricks to help us get the most out of these tags. In the next section, we'll see how it can be done.

blog comments powered by Disqus