ARIA：aria-modal 属性

描述

内容区域“模态”意味着导航被限制在该区域本身，而背景（模态元素的祖先和同级元素）被隐藏。在 dialog 和 alertdialog 角色容器上设置 aria-modal="true" 会向辅助技术用户指示“模态”元素的出现，但实际上并不会使该元素成为模态。使元素真正模态的功能必须由开发人员实现。

注意： ARIA 仅修改辅助功能树，改变辅助技术如何向用户呈现内容。ARIA 不会改变元素的任何功能或行为。要创建模态效果，您必须使用 JavaScript 来管理行为、焦点和 ARIA 状态。

仅在 dialog 和 alertdialog 容器上相关，设置 aria-modal="true" 告诉辅助技术让用户知道，与页面上的其他内容交互或访问这些内容需要先关闭模态对话框或使其失去焦点。

模态对话框是指显示内容，直到用户关闭它之前，用户的交互仅限于该部分。

创建模态对话框时，aria-modal="true" 告诉辅助技术，当前对话框下方的窗口不属于模态内容。

当显示模态元素时，焦点应置于模态框中。当模态框可见时，焦点需要被“锁定”在模态框内，直到它被关闭。然后，辅助技术（AT）可以导航模态框的内容并理解模态框内容的范围。aria-modal 属性有助于 AT 传达模态框的边界，并将其与页面其他内容区分开。关闭后，焦点应返回到触发模态框的元素。

确保只能通过模态框的子元素来控制模态框。如果模态对话框有一个关闭按钮，该按钮应作为子元素包含在 DOM 中的模态框容器内。

当显示模态元素时，作者应该将所有其他内容标记为 inert（例如，HTML 中的“inert subtrees”）。禁用的内容不是 inert 内容。通过正常和专门的浏览模式（例如，允许辅助技术用户详细浏览页面的 caret 浏览）都无法与 inert 内容进行交互。这包括禁用的内容，其内容可能提供含义。

inert 属性是一个布尔属性，它的存在表示该元素及其所有包含阴影的后代元素都将被设置为 inert。

在 dialog 或 alertdialog 中包含 aria-modal="true"，可以移除在背景内容上设置 aria-hidden 的要求，因为 aria-modal 会告知辅助技术对话框外部的内容是 inert 的。请注意，虽然对 <dialog> 元素的支持良好，但彻底测试您的实现至关重要。

如果对话框不是模态的 — 没有 inert 的背景，焦点也没有限制在对话框内 — 请包含 aria-modal="false" 或完全省略该属性。

示例

html

<div id="backdrop" class="no-scroll">
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="dialog_label"
    aria-describedby="dialog_desc">
    <h2 id="dialog_label">Confirmation</h2>
    <div id="dialog_desc">
      <p>Are you sure you want to delete this file?</p>
    </div>
    <button id="close-btn" type="button">No. Close this popup.</button>
    <button id="confirm-btn" type="button">Yes. Delete the file.</button>
  </div>
</div>

document.getElementById("close-btn").addEventListener("click", () => {
  closeDialog();
});

document.getElementById("confirm-btn").addEventListener("click", (event) => {
  deleteFile();
});

这个部分示例包含一个嵌套在全屏、不可滚动背景中的 alertdialog。

role="alertdialog" 标识作为警报对话框容器的元素。aria-labelledby 通过引用提供警报对话框标题的元素，为警报对话框提供可访问名称。aria-describedby 属性通过引用描述警报对话框主要消息或目的的内容，为警报对话框提供可访问的描述。

aria-modal="true" 告知辅助技术用户，只要具有 role="alertdialog" 声明的元素获得焦点，对话框下方的内容就无法交互。

aria-modal 属性公开了模态元素的存在，以便将模态元素后面内容的禁用情况传达给 AT 用户。与所有 ARIA 属性一样，aria-modal 本身对页面的功能没有影响；焦点管理、禁用、背景元素的交互性以及从警报对话框中移除焦点的能力都必须通过 JavaScript 来管理。