FireFox+NVDA环境下关闭Modal时朗读Heading level1而非触发元素求助

问题背景 #

在FireFox浏览器搭配NVDA屏幕阅读器测试无障碍模态框时，关闭弹窗后会错误读出“heading level1 view modal button”，但预期仅需朗读“view modal button”。参考的是一款经典无障碍模态框的实现思路。

核心原因 #

大概率是关闭模态框后，焦点回退到了包含触发按钮的<h1>标签容器，而非按钮本身。NVDA会识别父级元素的标题语义，因此连带读出了heading层级信息。

修复步骤 #

1. 调整触发按钮的DOM结构 #

• 将触发按钮从<h1>标签内移出，让按钮成为独立的交互元素，脱离标题的语义上下文。
• 如果必须保留按钮在标题内，给<h1>添加aria-hidden="true"，让屏幕阅读器忽略该标题的语义，同时确保按钮自身的无障碍标签正确。

2. 明确按钮的无障碍标识 #

• 给触发按钮设置aria-label="view modal button"，强制指定朗读内容，避免NVDA读取多余的上下文语义。
• 或者确保按钮的可见文本就是“view modal button”，且没有被其他带语义的父元素包裹。

3. 修正焦点回退代码 #

• 关闭模态框时，要确保焦点直接定位到触发按钮的DOM节点，而非其上级容器。示例代码：

const triggerBtn = document.getElementById('your-modal-trigger');
// 执行关闭模态框的逻辑后
triggerBtn.focus();

• 切勿把焦点设置到<h1>这类带语义的父元素上，否则NVDA会额外读取标题层级。

额外测试建议 #

在FireFox+NVDA组合下反复验证，不同阅读器和浏览器对语义的解析逻辑存在差异，需确保焦点流转和语义读取完全符合预期。

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