專注

根據預設，互動元素 (包括表單控制項、連結和按鈕) 會預設為可聚焦且可分頁。可分頁元素是指文件的焦點瀏覽順序中的一部分。其他元素互為宣告性質，因此不互動。透過 HTML 屬性，您可以將互動元素插入，並使插入元素成為互動元素。

根據預設，導覽焦點的順序與視覺順序相同，也就是原始碼的順序。有些 HTML 屬性可以調整這個順序和 CSS 屬性，進而變更內容的視覺順序。使用 CSS 變更 HTML 或視覺呈現順序，可能會對使用者體驗造成負面影響。

不要透過 CSS 和 HTML 變更系統感知和實際的分頁順序。如以下兩個範例所示，如果分頁訂單與外觀預期順序不同，就會造成使用者混淆，並造成使用者體驗不佳。

在這個範例中，tabindex 屬性的值使分頁順序混亂：

在本例中，CSS 比較了定位式順序與內容的視覺順序：

flex-flow: row-reverse; 宣告已反轉視覺順序。 此外，CSS order 屬性已套用至第六個字「這個」，在視覺上移動該字詞。Tabbing 序列是程式碼的順序，與視覺順序已不符，鍵盤使用者會因此中斷連結。

將插入元素設為互動式

您可以為任何元素新增 contenteditable 和 tabindex 屬性 (此為全域屬性)，使其可在過程中聚焦。您可以設定 autofocus 屬性或指令碼 (例如使用 element.focus())，藉此聚焦於滑鼠或指標的可聚焦元素。

tabindex 屬性

全域 tabindex 屬性 (在「屬性」中引入) 可讓原本無法接收聚焦的元素 (通常是搭配 Tab 鍵使用)，因此具有名稱。

tabindex 屬性的值是整數。負值會導致元素成為可聚焦，但無法設為 Tab 鍵。0 的 tabindex 值可讓元素成為可聚焦元素並成為可聚焦元素，並依照原始碼順序，為依序聚焦於導覽的導覽順序加入元素。值 1 以上時，元素可聚焦且成為可聚焦元素，但是將其新增至優先的 Tab 鍵序列，因此如上述所示，請避免使用。

本頁面中的分享按鈕 <share-action> 是自訂元素。tabindex="0" 會將以下通常無法聚焦的元素新增至鍵盤預設的 Tab 鍵順序：

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

此頁面上還有另一個自訂元素：「本機導覽」具有值為負值 tabindex 的自訂元素：

<web-navigation-drawer type="standard" tabindex="-1">

值為負值的 tabindex 屬性會使元素成為可聚焦，但無法設為 Tab 鍵。該元素可接收聚焦，例如透過 HTMLElement.focus()，但不屬於依序聚焦導覽順序的一部分。不可分頁的可聚焦元素慣例是使用 tabindex="-1"。請注意，如果在互動元素中加入 tabindex="-1"，該互動元素就無法再使用分頁模式。

element.focus() 方法可用於將焦點設為可聚焦的元素。請注意，瀏覽器會將焦點所在的元素捲動至檢視畫面中。因此，請避免使用 element.focus({preventScroll:true})，因為將焦點放在未顯示的元素，會導致使用者體驗不佳。

如要查詢文件找出焦點目前所在的元素，請使用唯讀 Document.activeElement 屬性。

tabindex 為 1 以上的元素會納入單獨的分頁序列。如 Codepen 中所示，定位作業會先從最低值到最高值開始，然後依照來源順序 (未設定 tabindex 或 tabindex="0") 的順序開始執行：

值為正值的 tabindex 會將元素排入優先的焦點序列，進而造成聚焦順序混亂。避免使用 tabindex 修改 DOM 順序。修改分頁順序不僅會造成使用者體驗不佳，開發人員也很難管理及維護。

contenteditable 屬性

contenteditable 屬性如前文所述。在任何元素上設定 contenteditable="true"，即可讓該元素成為可編輯、可聚焦，且屬於分頁順序的一部分。焦點行為與設定 tabindex="0" 類似，但不同。巢狀 contenteditable 元素可聚焦，但無法用 Tab 鍵。如要讓巢狀 contenteditable 元素成為 Tabbable，請新增 tabindex="0"，將其新增至依序聚焦導覽順序。

聚焦於互動元素

autofocus 屬性

雖然布林 autofocus 是可以針對任何元素設定的全域屬性，但並不會讓插入元素更具互動性。頁面載入時，只要顯示該元素且未以巢狀結構嵌入 <dialog> 中，含有 autofocus 屬性組合的第一個可聚焦元素就會成為焦點。

自動為內容設定焦點可能會讓使用者感到困惑。在表單控制項上設定 autofocus，表示表單控制項會在網頁載入時捲動查看。所有使用者 (包括螢幕閱讀器使用者和位於可視區域較小的使用者) 不一定能「看到」表單操作說明，甚至可能捲動過表單控制項一般可見的標籤。autofocus 屬性不會變更文件的焦點導覽順序。系統會略過序列中位於自動聚焦元素之前的元素。基於上述原因，我們不建議在屬性中加入 autofocus 屬性。

「請勿使用 autofocus」建議的情況包括在 <dialog> 元素中納入 autofocus 屬性。開啟對話方塊時，瀏覽器會自動聚焦於 <dialog> 中第一個可聚焦的互動元素，也就是不需要為元素 autofocus。如要確保對話方塊中的特定互動元素在對話方塊開啟時接收焦點，請將 autofocus 屬性新增至該元素。

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

在關閉 <button> 上設定 autofocus 屬性可確保對話方塊開啟時會收到焦點。對話方塊中的第一個元素是對話方塊中的第一個元素，在任何情況下都會收到焦點。根據預設，開啟對話方塊時，除非對話方塊中的其他元素設定 autofocus 屬性，否則對話方塊中的第一個可聚焦元素會成為焦點。

宣告互動元素

另有 HTML 屬性可從定位點序列中移除互動式元素。加入排除的 tabindex 至可聚焦的元素、將 disabled 屬性新增至支援表單控制項，並將全域 inert 屬性新增至容器，都會讓元素無法分頁。這三項屬性「不得」互換，

tabindex 負值

如先前所述，如果 tabindex 屬性含有負值，就會讓元素成為可聚焦，但無法設為 Tab 鍵。雖然將 tabindex="0" 新增至可聚焦的預設元素 (包括連結、按鈕、表單控制項和屬於 contenteditable 的元素) 並非必要；加入具有負值的 tabindex 則會從依序聚焦瀏覽順序中移除一般可聚焦的元素。

負值的 tabindex 值會防止鍵盤使用者專注於互動元素，但不會停用該元素。指標使用者仍可聚焦在元素上。如要停用元素，請使用 disabled 屬性。

已停用

如果布林值 disabled 屬性，其表單控制項及其子系 (如有) 無法聚焦即可控制。已停用的表單控制項無法聚焦、無法取得點擊事件，也無法在提交表單時提交。請注意，disabled 不是全域屬性。此政策適用於 <button>、<input>、<optgroup>、<option>、<select>、<textarea>、表單相關自訂元素以及 <fieldset>。在 <optgroup> 或 <fieldset> 上設定時，系統會停用所有子項表單控制項，但 <fieldset> 前 <legend> 的內容除外。

您也可以使用 :disabled 和 :enabled 虛擬類別來指定支援 disabled 的相同元素。即使已設定 accent-color，透過 disabled 屬性停用的元素，通常還是會透過使用者代理程式樣式表設定為淺灰色。

如果為布林值屬性，提供該屬性會停用其他已啟用的元素，但無法設為 false。如要重新啟用已停用的元素，您必須透過 Element.removeAttribute('disabled') 移除該屬性。

HTMLInputElement.disabled 屬性可讓您檢查輸入功能是否已停用。disabled 不是全域屬性，因此不會繼承 HTMLElement 元素，但每個支援元素介面 (例如 HTMLSelectElement、HTMLTextareaElement) 都有相同的唯讀屬性。

disabled 屬性不適用於通常可透過 tabindex 或 contenteditable 可聚焦的 inert 元素。也不會套用至 <form> 元素本身。如要停用這些功能，可以使用全域 inert 屬性。

inert 屬性

為元素新增 inert 全域布林屬性時，該元素和所有巢狀內容都會停用 (無論是可供點選或 Tab 鍵)，並從無障礙樹狀結構中移除。雖然 inert 可套用至任何元素，但通常用於內容區段，例如畫面外或隱藏的內容。

將 disabled 套用至表單控制項時，瀏覽器會提供預設樣式，並可使用 :disabled 虛擬類別設定樣式。inert 屬性不提供視覺指標，且沒有相符的虛擬類別 (但 [inert] 屬性選取器相符)。

針對可見內容使用 inert，但不含樣式表示插入結果的樣式，可能會導致使用者體驗不佳。由於螢幕閱讀器使用者無法存取無障礙功能，因此視障的螢幕閱讀器使用者在畫面上看到無障礙工具所沒有的內容時，可能會感到困惑。透過 CSS 明確表示斷層。

確認焦點一律未移至隱藏的內容。凡是在聚焦時不會自動進入畫面的螢幕外算繪內容，都應設為「斷言」。如果內容已隱藏，但會在聚焦時顯示 (例如本頁的跳至內容連結) 時，就不需要宣告內容。

隨堂測驗

隨堂測驗

測驗您的學習重點。