グリッドレイアウトとアクセシビリティ

CSS グリッドレイアウトにおける並べ替え

これらのガイドでは、CSS グリッドレイアウトを使用すると、グリッドテンプレート領域の線ベースの配置を使用してアイテムの位置を指定し、ページコンテンツの順序を変更できることをすでに説明しました。この配置は、ソース内のアイテムの位置を考慮することなく行うことができます。また、アイテムの自動配置を変更できる order プロパティもあります。grid-auto-flow プロパティには dense 値があり、DOM の順序からアイテムを視覚的に取り出すことができます。

CSS グリッドレイアウトの仕様書には、並べ替えとアクセシビリティの章が含まれています。この章の冒頭では、グリッドレイアウトを使用してコンテンツが視覚的に並べ替えられた場合に、ブラウザーがどのように動作すべきかについて詳しく説明しています。

グリッドレイアウトは、文書において並べ替えを行うための大きな力になります。しかし、これらは文書のソースの正しい順序付けの代用にはなりません。 order プロパティとグリッドの配置は、視覚的でないメディア（音声など）の順序には影響しません。同様に、グリッドアイテムを視覚的に再配置しても、直線的なナビゲーションモード（リンクの循環など、 HTML5 の tabindex などを参照）の既定の巡回順序には影響しません。

グリッドレイアウトを使用して視覚的に順序を変更しても、スクリーンリーダーなどの音声読み上げソフトでコンテンツを読み上げている場合は、項目の順序は変わりません。また、並べ替えてもタブの順番は変わりません。つまり、キーボードを使用して移動しているユーザーは、サイト内のリンクをタブで移動している最中に、タブの順序が変更されたアイテムが次に表示されるため、突然、文書の上部から下部へジャンプしてしまう可能性があるということです。

仕様書では、作者（CSSWG の用語でウェブ開発者のこと）に対して、このような並び替えを行わないように警告しています。

作者は、 order と grid-placement プロパティを、コンテンツの論理的な並び替えではなく、視覚的な並び替えにのみ使用しなければなりません。これらの機能を使って論理的な並び替えを行うスタイルシートは不適合です。

実際にグリッドレイアウトを使ってデザインする場合、どのような意味があるのでしょうか。

視覚的な、しかし論理的ではない並べ替え

グリッドレイアウトやフレックスボックスで並び替えを行っても、それは「視覚的な並び替え」に過ぎません。根本的なソースは、音声合成や文書のタブ順などを制御するものです。これがどのように機能するか、例で説明します。

この例では、5 つのアイテムを保有するグリッドがあり、それぞれのアイテムはリンクを含んでいます。アイテムは、線ベースの配置プロパティを使用して配置されています。ボックス 1 は、グリッドの 2 行目に配置されているため、リストでは 4 番目のアイテムとして表示されます。タブキーを使用してリンクをナビゲートしても、ソースではボックス 1 が最初にあるため、タブの順序はボックス 1 から始まります。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1;
  grid-row: 2;
}

<div class="wrapper">
  <div class="box box1"><a href="">One</a></div>
  <div class="box box2"><a href="">Two</a></div>
  <div class="box box3"><a href="">Three</a></div>
  <div class="box box4"><a href="">Four</a></div>
  <div class="box box5"><a href="">Five</a></div>
</div>

仕様書によると、このシナリオでは、ボックス 1 がその位置で本当に論理的に意味をなしているなら、グリッドレイアウトを使って並び替えるのではなく、 HTML ソースに戻ってそこで変更を加えるべきだとしています。これは、視覚的な並べ替えと論理的な並べ替えの違いを意味しています。論理的な並べ替えは、文書の意味と構造にとって重要であり、その構造を維持するようにしなければなりません。

グリッドレイアウトのアクセシビリティはどのように考えればよいのか

仕様書によると、文書がコンテンツの論理的な順序を維持する必要があることがわかっています。さまざまなユーザーやページの操作方法に対してアクセシビリティを確保するためには、どのように開発に取り組めばよいのでしょうか。

構造化された、アクセシブルな文書から始める

グリッドレイアウトでは、希望のレイアウトを実現するために文書ソースを変更する必要がありません。したがって、ページの出発点は、構造化されたアクセス可能な文書でなければなりません。グリッドレイアウトは「画面が最小の端末」にも適した構造を提供することができます。ユーザーがモバイルで長い文書をスクロールしている場合、そのユーザーにとっての優先順位は、ソースの中で何を優先すべきかによく対応します。

レスポンシブで応答するグリッドの作成

HTML でしっかりとした文書構造を定義しておけば、CSS を使用してその上にレイアウトを追加することができます。おそらく、メディアクエリーを使用して、画面サイズや端末に応じて変更を加え、より大きな画面用に追加の列を作成するなどするでしょう。ここでグリッドがとても役に立ちます。例えば、モバイルのソースの順序で優先順位が下げられた要素は、デスクトップのレイアウトではサイドバーに移動することができます。ここで重要なのは、テストを続けることです。良いテスト方法は、「文書をタブで巡回してみることです」。この順番はまだ意味があるでしょうか。奇妙な方法でレイアウトの一番上から一番下に飛び移っていないか確認してみてください。もしそうであれば、レイアウトについて何か対処する必要があるということです。

ソースに戻る

デザインプロセスの中で、グリッドを使って要素の位置を変更した場合は、文書に戻って論理的な順序を変更する必要があります。 CSS グリッドレイアウトの良いところは、レイアウトに大きな変更を加えなくても、ソース内のアイテムを論理的な順序に合わせて移動させることができることです。しかし、論理的な順序を維持するためにソースに戻って更新することを忘れないようにするのは、開発者である私たちの責任です。

グリッドとマークアップの平坦化の危険性

CSS グリッドレイアウトや CSS フレックスボックスで注意しなければならないもう一つの問題は、マークアップを平坦にしようとする誘惑です。これまで述べてきたように、アイテムがグリッドアイテムになるためには、グリッドコンテナーの直接の子である必要があります。したがって、グリッドコンテナー内に <ul> 要素がある場合、子要素の <li> ではなく、その ul 要素がグリッドアイテムになります。

subgrid の値を grid-template-columns と grid-template-rows に設定すると、問題が解決できます。これにより、グリッドがグリッドアイテムに継承され、ツリーに引き継がれるようになります。あるいは、グリッドアイテムに display: contents を設定すると、その要素の子要素がグリッドアイテムになります。アイテムに display: contents を設定すると、通常作成されるボックスは消え、子要素のボックスは 1 レベル上に上がったように現れます。

きちんと構造化された文書から始めることは、この問題を避けるとても良い方法です。

関連情報

• Flexbox & the keyboard navigation disconnect および (Human After All): Accessibility remix video (Léonie Watson, 2016)
• Grid, content re-ordering and accessibility (CSS-tricks, 2019)
• display: contents is not a CSS reset (Adrian Roselli, 2024)