WCAG 提交按钮作为图像

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 in the image button state (and its alt attribute), 或
a button element with an img element (and its alt attribute) 作为 child.

Answer 2

使用

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

这应该与提交按钮一样，不需要恶作剧

否则添加描述图像的标题属性

Answer 3

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

Answer 4

我对 WCAG 的理解是它面向所有人，而不仅仅是盲人。

按照 WCAG (http://www.w3.org/TR/WCAG20-TECHS/H36.html) 的建议技术中的定义，用图像替换文本并在文本中提供替代方案是一件好事，这对很多无障碍专家来说已经足够了。

以前作者给出的答案应该能满足大多数人的需求。

但只要图像本身不能传达足够的信息来理解动作的目标，而无需使用 screen-reader 或鼠标，这就不够了。

例如，想一想必须使用 real-time 眼动追踪浏览网站的截瘫患者。

所以我的建议是：如果图像传达了足够的信息以了解它将执行哪个操作，则使用之前公开的技术之一（按钮、输入 [type=image]）。在其他情况下，还可以使用可见标题（既不隐藏也不在屏幕外）来描述操作 ("click on the cross to delete an element")。

WCAG 提交按钮作为图像

WCAG submit button as image

html

accessibility

wcag

submit-button