使元素仅对于屏幕阅读器可列表

时间:2014-08-20 09:42:19

标签: html accessibility tabindex wai-aria

是否可以仅为屏幕阅读器制作元素?我知道我可以为所有设备(tabindex="-1")创建一个不可列表的元素,但有类似aria-tabindex的内容吗?所以我可以做到以下几点:

<input type="text" tabindex="-1" aria-tabindex="0" />

我需要这个,因为客户想要一些普通的HTML输入的花哨的GUI,所以我想让输入本身不可列表(对于可以使用GUI的可视用户),但是让它们可以用于非 - 视觉用户(然后他们可以简单地对HTML输入进行操作,并且可以使用aria-hidden="true"隐藏GUI。)

更新

我在这个名为An accessible, keyboard friendly custom select menu的博客中找到了解决我的具体问题的解决方案(为视觉键盘和鼠标用户提供了一个精美的GUI,同时又不影响屏幕阅读器用户的体验):

诀窍是将原生select元素放置在花哨的GUI上方(使用opacity: 0视觉隐藏),它本身将收到的点击传播到操纵原生{{1}的自定义JS }。这样GUI就不需要是可聚焦的,这解决了我的特殊情况的问题。即使是文本浏览器也会享受完整的体验。

我不知道这个技巧可以扩展到更复杂的花式GUI多远,但这绝对是一个好主意。

1 个答案:

答案 0 :(得分:5)

如果您可以这样做,您可能会使表单无法访问具有移动性问题且无法使用鼠标的视力正常的访问者。他们依赖键盘的方式与屏幕阅读器软件用户一样。

您可以为花哨的GUI版本添加键盘支持,ARIA用于描述每个部分的功能(ARIA只能描述事物,它不会添加或删除任何功能)。我还看到在标准输入的顶部添加了花哨的输入作为渐进增强,图形刚刚给出aria-hidden = true,因此它们不会显示为无视用户的副本。

编辑添加:Filament Group在其代码示例页面的可访问表单部分中有一些样式表单输入。他们是我的意思的一个很好的例子。