Example Navigation

Example 2: File 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

Up load file

Example End

HTML Source Code

<div class="file">
    <label>Up load file <br/>
    <input type="file" name="name" />
    </label>
</div>

CSS Source Code

  <style type="text/css">
div.file label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: block;
  font-size: 100%;
  margin-bottom: 1.25em;
}

div.file input {
  margin: 0;
  padding: 0;
}
  </style>