aria-modal="true"必须显式添加，不能依赖role="dialog"；需配合focus管理、aria-labelledby、aria-describedby及backdrop的aria-hidden处理，缺一不可。
aria-modal="true" 必须显式添加，不能依赖 role="dialog"
role="dialog" 本身不隐含模态行为，浏览器和读屏器不会自动将其视为阻断背景交互的模态框。必须手动加 aria-modal="true" 才能正确传达模态语义。
常见错误是只写 <div role="dialog"> 就以为完成了——实际测试中 NVDA、JAWS 或 VoiceOver 仍会朗读并允许聚焦到背景元素，键盘 Tab 也能逃出弹窗。
<ul>
<li>
<code>aria-modal="true" 是独立声明，和 role="dialog" 平级，二者缺一不可
false 或移除（推荐移除）aria-modal，但现代主流浏览器（Chrome ≥ 85、Firefox ≥ 76、Safari ≥ 13.1）均已支持必须配合 focus 管理，否则 aria-modal 形同虚设
即使写了 aria-modal="true"，如果用户用键盘 Tab 仍能离开 dialog 内容，屏幕阅读器就会“感知错乱”：它以为这是模态框，但焦点却跑到外面去了。
实操要点：
- dialog 显示后，立即用
element.focus()把焦点移到第一个可聚焦子元素（如button或带tabindex="0"的容器） - 监听
keydown捕获Tab键，实现焦点循环（focus trap）：按 Shift+Tab 到开头时跳到最后一个可聚焦项，反之亦然 - 关闭 dialog 时，必须把焦点恢复到触发它的那个元素（比如原
button），否则焦点会丢失到 body 顶部
不要遗漏 aria-labelledby 和 aria-describedby
仅靠 role="dialog" + aria-modal="true" 不足以构成完整可访问 dialog。缺少标题会导致读屏器无法播报“XX 对话框已打开”。
正确做法：
- 给 dialog 内部一个明确标题（如
<h2 id="dialog-title">确认删除</h2>），然后通过aria-labelledby="dialog-title"关联 - 若有补充说明（如操作后果提示），用
aria-describedby="dialog-desc"指向对应id - 避免用
aria-label替代aria-labelledby—— 后者支持 HTML 内容，前者只能是纯文本，且无法被翻译或样式化
注意 backdrop 层的 aria-hidden 处理
很多实现会在 dialog 下面加一层半透明遮罩（backdrop），用于视觉隔离和点击收起。这个 backdrop 必须明确标记为不可访问，否则读屏器可能误读其内容或干扰焦点流。
正确方式：
- backdrop 元素要设
aria-hidden="true" - 同时确保 backdrop 上没有可聚焦元素（如
button、a、input），否则aria-hidden会被忽略 - 如果 backdrop 需要点击关闭，应在 dialog 容器上监听
click，而不是在 backdrop 上放button—— 后者会破坏语义结构
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-desc"> <div id="dialog-title">警告</div> <div id="dialog-desc">此操作不可撤销</div> <button>确定</button> <button>取消</button> </div>真正难的不是写对这几个属性，而是确保所有交互路径（键盘、屏幕阅读器、触控）都走通——尤其 focus trap 的边界处理和焦点恢复逻辑，很容易漏掉某一种关闭方式（Esc、Backdrop 点击、X 按钮）。
