文件的內容順序對網站可存取性至關重要。 螢幕閱讀器會依據文件順序朗讀內容，並使用您選取的 HTML 元素為該內容命名。使用者使用鍵盤瀏覽網站時，不會使用觸控螢幕或滑鼠，而是在文件周圍加上標籤。 這表示這些標記會依照在文件中的順序，從使用中的元素跳至使用中的元素，並在連結和表單欄位之間按順序分頁。
因此，首先應建立結構完善的文件，並使用所有正確的 HTML 元素，是建立無障礙網站的重要環節。不過，如果開始使用 CSS，其中部分工作可能會復原。接著來瞭解原因
來源與視覺化順序
網站導覽功能通常會標示為連結清單。再使用 Flexbox 將這些功能轉換成水平長條。在下方的 Glitch 範例中，我建立了這個常用的模式。點進範例，然後點選連結之間的 Tab 鍵。 焦點會依邏輯方向從左到右移動，也就是我們以英文閱讀的順序。
如果您已建立這種模式，系統會要求您將「Contact Us」(來源中的第二個) 移至最端。您可以使用在 Flexbox 中運作的 order 屬性。請試著使用 Tab 鍵瀏覽下例中的項目，該應用程式使用 order 屬性重新排列項目
焦點會跳到最終項目，然後再回到上一個項目。只要分頁順序將決定第二個項目。不過在視覺上，這是最後一個項目。
以上範例強調使用 CSS 重新排列及重新排序內容時，會發生的問題。 如果您要處理這個問題，最好是變更來源中的順序，而非使用 CSS。
哪些 CSS 屬性會導致重新排序？
任何可讓您移動元素的版面配置方法都可能造成這個問題。下列 CSS 屬性通常會導致內容重新排序問題：
- 使用
position: absolute並以視覺化方式將項目移出流程。 - Flexbox 和格線版面配置中的
order屬性。 - 在 Flexbox 中，
flex-direction的row-reverse和column-reverse值。 - 格狀版面配置中
grid-auto-flow的dense值。 - 使用行名稱或編號來定位任何位置，或是在格狀版面配置中使用
grid-template-areas定位。
在下一個例子中，我已使用 CSS 格線建立版面配置，並使用行號定位項目，而不會考慮項目在來源中的位置。
請試著對此範例使用 Tab 鍵，看看焦點會如何跳轉。 這可能會讓使用者覺得十分困惑，尤其是長篇網頁。
測試問題
簡單的測試做法是使用鍵盤瀏覽頁面。你能拿下所有東西嗎？ 有沒有什麼奇怪的跳躍動作？
如需將內容重新排序的視覺示範，請嘗試使用 Chrome 的無障礙功能深入分析擴充功能中的 Tab 鍵停止檢查工具。下圖顯示這項工具中的 CSS 格線範例。您會看到焦點在版面配置周圍的瀏覽方式。
內容重新排序和回應式網頁設計
如果只有一種內容呈現方式，請以有邏輯順序排列來源，在版面配置中反映此情況通常不會很難。考慮不同中斷點的版面配置時，會變得越來越困難。舉例來說，在較小的螢幕上，將元素移至版面配置底部可能很合理。
目前還沒有適合解決此問題的解決方案。在多數情況下，開發「行動裝置優先」 可協助您依順序排列來源和版面配置。 您為行動裝置選擇的優先順序，通常是內容固定的明確選項。 關鍵在於必須瞭解這類內容重新排序的可能性，並測試每個中斷點的結束體驗是否也不會太過雜亂。