文件的內容順序對網站可存取性至關重要。 螢幕閱讀器會依據文件順序朗讀內容,並使用您選取的 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 格線範例。您會看到焦點在版面配置周圍的瀏覽方式。
![無障礙深入分析工具的螢幕截圖,呈現混亂項目的順序。](https://web.dev/static/articles/content-reordering/image/a-screenshot-the-accessi-34fee3f713b8b.jpg?authuser=7&hl=zh-tw)
內容重新排序和回應式網頁設計
如果只有一種內容呈現方式,請以有邏輯順序排列來源,在版面配置中反映此情況通常不會很難。考慮不同中斷點的版面配置時,會變得越來越困難。舉例來說,在較小的螢幕上,將元素移至版面配置底部可能很合理。
目前還沒有適合解決此問題的解決方案。在多數情況下,開發「行動裝置優先」 可協助您依順序排列來源和版面配置。 您為行動裝置選擇的優先順序,通常是內容固定的明確選項。 關鍵在於必須瞭解這類內容重新排序的可能性,並測試每個中斷點的結束體驗是否也不會太過雜亂。