專注

互動元素 (包括表單控制項、連結和按鈕) 的累計如下： 預設可聚焦和 TabbableTabbable 元素是文件依序焦點導覽順序的一部分。其他元素 而是不具互動性。使用 HTML 屬性時，您可以將互動式元素 讓內部元素具有互動性

根據預設，導覽焦點順序與視覺化順序相同，即原始碼順序。有 HTML 屬性以及可能改變內容視覺順序的 CSS 屬性。變更分頁 否則會導致使用者體驗不佳。

請勿利用 CSS 和 HTML 變更感知和實際的分頁順序。以下兩個範例可示範分頁順序 如果與圖像預期的順序不同，不但會造成使用者混淆，也會對使用者體驗造成負面影響。

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

在這個例子中，CSS 已經區分分頁順序和內容視覺順序：

flex-flow: row-reverse; 宣告已反轉視覺順序。 此外，CSS order 屬性套用至第六個字詞「This」，它看起來 1 個單字分頁式序列是程式碼的順序，不再與視覺順序相符，導致中斷連線 打造個人專屬應用程式

將內部元素設為互動模式

contenteditable 和 tabindex 屬性是全域屬性，可新增至任何元素，使其成為可聚焦的元素 在整個過程中。也可以使用 autofocus 將可聚焦的元素聚焦在滑鼠或指標上 屬性或指令碼 (例如使用 element.focus())。

tabindex 屬性

在tabindex 屬性，啟用原本無法接收焦點的元素 焦點，通常是 Tab 鍵，因此名稱。

tabindex 屬性的值為整數。如果設定負值，系統會將元素設為可聚焦，但無法透過 Tab 鍵移動。A 罩杯 0 的 tabindex 值可讓元素成為可聚焦的及 Tab 鍵，並為其新增套用至序列的元素 依原始碼順序排列焦點導覽順序。如果值 1 以上，元素就會變為可聚焦和分頁。 但加入到優先分頁序列，因此應該避免

在這個頁面上，分享按鈕 <share-action> 是自訂元素。tabindex="0" 會新增這個不正常的焦點 元素整合到鍵盤的預設分頁順序中：

<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 中的 Tabing 會按照個別序列 (由最低值到最高值的順序) 開始作業，再依序處理一般序列中的值。 (未設定 tabindex，或設定 tabindex="0")：

值為正的 tabindex 會將元素排入優先焦點序列，這可能會導致焦點順序混亂。 避免使用 tabindex 修改 DOM 順序。不只改變分頁訂單會造成不良使用者 難以管理及維護

contenteditable 屬性

先前討論過 contenteditable 屬性。在任何元素上設定 contenteditable="true" 即可供編輯。 可聚焦，也是分頁順序的一部分聚焦行為類似於設定 tabindex="0"，但不相同。巢狀 contenteditable 元素可聚焦，但無法透過 Tab 鍵顯示。如要將巢狀 contenteditable 元素設為可分頁，請加入 tabindex="0"。 以將其加入依序焦點導覽順序

著重互動元素

autofocus 屬性

雖然布林值 autofocus 是全域屬性 任何元素上都能設定的資源，並不會讓內嵌元素產生互動性。網頁載入時，第一個可聚焦的元素 如果具有 autofocus 屬性集，只要顯示該元素且非以巢狀方式在 <dialog> 中顯示，即可收到焦點。

自動聚焦在內容上，可能會令人困惑。在表單控制項上設定 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 值為負值，鍵盤使用者就無法聚焦於互動元素，但不會停用元素。Pointer 使用者也還是可以專注在元素上若要停用元素，請使用 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 讓內心變得明顯。

確認焦點絕不會移至未顯示的內容。不會自動在螢幕外轉譯的任何內容 應設為「間接」。如果內容設為隱藏， 但焦點聚焦時就會顯現，例如本頁的略過內容連結。 就不需要進行傳入的

隨堂測驗

隨堂測驗

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