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

ウェブ制作に長年携わってきた人なら、 CSS グリッドは「レイアウトのための表」と少し似ていると思うかもしれません。ウェブデザインの黎明期には、 HTML の表を使ってページのレイアウトを構築し、表のセルにデザインを分割してレイアウトを作成していました。この方法は、その後に登場した「CSS 位置指定」に比べて、表表示による位置合わせと一定の高さの列を利用できるという利点がありました。しかし、最大の欠点は、デザインとマークアップを結びつけてしまうことで、アクセシビリティの問題が発生しやすくなることでした。デザインを表にレイアウトするために、例えばスクリーンリーダーで読み上げたときに全く意味をなさない方法でコンテンツを分割することがよくありました。

CSS に移行する際に、 CSS についてはコンテンツとマークアップと表現を分離するレイアウトができることをよく話していました。最終的な目的は、意味的にしっかりと構造化された文書を作成し、CSS を適用して希望のレイアウトを作成することです。 CSS Zen Garden のようなサイトがこの能力を示しています。 CSS Zen Garden では、同一のマークアップを、 CSS を使って独自のデザインに仕上げることに挑戦しました。

CSS グリッドレイアウトでは、テーブルのような問題はなく、グリッド構造はマークアップではなく CSS で定義されます。要素を追加する必要があれば、意味的には何の意味もないものを使うことができます。グリッドは、マークアップからコンテンツを分離するという約束を適切に果たすのに役立つと考えられますが、この考えは行き過ぎではないのでしょうか。グリッドを使用することで、アクセシビリティの問題を引き起こす可能性はないのでしょうか。

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

このガイドでは、グリッドを使ってページのコンテンツをさまざまな方法で並べ替えることができることを説明してきました。 order プロパティを使用すると、アイテムの自動配置を変更することができます。また、 grid-auto-flow: dense を使用すると、DOM の順番から外れたアイテムを視覚的に表示することができます。また、ソース内の位置を考慮せずに、グリッドテンプレート領域の線ベースの配置を使ってアイテムを配置することもできます。

仕様書には、「並び替えとアクセシビリティ」を扱う章があります。その章の導入部には、グリッドレイアウトを使って内容物を視覚的に並べ替えたときに、仕様書がブラウザーに期待することの詳細が記載されています。

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

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

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

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

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

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

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

この例では、グリッドを使用して、リンクを含む一連のボックスを配置しています。線ベースの配置プロパティを使って、ボックス 1 をグリッドの 2 列目に配置しました。視覚的には、リストの 4 番目の項目として表示されています。しかし、リンクからリンクへとタブで移動しても、ソースではボックス 1 が最初に来るので、タブの順序はボックス 1 から始まることになります。

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

.box1 {
  grid-column: 1;
  grid-row: 2;
}
html
<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 がその位置で本当に論理的に意味をなしているなら、グリッドレイアウトを使って並び替えるのではなく、ソースに戻ってそこで変更を加えるべきだとしています。これは、視覚的な並べ替えと論理的な並べ替えの違いを意味しています。論理的な並べ替えは、文書の意味と構造にとって重要であり、その構造を維持するようにしなければなりません。

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

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

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

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

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

メディアクエリーを使って列を追加したり、異なる画面サイズや端末に合わせて変更を加えたりすることになるでしょう。グリッドはとても便利で、例えば、モバイルのソース順で優先度の低い要素を、デスクトップのレイアウトではサイドバーに移動させることができます。ここで重要なのは、テストを続けることです。非常に簡単なテストは、文書を tab で巡回してみることです。この順番はまだ意味があるでしょうか。奇妙な方法でレイアウトの一番上から一番下に飛び移っていないか確認してみてください。もしそうであれば、レイアウトについて何か対処する必要があるということです。

ソースに戻る

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

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

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

サブグリッド の grid-template-columns と grid-template-rows の値は、広く実装されればこの問題を解決します。これにより、グリッドがグリッドアイテムに継承され、ツリーに引き継がれるようになります。

サブグリッドの相互運用の対応が限られていることから、 CSS グリッドレイアウトを使用したサイトを開発する際には、レイアウトをより簡単に作成するために、マークアップを平坦にしたり、意味的な要素を削除したりしようとする誘惑に駆られることがあります。例えば、あるコンテンツが意味的にはリストとしてマークアップされていたが、代わりに <div> 要素のセットを使用すれば、 display: grid に設定されたコンテナーの直接の子要素とすることができるからです。この誘惑に気をつけて、マークアップを削除することなくデザインを発展させる方法を見つけてください。実際に文書に入ってそうしなければならない場合、レイアウトを機能させるために意味的な要素を削除していることに気づくでしょうから、きちんと構造化された文書から始めることは、この問題を避けるとても良い方法です。

参考資料

アクセシビリティと CSS グリッドレイアウトに関する既存の資料はあまり多くありません。問題点の多くは CSS フレックスボックスに関するものと似ていますが、 CSS フレックスボックスでも flex-direction と order プロパティを使ってコンテンツを並べ替える方法があります。

文書ソースの順序に従った視覚的な表示の概念は、WCAG Techniques for Success Criteria - Technique C27 に詳細が記載されています。

これらの問題について考え始める方法として、 CSS グリッドレイアウトを使用する際に、Léonie Watson 氏の Flexbox & the Keyboard Navigation Disconnect を読むことをお勧めします。また、ffconf での Léonie のプレゼンテーション動画は、スクリーンリーダーが CSS での視覚的表現をどのように扱うかについて理解を深めるのに役立ちます。 Adrian Roselli も tab order in various browsers を投稿していますが、これは Firefox にグリッドサポートが完全に実装される前のものです。