aria-modal

當內容的一部分為“模態”時，表示導航僅限於該區域本身，並且背景（模態的祖先和兄弟節點）隱藏。在 dialog 和 alertdialog 角色 容器上設定 aria-modal="true" 會向輔助技術使用者指示存在一個“模態”元素，但不會實際使元素成為模態。使元素實際成為模態的功能必須由開發人員實現。

僅與 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" 或完全省略該屬性。

<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 屬性的值。

用於角色

• window

繼承到角色

• alertdialog
• dialog

• HTML <dialog> 元素
• alertdialog 角色
• dialog 角色
• HTML inert 全域性屬性
• HTMLElement API inert 屬性