Inert 屬性

Emma Twersky

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

叫用是對話方塊元素中的預設行為，例如使用 showModal 開啟對話方塊，讓使用者進行選擇，然後將其從畫面上關閉。 開啟 <dialog> 後，網頁的其餘部分就會宣告運作， 例如，您無法再點選連結 或按下 Tab 鍵前往連結

您可以使用 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 元素上，並留意特定元素造成互動中斷的情形。此做法也有助於避免螢幕閱讀器的讀者看到頁面疊加畫面，或在系統處理第一次提交的表單時不小心提交表單。

您可以使用 inert 確保使用者只能存取可探索的內容。這項功能可協助您：

• 封鎖強制回應對話方塊、焦點移動選單或側邊導覽列等元素。
• 包含非使用中項目的輪轉介面。
• 不適用的表單內容 (例如勾選 [與帳單地址相同] 核取方塊時，將「運送地址」欄位淡出並停用)。
• 在狀態不一致時停用整個 UI。

以視覺化方式指出 inert 元素

根據預設，沒有視覺指標表示已插入的子樹狀結構。建議您明確標示哪些部分的 DOM 使用中，哪些部分是無效。

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

部分使用者無法一次查看網頁的所有部分。舉例來說，螢幕閱讀器、小型裝置或使用放大鏡的使用者，甚至可能只使用小型視窗的使用者，都可能無法查看網頁中的活動部分，如果缺乏明顯的片段，可能會感到不悅。如果是個別控制項，已停用的屬性可能更為合適。

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

根據預設，inert 會封鎖焦點和點擊事件。對輔助技術而言，這也會封鎖分頁功能和可偵測性。此外，瀏覽器可能也會忽略網頁搜尋和元素中的所選文字。

inert 的預設值為 false。