NVDA聚焦a标签时读取role=alert父容器全部内容的解决需求

问题现象 #

使用NVDA读屏工具聚焦代码里的<a>标签时，会读取整个带role="alert"的主div内容——从顶部按钮开始，依次读到h4、p文本，最后才到a标签内容。但需要同时保留role="alert"和内部子div结构。

原因 #

role="alert"的元素默认隐含aria-atomic="true"属性，会被读屏工具视为不可分割的原子区域，聚焦区域内任意元素时都会朗读整个区域内容，确保用户获取完整提示信息，但这会导致交互时的冗余朗读。

解决方法 #

给带role="alert"的主div添加aria-atomic="false"，显式关闭原子区域行为：

<div role="alert" aria-atomic="false"> /// main div
  <button
    onClick={()=>{console.log('blabla')}}                                
    aria-label="close button">
   Close
  </button>

  <div> /// parent div
    <h4> title </h4>
    <p> name </p>
    <a aria-label="go to other page">
        link
    </a>
  </div>
</div>

效果说明 #

添加aria-atomic="false"后：

• NVDA聚焦<a>标签时，只会读取该标签的aria-label内容，不再朗读整个alert容器的内容；
• 页面加载时，alert的完整内容仍会被正常朗读，保留role="alert"的提示功能；
• 子div结构和内容完全保留，满足需求。

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