aria-modal

何时使用

用于应在打开期间阻止与页面其余部分交互的 role="dialog" 或 role="alertdialog" 元素。设置 aria-modal="true" 后，屏幕阅读器会将其虚拟光标限制在对话框内，并将背景内容播报为不可达。

模态对话框承担三项职责：

1. aria-modal="true" — 告知辅助技术这是模态窗口。
2. 背景惰性 — 通过在周围内容上添加 inert 属性，或通过 JavaScript 管理的焦点陷阱来实现。否则键盘用户可以用 Tab 键退出对话框。
3. 初始焦点 — 对话框打开时将焦点移入其中，关闭时将焦点恢复到触发元素。

aria-modal 单独只处理屏幕阅读器侧；它不能阻止键盘用户用 Tab 键跳出对话框。浏览器从 aria-modal 推断惰性的支持情况不一致，因此始终应配合使用。

原生 HTML <dialog> 元素配合 .showModal() 可自动处理以上三项。条件允许时优先使用。

如何保持同步

有效值为 "true" 和 "false"。对话框打开时渲染 "true"；关闭时移除该属性或设置为 "false"（通常关闭的对话框不在 DOM 中，因此该属性无关紧要）。

aria-modal 与两个标签属性配合使用：

• aria-labelledby="<dialog-title-id>" — 指向可见的标题。
• aria-describedby="<dialog-body-id>" — 可选，用于简短描述。

两者合用，可让屏幕阅读器产生连贯的开场播报：“对话框，删除账户？此操作无法撤销。“

常见错误

• aria-modal="true" 而无任何焦点陷阱——键盘用户可 Tab 进入背景。
• 在非模态弹出框或工具提示上使用 aria-modal。role="dialog" 仅用于真正的模态对话框；弹出框不是对话框。
• 缺少 aria-labelledby——屏幕阅读器只播报”对话框”而无名称。
• 对话框打开时未将焦点移入其中。
• 对话框关闭时未将焦点恢复到原始触发元素。
• 用 aria-hidden="true" 标记背景而非使用 inert——键盘焦点仍可逃出；只有屏幕阅读器光标受到约束。
• 两个同时打开的模态窗口均设置 aria-modal="true"。无障碍树会产生混乱；请一次只显示一个。

示例

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">删除账户？</h2>
  <p id="confirm-body">此操作无法撤销。</p>

  <button type="button" autofocus>取消</button>
  <button type="button">删除</button>
</div>