文件中的內容順序對於網站的無障礙功能非常重要。螢幕閱讀器會根據文件順序朗讀內容，並使用 HTML 元素為內容提供額外意義。
使用者透過鍵盤 (而非觸控螢幕或滑鼠) 瀏覽網站，並在文件中切換分頁。這些元素會從有效元素跳至有效元素，並在連結和表單欄位之間切換，順序與元素在文件中的位置相同。
因此，從結構良好的文件開始，並使用正確的 HTML 元素，是建立無障礙網站的關鍵。不過，開始使用 CSS 時，可能會抵銷部分成果。
來源順序與視覺順序
網站導覽通常會標記為連結清單。您可以使用 Flexbox 將這些項目變成水平列。在下列範例中，我建立了這個常用的模式。按一下範例，然後在連結之間切換分頁。焦點會以邏輯方向從左到右移動，也就是英文的閱讀順序。
假設您已建立這個導覽模式，但後來被要求將來源中的第二個項目「聯絡我們」移至結尾。你可以使用 Flexbox order 屬性移動位置。
請試著在下一個範例中，使用 Tab 鍵瀏覽項目，該範例使用 order 屬性重新排列項目。
焦點會跳至最後一個項目，然後再跳回來。就索引標籤順序而言，該項目是第二個項目。但從視覺上來看，這是最後一個項目。
這個範例突顯了使用 CSS 重新排列和排序內容時，我們面臨的問題。解決這個問題的正確做法是變更來源中的連結順序，而不是使用 CSS 模擬這項變更。
哪些 CSS 屬性會導致重新排序？
任何可移動元素的版面配置方法都可能導致這個問題。 下列 CSS 屬性通常會導致內容重新排序問題：
- 使用
position: absolute，並以視覺方式將項目從流程中取出。 - Flexbox 和 Grid 版面配置中的
order屬性。 - Flexbox 中
flex-direction的row-reverse和column-reverse值。 - 格狀版面配置中的
grid-auto-flowdense值。 - 以行名稱或編號定位，或在格線版面配置中使用
grid-template-areas。
在下一個範例中，我使用 CSS 格線建立版面配置，並使用行號放置項目，而未考慮項目在來源中的位置。
請試著在這個範例中按 Tab 鍵，看看焦點如何跳動。 這會造成非常混亂的體驗，尤其是當頁面很長時。
測試問題
快速測試方法是使用鍵盤瀏覽網頁。你能存取所有內容嗎？這樣做時，是否有任何奇怪的跳動？
如要查看內容重新排序的視覺化示範，請試用 Chrome 擴充功能「無障礙洞察」中的 Tab Stop 檢查工具。螢幕截圖：顯示該工具中的 CSS 格線範例。您可以看到焦點必須在版面配置中跳動。
內容重新排序和回應式網頁設計
如果內容只有一個呈現方式，您應該可以維持反映版面配置的邏輯排序來源。考慮不同中斷點的版面配置時，這項作業可能會更加困難。舉例來說，在小螢幕上，將元素移至版面配置底部可能較為合適。
目前還沒有解決該特定問題的合適解決方案。在大多數情況下，優先開發行動版網站有助於維持來源和版面配置的順序。行動裝置適用的優先順序，通常也適用於整體內容。重點在於瞭解內容可能重新排序的時間。測試時請確保每個中斷點的最終體驗不會太過突兀。