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

您的意見回饋提出一個建議的解決方案，以解決版面配置方法按順序與文件來源中斷連線的順序排列項目的問題。

Rachel Andrew

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

問題

HTML 文件的讀取順序會遵循來源順序。也就是說，螢幕閱讀器會依照來源的排版方式讀取文件，而使用鍵盤在文件中移動的使用者也會遵循該來源的順序。這通常是合理的做法，而且對於內容的閱讀模式呈現方式、螢幕閱讀器，以及任何 CSS 受限的裝置來說，文件的合理來源順序都至關重要。不過，CSS 以及 flexbox 和格線會特別可建立版面配置，並在版面配置中定義視覺閱讀順序，與基礎來源不同。

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

按一下範例和分頁標籤，瞭解如何使用 `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 追蹤非隨機版面配置

在某些格狀和 Flex 版面配置中，版面配置順序很容易理解。舉例來說，在使用 order 屬性重新排序項目的 Flex 版面配置中，有一個由 order 屬性決定的明顯版面配置順序。在其他版面配置中，理想的版面配置順序較不明顯，可能會有多個可能的選擇。因此，如果您要使用非隨機版面配置，就必須在容器中新增 grid-order-items 屬性，並使用關鍵字值說明您對版面配置順序的意圖。

以下範例顯示使用 row-reverse 的 Flex 版面配置。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 Working Group (CSS 工作小組) 提出提案的方法，可說是可在瀏覽器中實現的提案。

Patrick Tomasso 的縮圖圖片。感謝 Chris Harrelson、Tab Atkins 和 Ian Kilpatrick 提供意見和審查。