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

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

Rachel Andrew

CSS Working Group 正在研究解決方案，原本與來源中斷連線時，版面配置方法可以依照文件讀取和焦點的順序排列項目。本文將說明問題及建議的解決方案。歡迎您提供寶貴意見。

問題

HTML 文件的閱讀順序會依照來源的順序。也就是說，螢幕閱讀器會像原文一樣朗讀文件內容，而使用鍵盤在文件上加上標籤的使用者，也會遵循來源的順序。這通常很合理，因此如果要在閱讀模式呈現內容、使用螢幕閱讀器以及任何採用有限 CSS 的裝置時，請務必提供合理的文件來源順序。不過，CSS 以及 flexbox 和格線會特別可建立版面配置，並在版面配置中定義與基礎來源不同的視覺閱讀順序。

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

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

然而，開發人員也可以根據來源中規定的順序，將項目放在格狀檢視中的位置，進而造成這種連線中斷。

建議解決方案

CSS Working Group 目前已針對這個問題提出解決方案，希望開發人員和無障礙社群針對這個做法提出意見。

使用 reading-order: auto 追蹤隨機版面配置

在建立隨機版面配置順序的情況下 (例如在格狀版面配置中使用密集排列)，瀏覽器可能會採用版面配置，而非來源順序。為此，Flex 或格線項目需要具有值為 auto 的 reading-order 屬性。

下列 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 版面配置。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 提供意見回饋及審查。