Moodle数据库活动模板：非输入元素无ID语义标签关联的无障碍难题

问题背景 #

在Moodle数据库活动的数据列表视图中，受模板机制限制：输入过滤器会自动闭合每个模板的块级元素，导致无法把表头、数据行放进同一个表格（否则会生成N+1个独立表格）。需要实现响应式列表：宽屏显示统一表头，窄屏隐藏表头，每行自带对应标签。

核心难题是如何让每行的.label和.value建立语义关联：

• 没法用aria-labelledby/aria-describedby，因为模板里生成不了唯一ID（只有原始字段值，无索引类变量）
• <label>标签只适用于输入元素，同样受ID限制
• 给.value加aria-label不符合MDN规范（该属性针对交互元素），还会导致屏幕阅读器重复读取视觉标签和aria内容

现有代码结构：

<!-- header tpl -->
<div class="row header">
  <span class="hidden-xs">Field One</span>
</div>
<!-- repeated row tpl -->
<div class="row data-row">
  <span class="visible-xs hidden-sm label">Field One:</span>
  <span class="value">[[field one value]]</span>
</div>

可行解决方案 #

1. 原生描述列表<dl>/<dt>/<dd>（最优） #

这是HTML原生的描述列表结构，天生用于关联标签（<dt>）和描述内容（<dd>），不需要依赖ID，屏幕阅读器能自动识别这种语义关联，完美适配静态数据场景。

调整模板如下：

<!-- header tpl - 宽屏显示表头 -->
<div class="row header hidden-xs">
  <span>Field One</span>
</div>
<!-- repeated row tpl - 窄屏显示标签，宽屏隐藏 -->
<div class="row data-row">
  <dt class="visible-xs hidden-sm label">Field One:</dt>
  <dd class="value">[[field one value]]</dd>
</div>

再配合CSS把<dt>和<dd>设置成行内/弹性布局，就能实现和原有结构一致的视觉效果，同时满足无障碍语义要求。

2. 依赖文本顺序的简化方案（备选） #

如果不想改动现有HTML结构，仅靠文本顺序其实也能被屏幕阅读器正确解读——因为标签和值在DOM里是紧邻的，按顺序读取时用户能自然对应两者关系。这种方案虽然没有明确的语义关联标记，但在无法使用原生结构的情况下，是可接受的妥协方案。

3. 媒体查询控制aria-label（进阶） #

如果必须保留原有<span>结构，可以通过JS结合媒体查询，只在宽屏（隐藏视觉标签）时给.value添加aria-label，窄屏时移除：

// 监听屏幕尺寸变化
window.addEventListener('resize', updateAriaLabels);
// 初始化执行
updateAriaLabels();

function updateAriaLabels() {
  const isWideScreen = window.innerWidth >= 768;
  document.querySelectorAll('.data-row').forEach(row => {
    const label = row.querySelector('.label').textContent;
    const value = row.querySelector('.value');
    value.setAttribute('aria-label', isWideScreen ? label : '');
  });
}

这种方案需要自定义JS支持，复杂度高于第一种，但能在保留原有结构的前提下解决语义关联问题。

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