本頁面由 Cloud Translation API 翻譯而成。

Inert 屬性

Emma Twersky

inert 屬性是全域 HTML 屬性，可簡化移除及還原元素使用者輸入事件的方式，包括焦點事件和輔助技術事件。

瀏覽器支援

資料來源

惰性是對話方塊元素的預設行為，例如當您使用 showModal 開啟對話方塊，讓使用者選取項目，然後從畫面上關閉對話方塊時。開啟 <dialog> 後，頁面上的其他部分會變得無效，例如您無法再點選或切換至連結。

您可以使用 inert 屬性，在其他元素上實現相同的行為。

Inert 意指缺乏移動功能，因此當您標示反向操作時，會從這些 DOM 元素移除動作或互動。

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

這裡的 inert 已在包含 button2 的第二個 <div> 元素上宣告，因此這個 <div> 中包含的所有內容 (包括按鈕和標籤) 都無法接收焦點或點選。

inert 屬性特別適合用於無障礙功能，尤其是用於避免焦點陷阱。

改善無障礙功能

無障礙網頁規範要求使用者焦點管理功能，並提供合理且可用的焦點順序。這包括可發現性和互動性。先前可以使用 aria-hidden="true" 抑制可探索性，但互動性較難抑制。

inert 可讓開發人員從分頁順序和無障礙樹狀結構中移除元素。這樣一來，您就能控制可發現性和互動性，並建立更實用且更易於存取的模式。

將 inert 套用至元素，以提升無障礙功能有兩個主要用途：

元素是 DOM 樹狀結構的一部分，但在畫面外或已隱藏。
元素是 DOM 樹狀結構的一部分，但應為非互動元素。

畫面外或隱藏的 DOM 元素

一個常見的無障礙問題是，在使用者不一定能看到的 DOM 中，新增抽屜等元素。使用 inert 可確保在抽屜子元素離開螢幕時，鍵盤使用者不會意外與其互動。

非互動式 DOM 元素

另一個常見的無障礙問題是，當 UI 設計可見或部分可見，但明顯無法互動時。例如載入網頁、提交表單或開啟對話方塊重疊圖層時。

為了讓使用者享有最佳體驗，請指出 UI 的狀態，並將焦點「困住」在網頁互動部分。

焦點陷阱

焦點陷阱是良好 UI 無障礙設計的核心概念。您應確保螢幕閱讀器的焦點位於互動式 UI 元素上，並留意特定元素造成互動中斷的情形。這也能避免不當的螢幕閱讀器進入頁面重疊層後方，或是在第一次提交表單仍在處理時，不小心提交表單。

使用 inert 可確保只有可探索的內容可供存取。這麼做有助於：

阻擋元素，例如模式對話方塊、焦點陷阱選單或側邊導覽。
輪轉介面，其中包含非活動項目。
不適用的表單內容 (例如在勾選「與帳單地址相同」核取方塊時，淡出並停用「運送地址」欄位)。
在狀態不一致時停用整個 UI。

以視覺化方式指出 `inert` 元素

根據預設，子樹無任何視覺指標表示為無效。建議您明確標示哪些部分的 DOM 使用中，哪些部分仍然有效。

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

並非所有使用者都能一次看到網頁的所有部分。舉例來說，螢幕閱讀器、小型裝置或放大鏡的使用者，甚至是使用特別小型視窗的使用者，可能無法看到網頁的活動部分，如果靜態區塊並非明顯靜態，可能會讓使用者感到挫折。對於個別控制項，disabled 屬性可能更適合。

哪些互動和動作會遭到封鎖？

根據預設，inert 會封鎖焦點和點擊事件。對於輔助技術而言，這也意味著無法使用 Tab 鍵，且無法在螢幕上顯示。瀏覽器也可能會忽略元素中的頁面搜尋和文字選取功能。

inert 的預設值為 false。