CSS レイアウトとソース順序の切り離しを解決する

ドキュメントのソースとは無関係の順序でアイテムを配置するレイアウトメソッドの問題に対する提案ソリューションについて、フィードバックをお寄せください。

Rachel Andrew

CSS Working Group は、レイアウトメソッドでアイテムをソースから切り離された順序で配置できる状況、つまりドキュメントの読み取り順序やフォーカス順序から切り離された順序で配置できる状況に対する解決策に取り組んでいます。この記事では、問題と提案された解決策について説明します。ぜひフィードバックをお寄せください。

問題

HTML ドキュメントの読み取り順序は、ソースの順序に従います。つまり、スクリーンリーダーはソースでレイアウトされたとおりにドキュメントを読み上げ、キーボードを使用してドキュメント内を移動するユーザーもソースの順序に従って移動します。通常、これは理にかなっており、ドキュメントの適切なソース順序は、コンテンツのリーディングモードでの表示、スクリーンリーダー、CSS が制限されているデバイスにとって不可欠です。ただし、CSS、特に flexbox と grid では、レイアウトが基盤となるソースとは異なる視覚的な読み取り順序を定義するレイアウトを作成できます。

たとえば、フレックスアイテムで 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` を使用して非ランダム化レイアウトをフォローする

一部のグリッドレイアウトとフレックスレイアウトでは、レイアウトの順序は簡単に理解できます。たとえば、order プロパティを使用してアイテムの順序を変更するフレックスレイアウトでは、order プロパティによってレイアウトの順序が明確に決まります。他のレイアウトでは、理想的なレイアウト順序が明確でない場合があり、複数の選択肢がある可能性があります。そのため、ランダム化されていないレイアウトを使用する場合は、コンテナに grid-order-items プロパティを追加し、レイアウト順序の意図を説明するキーワード値を指定する必要があります。

次の例は、row-reverse を使用したフレックスレイアウトを示しています。Flex アイテムには reading-order: auto、Flex コンテナには reading-order-items: flex flow が指定されています。これは、視覚的な順序（flex visual で指定可能）ではなく、flex-flow の方向にも読み取り順序を合わせることを示しています。

.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 に感謝いたします。

CSS レイアウトとソース順序の切り離しを解決する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

問題