解決 CSS 版面配置和來源順序的連結

我們提出了一項解決方案，解決版面配置方法排列項目的順序與文件來源不一致的問題，希望您能提供意見。

Rachel Andrew

CSS 工作組正在研擬解決方案，以因應版面配置方法可依與來源無關的順序排列項目，因此與文件的讀取和焦點順序無關的情況。本文將說明問題和建議的解決方案，歡迎提供意見回饋。

問題

HTML 文件的朗讀順序會依據來源順序。也就是說，螢幕閱讀器會按照來源的版面配置讀取文件，使用鍵盤在文件中切換的人也會按照來源順序操作。通常這很合理，而且文件的合理來源順序對於內容的閱讀模式呈現、螢幕閱讀器和任何 CSS 受限的裝置來說至關重要。不過，CSS (尤其是彈性方塊和格線) 可以建立版面配置，讓版面配置定義的視覺閱讀順序與基礎來源不同。

舉例來說，在 Flex 項目上使用 order 屬性會變更版面配置順序，但不會變更來源中的順序。

按一下範例並切換分頁，即可查看分頁順序如何使用 `order` 屬性與版面配置順序中斷連線。

使用格狀版面配置時，所選的版面配置方法可能會打亂分頁順序，例如使用 grid-auto-flow: dense 時，會建立隨機的項目版面配置順序。

點選範例並切換分頁，即可查看分頁順序與版面配置順序的關聯性，這次是透過格線排列項目，但順序不正確。

如果開發人員在格線中放置項目的順序與來源中指定的順序不同，也可能導致這種不一致的情況。

點選範例並切換分頁，瞭解如何使用格線位置屬性，將分頁順序與版面配置順序分開。

解決方案提案

CSS 工作群組正在為這個問題提出解決方案，並希望開發人員和無障礙社群能針對這個方法提供意見。

隨機版面配置：reading-order: auto

在建立隨機版面配置順序的情況下 (例如在格線版面配置中使用密集封裝時)，您可能希望瀏覽器遵循版面配置，而非來源順序。如要發生這種情況，Flex 或格線項目必須具有 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 的彈性版面配置。Flex 項目有 reading-order: auto，Flex 容器則有 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 提供意見並審查。