role="dialog" 必须配合 aria-modal="true" 才能触发屏幕阅读器模态行为并囚禁焦点，否则用户可逃逸到背景；弹窗打开后焦点必须立即落在首个可交互元素，关闭时需返回触发按钮，并用 aria-labelledby 关联内部可见标题。
role="dialog" 必须配合 aria-modal="true"
只写 role="dialog" 不会触发屏幕阅读器的模态行为，用户仍能焦点逃逸到背景内容。必须显式加 aria-modal="true"，否则 NVDA、VoiceOver 都当普通容器处理。
常见错误是漏掉这个属性，或者写成 aria-modal="false"（相当于没设）。
-
aria-modal="true"是强制焦点囚禁的关键开关 - IE 不支持
aria-modal，但 IE 本身已不被主流无障碍标准覆盖，无需降级处理 - 若用 JS 动态插入弹窗，务必在插入 DOM 后立即设置该属性，不能延迟
焦点管理不是可选，而是强制要求
弹窗打开后，焦点必须立刻落在弹窗内第一个可交互元素（如关闭按钮或主输入框），否则屏幕阅读器会从页面顶部重读——用户完全不知道弹窗已出现。
典型做法是在 showModal() 或显示逻辑末尾调用 element.focus()：
立即学习“前端免费学习笔记（深入）”；
const dialog = document.getElementById('my-dialog');
dialog.showModal(); // 如果用原生 <dialog>
dialog.querySelector('button[data-action="close"]').focus();
- 不要依赖 tabindex="0" 的 div 自动获得焦点——它没语义，AT 不识别
- 如果弹窗内没有自然可聚焦元素（比如纯提示信息），需手动加
tabindex="-1"并 focus 它 - 关闭弹窗时，焦点必须返回触发按钮（需提前记录，不能硬编码回 body）
必须提供明确的关闭机制和 aria-labelledby
没有标题的 role="dialog" 会让 AT 用户无法理解弹窗目的。必须用 aria-labelledby 指向一个可见标题元素，且该标题要放在弹窗内部最前位置。
同时，关闭按钮必须有清晰语义：
- 用
<button aria-label="关闭"></button>，而不是仅靠图标或<a href="#"></a> - 标题元素必须是 heading 级别（
<h2>或更高），不可用<div>+ CSS 样式模拟 -
aria-labelledby的 ID 值必须唯一，且不能指向弹窗外的元素
原生 <dialog> 和 role="dialog" 的关键区别
原生 <dialog> 元素默认具备部分无障碍行为（如 ESC 关闭、焦点囚禁），但它仍需手动补全 aria-labelledby 和焦点管理；而手写 div[role="dialog"] 则所有行为都得自己实现。
- 原生
<dialog>在 Safari 中需配合showModal()才生效，直接 display:block 不行 - Firefox 对
<dialog>的aria-modal支持较晚，建议始终显式声明 - 如果项目需支持旧浏览器或复杂嵌套场景，手写
role="dialog"更可控，但别省略aria-modal和焦点逻辑
真正难的不是加几个属性，而是确保每次打开/关闭都同步更新焦点、状态和语义关系。漏掉一次，对依赖 AT 的用户就是一次导航断裂。
