Question

我非常有兴趣在形式和可访问性方面探索可访问性。

如果图像还有一个代表标签的alt标签，那么将图像用作标签是违反规则的吗？这样可以吗？如果不是最好的方法是什么？我有一个小表格供客户输入他们使用的社交网站的链接，并希望使用社交网站的徽标而不是文本（标签）。

谢谢，千斤顶

Answer 1

我认为使用CSS类会更好：

<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>

所以你可以应用这样的背景：

.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");
}

我不会从标签中删除文字。因此，用户可以选择该文本，但仍然看起来像一个图像（具有适当的背景）。

但如果你真的想坚持使用图像，那么你可以使用这种方法：

<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>

并回答你的问题，我认为使用替代文字的图像是可以的。

Answer 2

免责声明：我不是可用性专家

我认为这取决于几个因素。

这些链接是否都属于知名品牌/徽标的网站？人们会明白这不是一些随意的艺术吗？
是否有某些上下文表明它是可点击的？例如，这是在一个表中，其中一个表头标题为“链接”？鼠标悬停在它上面时会突出显示吗？
为什么典型的文字链接看起来特别丑陋或不显眼？
是否有类似功能的网站可以做同样的事情？

我希望这会有所帮助！

表格标签的图像

2 个答案: