NVDA重复朗读模态弹窗关闭按钮问题求助（JAWS正常）

问题核心：模态弹窗的关闭按钮嵌套在<h2>标题标签内时，NVDA会重复朗读标题内容与按钮操作，JAWS表现正常，冗余朗读影响体验，目标是让NVDA准确读出「heading level 2 button Close」。

原因分析 #

NVDA对嵌套在标题内的交互式元素会进行多重语义解析：同时识别标题层级、标题文本、按钮元素，再加上模态对话框的aria-labelledby关联标题ID，导致内容被重复朗读。

修复步骤 #

1. 拆分标题与按钮的嵌套结构
   将关闭按钮从<h2>标签内移出，放在标题同级的容器中，切断NVDA对标题文本与按钮内容的合并解析：

   <div class="MuiDialogTitle-root">
     <h2 id="popupTitle" class="MuiTypography-root MuiTypography-h6">
       Default Pop-UP Title
     </h2>
     <button class="MuiIconButton-root" tabindex="0" type="button" aria-label="Close" id="mui-4">
       <div size="1">
         <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CloseIcon">
           <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
         </svg>
       </div>
       <span class="MuiTouchRipple-root"></span>
     </button>
   </div>
   

2. 确认对话框的ARIA关联正确性
   检查模态对话框根元素的aria-labelledby属性，确保仅关联<h2>的popupTitleID，避免重复触发标题文本朗读。

3. 保留按钮的正确语义标识

   • 维持aria-label="Close"清晰定义按钮功能；
   • 确保SVG的aria-hidden="true"属性生效，避免图标被误朗读（当前代码已正确设置，无需修改）。

验证效果 #

调整后NVDA将准确朗读：

heading level 2 Default Pop-UP Title
button Close

若需更贴近期望的合并朗读形式，可通过调整容器的ARIA角色（如设置role="group"）优化，但拆分嵌套结构已能解决重复朗读的核心问题。

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