Question

在我的表单中，我有一个提交按钮，它是一个图像（按钮+文本）。它有一个空的value=""，因此它不会侵入按钮图像。

如何让需要辅助功能的用户理解此按钮？

<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" />

（隐藏）标签是否合适？

<label class="hideForm" for="submit">Submit Form:</label> 
<input type="submit" name="submit" id="submit" value="" class="button" style="background: url(img/enter-now-button.png) no-repeat;" />

Answer 1

使用CSS提供按钮的内容是个坏主意。 CSS用于演示，而不是内容。

相反，你可以使用

input element中的image button state（及其alt attribute）或
一个button element，img element（及其alt attribute）为孩子。

Answer 2

我对WCAG的理解是它针对每个人，而不仅仅是盲人。

使用图像替换文本并在文本中提供替代方法，如WCAG（http://www.w3.org/TR/WCAG20-TECHS/H36.html）的建议技术中所定义，这对于许多可访问性专家来说是一件好事。

以前的作者给出的答案应该满足其中的大多数。

但是，只要图像本身没有传达足够的信息来理解动作的目标而不必使用屏幕阅读器或鼠标，那就不够了。

想想一个截瘫患者，他必须使用实时眼动追踪浏览网站。

所以我的建议是：使用之前曝光的技术之一（按钮，输入[type = image]），如果图像传达足够的信息以了解它将执行的操作。在其他情况下，还可以使用可见标题（不隐藏或不在屏幕外）来描述操作（“单击十字以删除元素”）。

Answer 3

使用

    input type="image" alt="description of image" src="pathtoimage.ext"

这应该与提交按钮相同，并且不需要恶作剧

否则放置描述图像的标题属性

Answer 4

我同意@unor，但我建议使用css来设置按钮的样式，而不是在按钮内使用img标签。

WCAG提交按钮作为图像

4 个答案: