專注

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

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

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

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

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

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

將內部元素設為互動模式

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

tabindex 屬性

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

tabindex 屬性的值為整數。如果設定負值,系統會將元素設為可聚焦,但無法透過 Tab 鍵移動。A 罩杯 0tabindex 值可讓元素成為可聚焦的及 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 屬性。

tabindex1 以上的元素會納入單獨的分頁序列中。如同 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 屬性不適用於一般可透過 tabindexcontenteditable 設為可聚焦的 inert 元素。 該標籤也適用於 <form> 元素本身。如要停用這項功能,請使用全域 inert 屬性。

inert 屬性

inert 全域布林值屬性加入元素後,該元素和所有巢狀內容都會停用, 可點擊或 Tab 鍵,並從無障礙功能樹狀結構中移除。雖然 inert 可以套用至任何元素,但通常 ,例如畫面外或隱藏的內容。

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

在不具有樣式的情況下,將 inert 用於不具有樣式,可能導致使用者體驗不佳。聲稱內容 如果使用螢幕閱讀器的螢幕閱讀器,在閱讀螢幕上看到內容時可能會感到困惑 有些是無障礙工具無法提供的透過 CSS 讓內心變得明顯。

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

隨堂測驗

隨堂測驗

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

如果無法聚焦的元素,下列敘述何者正確?

空白。
沒錯。

如果元素具有 disabled 屬性,則會發生什麼事?

如果是表單元素,則不會提交。
因此不會顯示。
因此無法聚焦。