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

希望針對版面配置方法排列項目順序與文件來源中斷連線的配置解決方案，我們想提供您的寶貴意見。

Rachel Andrew

Twitter GitHub Mastodon 首頁

CSS 工作小組正在設法解決以下情況：版面配置方法可以按照與來源中斷連線的順序排列項目，導致文件讀取和焦點的順序。本文將說明問題及建議解決方案，歡迎您提供寶貴意見。

問題

HTML 文件的閱讀順序取決於來源順序。這表示螢幕閱讀器會依照來源中的文件來朗讀文件，而使用鍵盤在文件周圍按下 Tab 鍵的使用者也會遵循這個來源順序。一般而言，這很合理，因此文件合理的來源順序對於閱讀模式內容、螢幕閱讀器和 CSS 有限裝置而言至關重要。但 CSS 和 Flexbox 和格線特別適合用於建立版面配置，其中版面配置會定義與基礎來源不同的視覺閱讀順序。

例如，在彈性項目使用 order 屬性會改變版面配置順序，而非來源中的順序。

點進範例並使用分頁標籤，使用「order」屬性瞭解分頁順序與版面配置順序的關聯。

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

點進範例並使用分頁標籤，瞭解分頁順序與版面配置順序的中斷情形，這次是依照格線排列項目順序。

開發人員也可能以不同的順序將項目放上格狀空間，使其在來源中有所不同，因而造成連線中斷。

點進範例並使用分頁標籤，瞭解使用格線位置屬性，分頁順序與版面配置順序的中斷情形。

注意：進一步瞭解問題：

• Flexbox 與鍵盤瀏覽連線中斷
• HTML 來源訂單與 CSS 顯示順序的比較
• 影片：格狀檢視畫面、內容重新排序和無障礙設計

建議解決方案

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 遵循非隨機版面配置

在某些格線和 Flex 版面配置中，版面配置順序會簡單明瞭。舉例來說，在使用 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 的情況下轉譯頁面的順序。請只在需要這些屬性的位置和中斷點新增這些屬性。

注意：相較於操控 DOM，使用 CSS (例如這篇 Twitter 推文) 所述的做法十分適合使用 CSS 進行重新排序。有一個伴生問題和提案依據 DOM 標準提出，導致這類重新排序的流程也變得更加簡單。

編寫工具是否應該套用這些屬性？

如果這項工具能讓使用者透過拖曳元素建立格狀版面配置，系統仍然應鼓勵使用者製作可靠的來源文件。因此，在多數情況下，最好根據版面配置順序重新排序來源，而不要使用這些屬性做為延遲處理中斷連線的方式。

請分享你對這個提案的意見

我們十分樂意收集相關意見。具體而言，如果您認為自己的使用情境無法解決，或是對該做法有無障礙功能方面的問題，請告知 CSS 工作團隊。

這個執行緒具有持續性，其中包含許多用途和關於方法的想法。這個會話串非常適合用來新增註解，並醒目顯示這個提案中潛在的問題。請注意，目前的提案與最初開始討論串的提案大不相同。有興趣的使用者可能會喜歡和今日所連結的所有對話，因為這樣會展現出在 CSS 工作團隊中，提案就成為可導入在瀏覽器中的程式的好例子。

縮圖圖片來源：Patrick Tomasso。感謝 Chris Harrelson、Tab Atkins 和 Ian Kilpatrick 提出意見及審查。