如何让屏幕阅读器同步朗读只读表单的标题与值（仅用标签）

安全阿岳

2026-6-30

解决方案

要实现屏幕阅读器同步朗读只读表单的标题与对应值，核心是让标题和值在语义上成为一个可访问单元，同时保留视觉上的左右布局。以下是两种仅用标签的实现方案：

方案一：使用`aria-hidden`与`aria-label`

将标题标记为屏幕阅读器不可见，同时在值中通过aria-label组合标题与值的内容，确保屏幕阅读器读取值时同步朗读完整信息：

<div class="form-group" id="-serviceName">
  <p id="-title" class="col-sm-4 form-control-title" aria-hidden="true">Some text</p>
  <p id="-value" class="col-sm-8 form-control-static" aria-label="Some text Some value">Some value</p>
</div>

aria-hidden="true"：让标题仅保留视觉显示，屏幕阅读器不会单独读取它
aria-label：为值设置完整的朗读内容，屏幕阅读器会直接读取该标签的文本

方案二：使用视觉隐藏文本

如果内容是动态生成的，不想硬编码aria-label，可以在值中添加屏幕阅读器专用的隐藏文本，将标题内容嵌入其中：

<div class="form-group" id="-serviceName">
  <p id="-title" class="col-sm-4 form-control-title" aria-hidden="true">Some text</p>
  <p class="col-sm-8 form-control-static">
    <span class="sr-only">Some text: </span>
    Some value
  </p>
</div>

需要配合视觉隐藏的CSS类（确保仅屏幕阅读器可见）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

这种方式下，屏幕阅读器读取值时，会先读隐藏的标题文本，再读实际值，实现同步朗读的效果。