aria-modal

aria-modal 属性指示元素在显示时是否为模态。

描述

当内容的一部分为“模态”时，表示导航仅限于该区域本身，并且背景（模态的祖先和兄弟节点）隐藏。在 dialog 和 alertdialog 角色 容器上设置 aria-modal="true" 会向辅助技术用户指示存在一个“模态”元素，但不会实际使元素成为模态。使元素实际成为模态的功能必须由开发人员实现。

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

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

模态对话框是指在显示内容时，用户交互仅限于该部分内容，直到其被解除。

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

当模态元素显示时，焦点应该放在模态元素上。当模态元素可见时，需要将焦点“捕获”在模态元素内，直到其被解除。然后，辅助技术 (AT) 就可以导航模态元素的内容，并理解模态元素内容的范围。aria-modal 属性帮助 AT 传达模态元素的边界，并将其与页面其余内容区分开来。当模态元素被解除时，焦点应该返回到触发模态元素的元素。

确保模态元素可以使用其子元素进行控制。如果模态对话框有一个关闭按钮，该按钮应该是在 DOM 中包含在模态容器内的子元素。

当模态元素显示时，作者**应该**将所有其他内容标记为惰性（例如 HTML 中的“惰性子树”。）禁用内容不是惰性内容。使用正常浏览模式和专用浏览模式（例如光标浏览）时，无法与惰性内容进行交互，专用浏览模式允许辅助技术用户详细探索页面。这包括禁用的内容，其内容可能会提供意义。

inert 属性是一个布尔属性，表示其存在意味着元素及其所有包含阴影的子节点将变为惰性。在 HTMLElement.inert 完全支持之前，可以使用 JavaScript 使内容变为惰性。

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

如果对话框不是模态的——没有惰性背景，焦点也没有限制在对话框内——则包含 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 type="button" onclick="closeDialog(this)">
      No. Close this popup.
    </button>
    <button type="button" onclick="deleteFile(this)">
      Yes. Delete the file.
    </button>
  </div>
</div>

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

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

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

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

值

false (默认)

元素不是模态。

true

元素是模态。

关联接口

Element.ariaModal

ariaModal 属性是 Element 接口的一部分，它反映了 aria-modal 属性的值。

ElementInternals.ariaModal

ariaModal 属性是 ElementInternals 接口的一部分，它反映了 aria-modal 属性的值。

关联角色

用于角色

继承到角色

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-modal

另请参见