DOM 順序很重要
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
預設 DOM 順序的重要性
使用原生元素是瞭解焦點行為的好方法
因為系統會根據
在 DOM 中的位置
舉例來說,您可能有三個按鈕元素,一個是一個接一個的按鈕元素
。按下 Tab
即可將焦點移至每個按鈕。請嘗試點選程式碼區塊
下方即可移動焦點導覽起點,然後按 Tab
即可移動焦點
也很容易
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
不過請注意,使用 CSS 可能會有
都出現在 DOM 中的一個順序,但在畫面上呈現的順序不同。適用對象
舉例來說,如果您使用 float
之類的 CSS 屬性將一個按鈕向右移動,
按鈕在畫面上的顯示順序不同。但因為他們在
DOM 維持不變,因此分頁的順序會有所不同。當使用者分頁
頁面時,這些按鈕的焦點會依非直覺的順序。請嘗試點選
下方的程式碼區塊可移動焦點導覽起點,然後按下 Tab
鍵
將焦點移到按鈕上
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
使用 CSS 變更畫面中元素的視覺位置時,請務必小心。
這會導致分頁順序不斷移動,看似隨機,令人混淆
也就是仰賴鍵盤的使用者因此,Web AIM 檢查清單中的狀態
第 1.3.2 節
根據程式碼順序決定的讀數和導覽順序,應該應該是
有條理且符合直覺
原則上,我們建議您盡量不頻繁地切換網頁,確保
以免不小心打錯分頁順序是個好習慣,
執行起來不費力
畫面外內容
如果您所擁有的內容目前尚未顯示,但仍需要
,例如回應式側邊導覽?如果有這類元素
讓焦點在離開螢幕時,聽起來就像是
在使用者分頁頁面中消失時消失
非預期效果理想情況下
且只能在使用者可與使用者互動時聚焦
。
有時您必須多做點偵測作業,才能找出
消失您可以使用控制台中的 document.activeElement
找出
元素。
瞭解焦點所在的畫面外元素後,您可以將該元素設定為
display: none
或 visibility: hidden
,然後再次設為 display:
block
或 visibility: visible
,然後再向使用者顯示。
一般而言,我們建議開發人員在各個網站
您將看到分頁順序沒有消失或跳離邏輯
序列如果是,請務必透過適當位置
含有 display: none
或 visibility: hidden
的螢幕外內容,或
重新排列元素這些實體在 DOM 中的位置,讓這些物件出現在
順序。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2016-10-04 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2016-10-04 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2016-10-04 (世界標準時間)。"],[],[]]