文本是否应该集中在辅助功能上？我特别在考虑键值对

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。可选项太多会导致不必要地导航您的站点。这是一本指南，对于键盘导航有一些好的建议：