Inert 屬性

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

瀏覽器支援

  • Chrome:102。
  • Edge:102。
  • Firefox:112。
  • Safari:15.5。

資料來源

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

您可以使用 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;
}

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

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

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

inert 的預設值為 false