包含图像作为选项的div的键盘可访问性

Question

我刚刚更换了一个单选按钮，用于选择包含手机图像的div的用户移动设备。我正在使用JQuery click事件来检测用户何时选择一个选项。如何使这个键盘可以访问？

Answer 1

从好到坏（IMO），你可以：

• style radio buttons 与您的图片在JS中显然是因为support for form styling is erratic跨浏览器。如果您不再有可见标签，则至少应在屏幕外显示它们。更好的是，只有在JS中测试图像真正显示在屏幕上之后才能执行后者。在这种情况下，图像的文本替代方法可能效率不高。

• 仅在可聚焦元素中使用图像：链接和表单元素。您的answer关于按钮是正确的。如上所述，请注意备用文字和隐藏 label s（不是display: none;或visibility: hidden;，否则屏幕阅读器将无法读取它们，只需使用text-indent或相对/绝对定位

将它们显示在屏幕外部

• 在div上使用tabindex，这样它们就可以聚焦，然后必须按正确的顺序在每个可聚焦元素上添加tabindex。短期和长期都是一场噩梦。

Answer 2

Buttons可以包含HTML，因此对于键盘可访问性，按钮似乎工作得更好。当然，行为与单选按钮并不完全相同。另外，IE＆lt; 8返回内部html而不是value属性。