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

Inert 屬性

Emma Twersky

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

瀏覽器支援

資料來源

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

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

「Inert」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 會封鎖焦點和點擊事件。對於輔助技術而言，這也會阻擋選取和可發現性。瀏覽器也可能會忽略元素中的頁面搜尋和文字選取功能。

inert 的預設值為 false。