在数据字段上添加屏幕阅读器关联

Question

在现有的网络应用程序中存在一些可访问性问题。某些视图表示键值对的集合，例如姓名 -> John Doe、街道 -> 对角巷。目前，它们仅按位置相关联。他们彼此凌驾于彼此之上。如何将它们相互链接？

<div class="someClasses">
   <label>name</label>
</div>
<div class="otherClasses">
   <p>John Doe</p>
</div>

一种解决方案是将段落

更改为禁用的文本字段并使用 for 标签。这可能会导致如何启用它们的混乱。

另一个考虑的选项是使用数据列表（dl、dd、dt）。当使用屏幕阅读器 NVDA 进行测试时，未读取关联。

有更好的选择吗？

Answer 1

您可以使用aria。像这样：

<div class="someClasses">
   <label id="name-label">Name</label>
</div>
<div class="otherClasses">
   <p id="name-value" aria-labelledby="name-label">John Doe</p>
</div>

此关联通知屏幕阅读器

<p>

元素的内容与标签相关。