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

ドキュメントのソースから切り離された順序でアイテムを配置するレイアウト方法の問題に対する提案されたソリューションについて、フィードバックを募集しています。

Rachel Andrew

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

問題

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

たとえば、フレックス アイテムで order プロパティを使用すると、レイアウトの順序は変更されますが、ソースの順序は変更されません。

この例をクリックし、Tab キーを押して、`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 に感謝します。