Example Navigation

Example 3: Text box control with label encapsulating form control

Best Practice Rating: Poor

Text form controls where the label element encapsulates the text box.
Encapsulation is a poor accessibility practice since some screen readers read both the label content and the text content of the text box when the text box gets focus. This can be confusing to screen reader users since they cannot distinguish between the label and the content of the text control.

Example Start

Name

E-mail

Comment

Example End

HTML Source Code

<div class="text">
    <label>Name<br/>
    <input type="text" size="30" name="name" />
    </label>
</div>

<div class="text">
    <label>E-mail<br/>
    <input type="text" size="25" name="email" />
    </label>
</div>

<div class="text">
    <label>Comment <br/>
    <textarea rows="5" cols="50" name="comment"></textarea>
    </label>
</div>

CSS Source Code