Question

我正在审核的网站上有以下输入：

<input type="submit" name="executeSearch" value="" alt="Execute search" title="Execute search" class="iconButton searchBtn">

通过课程属性，输入按钮被搜索图标替换。

根据可访问性这是正确的方法吗？或者应该使用value属性？我用（NVDA）测试了这个元素的屏幕阅读器能够读取文本（“执行搜索按钮”）。

Answer 1

根据WCAG 2.0，通过CSS添加空值和图标以传达唯一重要信息是失败：F3 - Failure (…) due to using CSS to include images that convey important information

最简单的解决方案：使用input[type="image"]，保持alt="Execute search"（“搜索”更简洁恕我直言），当然添加src="/path/to/img"并删除标题和值属性。图像可以是一个SVG，可以在base64中进行编码（出于性能原因，它是轻量级的理想选择：这是1个资源不下载）。
[type="image"] 似乎已过时，因为它广泛用于大约IE6，在RWD之前，但它不是（proof of concept with an 8x16 viewBox and width*height SVG：itscale®）< / p>

否则，您可以使用带有type="submit"的按钮元素。此元素可以包含SVG，HTML图像，隐藏给屏幕阅读器的文本（在Bootstrap中更好地称为.visually-hidden，.sr-only或.element-invisible，WordPress，Drupal等）。这就是我在“提交”同时包含文本和图像或图标时所使用的内容，因为没有：伪输入和仅文本通过@value

关于您当前加价的一些注意事项：

@alt只能与input[type="image"]
@value不应与类型图像一起使用，否则永远不应为空
@title应该只在那里（在链接和“按钮”上），如果它为现有信息添加一些内容（如订阅⇒订阅时事通讯或编辑⇒特别编辑某些内容）

Answer 2

根据可访问性这是正确的方法吗？或者应该使用value属性？

input[type='submit']按钮不接受alt属性
某些屏幕阅读器可能会使用title属性，但它对非屏幕阅读器用户仍然有用
使用value属性是屏幕阅读器用户的推荐方法

辅助功能：输入图像 - 使用value-，alt-或title-attribute？

2 个答案: