Q:

Getting rid of password_confirm labels in module

In a module, the following generates unwanted labels for 'Password' and 'Password confirm':
$form['password'] = array(
  '#type' => 'password_confirm',
  '#maxlength' => 20, 
  '#size' => 10,
);

It produces the following HTML:
<div class="form-item form-type-password form-item-password-pass1">
  <label for="edit-password-pass1">Password </label>
  <input class="password-field form-text" type="password" id="edit-password-pass1" name="password[pass1]" size="10" maxlength="128" />
</div>
<div class="form-item form-type-password form-item-password-pass2">
  <label for="edit-password-pass2">Confirm password </label>
  <input class="password-confirm form-text" type="password" id="edit-password-pass2" name="password[pass2]" size="10" maxlength="128" />
</div>

The object is to get rid of the text labels and replace them with images.  I have tried toggling '#title', '#title_display' and '#label_display' but nothing works.
Any ideas?

A:

Replacing a label with an image isn't a good idea, mainly for accessibility reasons (an input without a label is a sure way to fail a WAI compliance test).
One simple option would be to set the dimensions and background image of the labels in CSS, and indent the text so it's not visible.
Something like
.form-item-password-pass1 label {
  display: block;
  width: 50px;
  height: 50px;
  background: url(/images/50x50.png) left top no-repeat;
  text-indent: -9999em;
}

That way you don't actually need to change the markup, and everyone gets the best of both worlds.

