Image for form label

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

声明：我不是一个可用性专家

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

• 链接是否都链接到有知名品牌/徽标的网站？人们会明白这不是一些随机艺术吗？
• 是否有一些上下文表明它是可点击的？例如，这是否在一个表格标题中声明“链接”的表格中？当鼠标悬停时，它会突出显示吗？
• 为什么典型的文本链接会显得特别丑陋或不具有独特性，这是否有原因？
• 是否有类似功能的网站可以做同样的事情？

我希望这有助于以某种方式！