html - 文本是否应该为可访问性设置焦点?我特别在考虑键值对

标签 html web-accessibility

使类似以下内容可访问的最佳实践是什么?目前我有以下几点:

<div tabindex="0" aria-labelledby="key1" aria-describedby="value1">
    <label id="key1">Current User:</label>
    <span id="value1">BBRENNAN</span>
</div>

这个块是否有必要使用 tabindex="0" 聚焦? ?或者屏幕阅读器可以更自然地推断出这种关系吗?我知道屏幕阅读器通常可以找到和阅读文本,但我不清楚如何确保我传达了 Current User 之间的关系。和 BBRENNAN .

编辑:
我只是在查看定义列表,这似乎更接近我的需要。您也可能会争辩说这是表格数据,应该使用表格。如果这些解决方案确实是最佳实践,那完全没问题,但我喜欢关于 aria-labelledby 的一件事和 aria-describedby是将外部 div 聚焦在 NVDA 中可以很好地读取整个内容。所以上面的内容应该是“当前用户,BBRENNAN”。

出于某种原因,定义列表读作“包含 2 个项目的列表,当前用户”。
表格只是让我使用箭头键在单元格之间移动阅读器,这也无法实现我上面描述的内容。一个关于这个主题的 5 年前主题的链接:https://webaim.org/discussion/mail_thread?thread=7089

最佳答案

一般规则是只有交互式元素应该是可选项卡的。因此,除非您的用户列表项是可点击的,否则您应该删除 tabindex。有太多可选项卡的内容会使您的网站导航变得不必要地困难。这是一份指南,其中对键盘导航有一些很好的建议:

https://webaim.org/techniques/keyboard/

Sighted mouse users are able to visually scan a web page and directly click on any item. Keyboard users must press the Tab key or other navigation keys to navigate through the interactive elements that precede the item the user wants to activate. Tabbing through lengthy navigation may be particularly demanding for users with motor disabilities.

关于html - 文本是否应该为可访问性设置焦点?我特别在考虑键值对,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59846806/

相关文章:

javascript - jQuery 函数防止在单击时添加/删除类

javascript - 获取div中的内容到PHP变量

accessibility - 可访问性的占位符文本最佳实践

html - 使用 Bootstrap 字形图标时如何修复 "empty button"Web 可访问性错误

javascript - 显示模态时的 "aria-hidden elements do not contain focusable elements"问题

javascript - 如何强制秒数出现在 HTML5 "time"输入控件上?

javascript - JS Switch 案例无法正常工作总是默认执行

jquery - 需要包裹指定内容