Image for form label

Question

Hi All,

I am quite interested in exploring accessibility in forms and accessibility in general.

Is it against the rules to use an image as a label if the image also has an alt tag representing the the label? Would this be ok? If not what is the best approach? I have a small form for clients to enter their links to the social sites they use and would like to use the logo of the social site rather than text (label).

Thanks, Jack

Answer 1

I think it would be better to use CSS class:

<div class="social">
  <label for="social1" class="s1">Social 1</label>
  <input type="text id="social1" name="social1" />

  <label for="social2" class="s2">Social 2</label>
  <input type="text id="social2" name="social2" />
</div>

So you could apply background like this:

.social {
  display: block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
}
.social .s1{
  background-image: url("social1.gif");
}
.social .s2{
  background-image: url("social2.gif");
}

---

I would not remove text from the labels. So it would be possible for users to select that text but still look like an image (with appropriate background).

But if you really want to stick with images only then you can use this approach:

<div class="social">
  <label for="social1" class="s1">
    <img alt="Social 1" src="img/social1.gif" />
  </label>
  <input type="text id="social1" name="social1" />

  <label for="social2" class="s2">
    <img alt="Social 2" src="img/social2.gif" />
  </label>
  <input type="text id="social2" name="social2" />
</div>

and answering your question, I think it is ok to have images with alt text.

Answer 2

Disclaimer: I'm not a usability expert

I think it would depend on a few factors.

• Are the links all to sites that have well known brands/logos? Will people understand that it's not some random art?
• Is there some context that indicated that it is clickable? For instance, is this in a table where one of the table headers states "Link"? Does it highlight when you mouse over it?
• Is there a reason why typical text links would look particularly ugly or nondistinctive?
• Are there sites with similar functionality that do the same thing?

I hope this helps in some fashion!