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 來管理。