專注

根據預設，互動式元素 (包括表單控制項、連結和按鈕) 可聚焦並可使用 Tab 鍵瀏覽。可使用 Tab 鍵瀏覽的元素屬於文件的循序焦點導覽順序。其他元素則為惰性，也就是無法互動。使用 HTML 屬性，可以讓互動式元素處於閒置狀態，也可以讓閒置元素具有互動性。

根據預設，導覽焦點順序與視覺順序相同，也就是原始碼順序。HTML 屬性可以變更這個順序，CSS 屬性則可以變更內容的視覺順序。使用 HTML 變更分頁順序，或使用 CSS 變更視覺算繪順序，都可能導致使用者體驗不佳。

請勿使用 CSS 和 HTML 改變實際和預期的 Tab 鍵順序。如下列兩個範例所示，如果索引標籤順序與視覺上預期的順序不同，使用者會感到困惑，使用者體驗也會變差。

在本例中，tabindex 屬性的值會導致分頁順序混亂：

在這個範例中，CSS 造成分頁順序與內容的視覺順序不一致：

flex-flow: row-reverse; 聲明已反轉視覺順序。 此外，CSS order 屬性已套用至第六個字「This」，因此該字在視覺上會移動。分頁順序是程式碼的順序，不再與視覺順序相符，導致鍵盤使用者無法順利操作。

讓惰性元素可互動

contenteditable 和 tabindex 屬性是全域屬性，可新增至任何元素，讓元素在過程中可聚焦。可聚焦元素也可以透過滑鼠或指標聚焦，方法是設定 autofocus 屬性，或是使用指令碼 (例如 element.focus())。

tabindex 屬性

屬性中導入的全域 tabindex 屬性可讓原本無法接收焦點的元素取得焦點 (通常是透過 Tab 鍵)，因此得名。

tabindex 屬性的值為整數。負值會讓元素可聚焦，但無法使用 Tab 鍵選取。tabindex 值為 0 時，元素會變成可聚焦和可使用 Tab 鍵瀏覽的元素，並將套用該值的元素新增至來源程式碼順序的循序焦點導覽順序。值為 1 以上時，元素會變成可聚焦和可使用 Tab 鍵瀏覽，但會加入優先順序較高的 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())，但不是循序焦點導覽順序的一部分。對於可聚焦但無法使用 Tab 鍵瀏覽的元素，慣例是使用 tabindex="-1"。如果將 tabindex="-1" 新增至互動式元素，該元素就不再可透過 Tab 鍵選取。

element.focus() 方法可用於將焦點設為可聚焦的元素。瀏覽器會將焦點元素捲動至可視範圍。因此，請避免使用 element.focus({preventScroll:true})，因為將焦點放在不可見的元素上會造成不良的使用者體驗。

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

tabindex 大於或等於 1 的元素會納入獨立的 Tab 鍵順序。如您在 Codepen 中所見，分頁會先從最低值到最高值依序開始，然後再依來源順序，瀏覽一般序列中的分頁 (未設定 tabindex 或 tabindex="0")：

如果 tabindex 具有正值，元素就會進入優先順序較高的焦點序列，這可能會導致焦點順序混亂。 請勿使用 tabindex 修改 DOM 順序。變更索引標籤順序不僅會造成使用者體驗不佳，開發人員也很難管理及維護。

contenteditable 屬性

先前已討論過 contenteditable 屬性。在任何元素上設定 contenteditable="true"，即可編輯、聚焦該元素，並將其納入 Tab 鍵順序。焦點行為與設定 tabindex="0" 類似，但不完全相同。巢狀 contenteditable 元素可聚焦，但無法使用 Tab 鍵選取。如要讓巢狀 contenteditable 元素可透過 Tab 鍵選取，請加入 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 屬性新增至容器，都會導致元素無法使用 Tab 鍵選取。這三項屬性「無法」互換。

負 tabindex 值

如果 tabindex 屬性的值為負數，元素就會變成可聚焦，但無法透過 Tab 鍵選取。為預設可聚焦的元素 (包括連結、按鈕、表單控制項和 contenteditable 元素) 新增 tabindex="0" 並非必要；但如果加入負值的 tabindex，通常可從循序焦點導覽順序中移除可使用 Tab 鍵選取的元素。

負值的 tabindex 值會禁止鍵盤使用者將焦點放在互動式元素上，但不會停用該元素。指標使用者仍可將焦點放在元素上。如要停用元素，請使用 disabled 屬性。

已停用

布林值 disabled 屬性會讓套用該屬性的表單控制項及其後代 (如有) 無法成為焦點。已停用的表單控制項無法成為焦點、不會收到點擊事件，且不會在提交表單時一併提交。

「disabled」不是全域屬性。適用於 <button>、<input>、<optgroup>、<option>、<select>、<textarea>、表單相關聯的自訂元素和 <fieldset>。如果設為 <optgroup> 或 <fieldset>，除了 <fieldset> 第一個 <legend> 的內容外，所有子表單控制項都會停用。

支援 disabled 的元素也適用於 :disabled 和 :enabled 虛擬類別。使用 disabled 屬性停用的元素通常會以淺灰色顯示，並套用使用者代理程式樣式表，即使已設定 accent-color 也是如此。

由於這是布林屬性，因此只要有這個屬性，系統就會停用原本已啟用的元素，您無法將其設為 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 讓惰性狀態非常明顯。

請確保焦點不會移至非可見內容。如果焦點移到螢幕外，但螢幕外算繪的內容不會自動顯示，就應設為非互動式。如果內容隱藏，但聚焦時會顯示 (例如「跳到內容」連結)，則不需要設為非作用中。

隨堂測驗

測試你對焦點的瞭解程度。