我們希望您針對建議的解決方案提供意見回饋，這個方案旨在解決版面配置方法會以與文件來源無關的順序排列項目的問題。
CSS 工作組正在研擬解決方案，以因應版面配置方法可依與來源無關的順序排列項目，因此與文件的閱讀和焦點順序無關的情況。本文將說明問題和建議的解決方案，歡迎提供意見回饋。
問題
HTML 文件的朗讀順序會依來源順序而定。也就是說，螢幕閱讀器會按照來源的版面配置讀取文件，使用鍵盤在文件中按 Tab 鍵移動時，也會按照來源順序。通常這很合理，而且文件來源順序合理，對於內容的閱讀模式呈現方式、螢幕閱讀器，以及任何 CSS 受限的裝置來說，都至關重要。不過，CSS (尤其是彈性方塊和格線) 可以建立版面配置，讓版面配置定義的視覺閱讀順序與基礎來源不同。
舉例來說，在彈性項目上使用 order 屬性會變更版面配置順序，但不會變更來源中的順序。
使用格線版面配置時，所選的版面配置方法可能會打亂索引標籤順序，例如使用 grid-auto-flow: dense 時，系統會隨機排列項目。
開發人員也可能以與來源中規定的順序不同的順序，將項目放置在格線中，導致中斷連線。
建議解決方案
CSS 工作群組正在為這個問題提出解決方案，並希望開發人員和無障礙社群能針對這個方法提供意見。
隨機版面配置：reading-order: auto
在建立隨機版面配置順序的情況下 (例如在格線版面配置中使用密集封裝時)，您可能希望瀏覽器遵循版面配置，而非來源順序。如要達成這個目標，彈性或格線項目必須具備 reading-order 屬性，且值為 auto。
下列 CSS 會導致讀取順序遵循因 grid-auto-flow: dense 而緊密排列的項目位置。
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
以下是採用非隨機版面配置的範例：reading-order-items
在某些格線和彈性版面配置中，版面配置順序很容易理解。舉例來說，在彈性版面配置中，如果使用 order 屬性重新排序項目，版面配置順序會明顯受到 order 屬性影響。在其他版面配置中，理想的版面配置順序較不明確，可能有多種選擇。因此，如果採用非隨機版面配置，您必須將 grid-order-items 屬性新增至容器，並使用關鍵字值說明版面配置順序的意圖。
以下範例顯示使用 row-reverse 的彈性版面配置。彈性項目具有 reading-order: auto，而彈性容器具有 reading-order-items: flex flow，表示我們也希望讀取順序遵循 flex-flow 方向，而非視覺順序 (我們可以使用 flex visual 表示)。
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
在下一個範例中，系統會使用 grid-template-areas 建立格狀版面配置，並以不同於來源順序的版面配置順序放置項目。reading-order-items 屬性用於指出我們應按照版面配置順序，在前往下一列之前遍歷每一列。(grid column 則表示相反方向)。
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
這是否表示來源順序不重要？
不會，來源順序仍很重要。只有在特定情況下，讀取順序可能與來源不同時，才應使用這項功能。舉例來說，使用可能導致中斷的版面配置方法 (例如密集格線封裝)，或在特定中斷點使用不同的版面配置順序。
使用這些屬性時，請建立來源文件，並使用在沒有 CSS 的情況下，網頁會以合理順序顯示的順序。請只在需要這些屬性的位置和中斷點新增屬性。
製作工具是否應套用這些屬性？
如果製作工具允許使用者透過拖曳元素建立格線版面配置，仍應鼓勵使用者建立合理的來源文件。因此在大多數情況下，根據版面配置順序重新排序來源會比較合適，而不是使用這些屬性來處理中斷問題。
請分享您對這項提案的意見
我們很想收集這方面的意見回饋。特別是如果您認為這種做法無法解決您的用途，或是對這種做法有任何無障礙疑慮，請告知 CSS 工作群組。
目前有討論串，其中包含許多用途和對此做法的想法。歡迎在該討論串中新增留言，並指出這項提案可能有的問題。請注意，目前的提案與我最初發起討論串的提案大不相同。感興趣的使用者可能會喜歡我們今天的對話，因為這是一個很好的例子，說明提案如何在 CSS 工作群組中經過討論，最終成為可在瀏覽器中實作的項目。
縮圖圖片由 Patrick Tomasso 提供。感謝 Chris Harrelson、Tab Atkins 和 Ian Kilpatrick 提供意見和審查。