文本是否应该可聚焦以实现可访问性？我特别考虑键值对

Question

关于使类似以下内容可访问，目前我有以下内容：

<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

Answer 1

一般规则是只有交互元素才应该是可选项卡的。因此，除非您的用户列表项是可点击的，否则您应该删除 tabindex。太多可选项卡的内容可能会给您的网站导航带来不必要的困难。以下指南为键盘导航提供了一些很好的建议：

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

有视力的鼠标用户能够直观地扫描网页并直接单击任何项​​目。键盘用户必须按 Tab 键或其他导航键才能浏览用户想要激活的项目之前的交互元素。对于有运动障碍的用户来说，通过冗长的导航进行选项卡可能特别困难。