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 可確保使用者只能存取可探索的內容。這有助於：
- 封鎖元素，例如強制回應對話方塊、聚焦重疊選單或側邊導覽列。
- 內含無效項目的輪轉介面。
- 不適用的表單內容 (例如，在勾選「與帳單地址相同」核取方塊時，將「運送地址」欄位淡出和停用)。
- 在狀態不一致時停用整個使用者介面。
以視覺化方式表示 inert 元素
根據預設，系統不會顯示插入的子樹狀結構。建議您清楚標示 DOM 的哪些部分為作用中以及哪些部分是靜態的。
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
部分使用者無法同時看到網頁中的所有部分。舉例來說，螢幕閱讀器、小型裝置或放大鏡的使用者，甚至是使用特別小視窗的使用者可能無法看到網頁中正在活躍的部分，而且如果插入的部分不明確，就會感到困惑。對於個別控制項，停用屬性可能更適合。
哪些互動和動作會遭到封鎖？
根據預設，inert 會封鎖焦點和點擊事件。如果是輔助技術，這會同時封鎖分頁功能和曝光度。瀏覽器也可能會忽略網頁搜尋功能和元素中的文字選取作業。
inert 的預設值為 false。