使元素仅可用于屏幕阅读器答案

【问题标题】：Make element tabbable only for screen readers使元素仅可用于屏幕阅读器
【发布时间】：2014-08-20 09:42:18
【问题描述】：

是否可以只为屏幕阅读器制作一个可选项卡的元素？我知道我可以为所有设备（tabindex="-1"）制作一个不可选项卡的元素，但是有类似aria-tabindex 的东西吗？所以我可以做到以下几点：

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

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

更新

我在标题为 An accessible, keyboard friendly custom select menu 的博客中找到了解决我特定问题的方法（为可视键盘和鼠标用户提供精美的 GUI，同时不影响屏幕阅读器用户的体验）：

诀窍在于将原生select 元素放置在精美的GUI 上方（使用opacity: 0 进行视觉隐藏），它本身将接收到的点击传播到操纵原生select 的自定义JS。这样 GUI 就不需要聚焦了，这解决了我在这种特殊情况下的问题。即使是文本浏览器也能享受完整的体验。

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

【问题讨论】：

【解决方案1】：

如果您能做到这一点，您将无法让视力正常的访客使用该表单，因为他们行动不便，无法使用鼠标。他们像屏幕阅读器软件用户一样依赖键盘。

您可以为花哨的 GUI 版本添加键盘支持，ARIA 用于描述每个部分的功能（ARIA 只能描述事物，它不会添加或删除任何功能）。我还看到在标准输入的基础上添加了一些花哨的输入作为渐进式增强，图形只是被赋予了 aria-hidden=true，因此它们不会显示为无视力用户的重复。

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

【讨论】：