互動元素 (包括表單控制項、連結和按鈕) 的累計如下: 預設可聚焦和 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 讓內心變得明顯。
確認焦點絕不會移至未顯示的內容。不會自動在螢幕外轉譯的任何內容 應設為「間接」。如果內容設為隱藏, 但焦點聚焦時就會顯現,例如本頁的略過內容連結。 就不需要進行傳入的
隨堂測驗
隨堂測驗
測試你對焦點的瞭解程度。
如果無法聚焦的元素,下列敘述何者正確?
如果元素具有 disabled
屬性,則會發生什麼事?