如何让NVDA屏幕阅读器在Angular应用段落与div间暂停并识别aria-label

问题原因拆解 #

1. 带aria-label的div未被识别的原因 #

普通<div>属于无默认语义的通用容器，没有可访问性角色的前提下，屏幕阅读器不会主动读取它的aria-label属性，只有可交互元素、语义化地标/分组元素才会触发aria-label的读取逻辑。

2. 读取内容连在一起、无分段停顿的原因 #

• 版本号断行、多段内容合并读取的问题，大概率是Angular模板渲染时插值表达式生成的文本节点被拆分，或是你给<p>标签设置了非块级的display属性（比如display: inline/inline-block），导致屏幕阅读器无法识别为独立的语义段落。
• footer作为contentinfo地标，默认读取时会先播报地标标签+内部第一个可访问元素的内容，所以出现了Page Information和Brand Logo连读的情况。

修复方案 #

按下方代码修改即可达到你期望的读取效果：

<footer aria-label="Page Information">
  <div id="versionFooter">
    <!-- 给logo父块加role="paragraph"确保语义块独立 -->
    <p role="paragraph">
      <img id="logo" src="assets/images/xy.svg" alt="Brand Logo"/>
    </p>
    <!-- 加role="group"让div成为可识别的分组，触发aria-label读取 -->
    <div class="displayVersion" role="group" aria-label="Version Information">
      <!-- 给p加role="paragraph"，即使CSS修改了display属性也能保证语义正确 -->
      <p id="backendVersion" role="paragraph">
        Backend Version: {{backendVersion.getString()}}
      </p>
      <p id="frontendVersion" role="paragraph">
        Frontend Version: {{frontendVersion.getString()}}
      </p>
    </div>
  </div>
</footer>

额外验证项 #

• 检查.displayVersion、<p>标签的CSS样式，不要设置display: contents，该属性会抹除元素的语义层导致屏幕阅读器跳过。
• 确认NVDA处于浏览模式（按Insert+N打开NVDA菜单，点击「浏览模式」→勾选「启用浏览模式」），逐行读取默认就是按语义块停顿，不需要额外配置。

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