このページは Cloud Translation API によって翻訳されました。

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` を使用した非ランダム化レイアウトのフォロー

グリッドレイアウトや Flex レイアウトでは、レイアウト順序を簡単に理解できます。たとえば、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 の皆様に感謝いたします。