为屏幕阅读器建立数据字段键值对关联的最优方案咨询

针对你遇到的键值对无障碍关联问题，以下是两个更可靠的替代方案：

方案一：使用aria-labelledby属性直接关联 #

不需要修改原有视觉结构，通过ARIA属性明确键值关联关系，屏幕阅读器（包括NVDA）能正确识别。

修改后代码：

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

• 给label添加唯一id，然后在对应的值元素（<p>）上设置aria-labelledby指向该id
• 屏幕阅读器读取值时会先播报关联的标签文本，明确“name: John Doe”的对应关系
• 完全保留原有视觉样式和交互逻辑，不会出现禁用文本框的混淆问题

方案二：修复<dl>语义化结构 #

如果希望用原生语义化标签，需确保<dt>（键）和<dd>（值）处于同一个<dl>容器内，之前NVDA未识别大概率是结构错误导致的。

修改后代码：

<dl>
  <dt class="someClasses">name</dt>
  <dd class="otherClasses">John Doe</dd>
  
  <!-- 多组键值对依次排列 -->
  <dt class="someClasses">Street</dt>
  <dd class="otherClasses">Diagon Alley</dd>
</dl>

• 原生<dl>、<dt>、<dd>是为键值对场景设计的语义化标签，正确结构下NVDA会自动关联每组dt和dd
• 只需调整容器结构，保留原有类名即可维持视觉样式
• 适合需要强语义化的场景，符合无障碍最佳实践

内容的提问来源于stack exchange，提问作者finder2