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

Jos*_*eim 0 html accessibility tabindex wai-aria

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

<input type="text" tabindex="-1" aria-tabindex="0" />
Run Code Online (Sandbox Code Playgroud)

我需要这个,因为客户想对于一些普通的HTML输入一个奇特的GUI,所以我想使自己的投入非tabbable(视觉用户谁可以使用GUI),而且使tabbable非视觉用户(然后谁可以简单地对HTML输入进行操作,并且可以隐藏GUI aria-hidden="true").

更新

我在这个标题为"可访问,键盘友好的自定义选择菜单 " 博客中找到了解决我的特定问题的解决方案(为视觉键盘和鼠标用户提供了一个精美的GUI,同时又不影响屏幕阅读器用户的体验):

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

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

小智 5

如果您可以这样做,您将使该表单对于具有移动性问题且无法使用鼠标的视力正常的访问者无法使用.它们以与屏幕阅读器软件用户相同的方式依赖键盘.

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

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