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。