CSS Gridとアクセシビリティについて気になっていたこと

更新日

Advertisement

前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。

それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。

「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。

マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。

調べてみたところ、CSS Gridを使い始める前に絶対に知っておきたい最重要のポイントが3つあったのでシェアします。

目次

これってアクセシビリティのことを考えたらどうなの？

ビジュアル・ブラウザだけじゃなくて、スクリーンリーダーでページを読んでる人には不便はないか？キーボードでコンテンツを操作している人に不便はないか？

CSS Gridで簡単にレイアウトが変更できるからこそ、一度立ち止まって考える必要がありそうです。

僕はアクセシビリティのエキスパートではないので（学べよ！自分…）確かな知識はないですが、「HTMLソースの順番がコンテンツとして問題なければ表示順は違っていても良い」と考えていました。なにをもって「コンテンツとして問題ない」とするかは考えが分かれるところだと思いますけども。

マルチデバイス対応でさまざまなデバイス向けにレイアウトを順応させるのと同じで、スクリーンリーダーやキーボード操作でも問題ないようにページを制作していれば、それぞれでコンテンツの順番が違っていても（ソースオーダーとビジュアルオーダーが違っていても）問題はないと思っていたんですね。でも、そんなにシンプルではありませんでした。

すでに仕様策定者やウェブ制作者コミュニティで議論がされているので、その辺りもCSS Gridを使い始める前に知っておいた方が良さそうです。

MDN web docsで詳しく解説されていました

ググったらMDN web docsの「CSS Grid Layout and Accessibility 」というページが出てきて、そこでCSS Gridでのレイアウトとアクセシビリティについて詳しく解説されていました。良くまとまっているので、まずここを読んで基本情報を押さえるのをオススメします。

MDN web docs、まじでありがたいです。このサイトをつくってる方々には足を向けて寝られませんねw

仕様にアクセシビリティについて書いてある

CSS Grid Layoutの仕様に「Reordering and Accessibility 」というセクションがあって、そこでアクセシビリティについての注意点が書かれています。このセクションの他にもアクセシビリティについての注意書きがいくつかあって、仕様策定の際にしっかり議論されていて策が練られているのが見て取れます。当たり前といえばそうなんでしょうけど、こういうのを見ると自分がウェブ制作を出来ているのは仕様策定者の方々の血と汗と涙の賜物なんだなぁとつくづく思います。

ちょっと話がそれました。。。

これらのページを読めば、仕様策定者コミュニティの現状の考えが読み取れます。まだ最終決定の仕様ではないので変わる可能性はゼロではないですが、ここまで根本的なところは変わらないだろうと想像しています。

では、これらのページでどんなことが書かれているのか。僕なりに要点をまとめてみます。はじめに絶対に知っておきたい最重要のポイントが3つあります。

ポイント1： CSS Gridは視覚的な順番の変更にのみ使う

極端な話、CSS Gridを使うとHTMLにはコンテンツの順番を適当に書いておいて、あとでコンテンツの順番を整えるといったことも可能です。そんなことをする必要性やメリットはないと思うのでやらないとは思いますが、やろうと思えばできる。

でも、それはやめましょう。HTMLソースはセマンティックスに則って論理的な順番で記述して、CSS Gridは視覚的な順番の変更にのみ使いましょうということが仕様にはっきり書かれています。

まず覚えておきたいのは以下の3つです：

  • HTMLソースでは論理的なコンテンツの順番を保つ
  • 論理的なコンテンツの順番を変える場合はHTMLソースを変える
  • CSS Gridで変えるのは視覚的な順番のみにする

一応、仕様の一部を引用しておきます。

Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.

（意訳）
orderとgrid-placementプロパティーは論理的ではなく視覚的な順番を変える場合にのみ使われるべきである。これらの属性を論理的な順番を変更するために使っているスタイルシートは非準拠とみなします。

— CSS Grid Layout Module Level 1 – Reordering and Accessibility

「非準拠（non-conforming）」とまで書かれているので、ここは要注意！ということですね。

ここで「論理的なコンテンツの順番」てなによ？という疑問がふつふつと湧いてくるわけですが、それはちょっと置いといて、その前に知っておくべき大切なことをもう一つ。

ポイント2： CSS Gridは視覚的な順番にしか影響を与えない仕様になっている

CSS Grid Layoutでコンテンツの表示順を変えた時の動作として以下が仕様に明記されています。

  • CSS Gridは視覚的な順番にしか影響を与えない
  • 音声ブラウザやナビゲーションはHTMLソースの順番をベースにする

The reordering capabilities of grid layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order.

（意訳）
CSS Gridの順序変更の機能は意図的に視覚的なレンダリングにのみ影響を与えます。スピーチやナビゲーション操作はHTMLソースに準じます

— CSS Grid Layout Module Level 1 – Source-Order Independence

少なくとも標準に準拠して開発されたブラウザやその他のツールでは、この仕様にしたがってCSS Gridが実装されます。なので、CSS Gridで表示順を変えても音声ブラウザやナビゲーション操作には影響を与えないというのを覚えておく必要があります。

CSS Gridには明示的に表示順を変える方法（orderやgrid-placementプロパティー）と自動的に変える方法（grid-auto-flow）があるので、どちらの場合もビジュアル・ブラウザだけでなく音声ブラウザでの確認やTabキー操作の確認をしておいた方が良さそうです。特にgrid-auto-flow: dense;などで自動的に表示順を変える場合は、意図しない結果になっていないかしっかり確認した方がいいですね（確認しても解決策がないみたいなんですけど。。。現状だけでも把握しておくべきかと）。

ポイント3： 表示とナビゲーション操作の順番に差異が生じる

ブラウザでTabキーを押すとリンクを辿っていけるわけですけど、CSS Gridで表示順を変えてHTMLソースの順と異なる場合、リンクが突然思わぬところに飛んでいってしまう可能性があります。Tabキー操作での動きは、左上から右下（言語によっては逆）に順に移動していくのが理想ですが、CSS Gridで表示順を変えるとそうならない場合があります。

表示順とタブ操作の順は同じになるようにした方が良いのでは？という議論もあるようですが、仕様では音声ブラウザやナビゲーション操作はHTMLソースに従うと明記されています（FlexboxとCSS Gridの両方で）。解決策も議論されてる ようですが、あまりいいものが出てきていない。

基本的にはHTMLソースと表示の順番が大きく変わってしまうようなレイアウトは避けるべき（そういう場合はソースを変えるべき）だと思いつつも、それだとCSS GridやFlexboxのメリットが半減しちゃうし、そんなに白黒はっきりさせられないレイアウトもあるから「なんも言えねぇ」というのが正直な感想です。

最終的には音声ブラウザやTabキー操作を使うユーザのために、どちらか選べるようにしたらいいんじゃないかと思いつつ、この辺については後日もう少し調べて整理したいと思っています。

さいごにひとこと

ということで、CSS Gridとアクセシビリティについてのモヤモヤしていたことが半分くらいは解消されました。少なくとも仕様に書かれていることは理解できましたし、どこに課題があるのかも明確になりました。

論理的なコンテンツの順番と、それに関連してTabキー操作の順番についてはもう少し考えて整理してからこのブログでもシェアできればと思っています。その時まで、良いヒントや情報をご存知の方がいたら、Twitterやコメント欄などで教えていただけたら嬉しいです。

全部英語ですけど、参考にさせていただいたウェブサイトやビデオを載せておきます。

更新履歴

  • 誤字を修正しました。（2018/2/8）

2018年1月15日に公開され、2018年2月8日に更新された記事です。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする

関連する記事

  1. 論理的なコンテンツの順番について考えてたら、CSS Gridで順番は変えない方がいいと思えてきた件
  2. WordPressのセキュリティアップデート → お早めに！
  3. アクセシビリティについて考える一日「アクセシビリティの祭典 2018」に参加してきた
  4. アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について
  5. アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える
  6. CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
  7. スクリーンキャストで学べるCSS Gridの入門コースがわかりやすくておすすめ
  8. Google Adwordsの掲載順位とクリック単価ってどうやって決まるの？
  9. Webアクセシビリティの「はじめの一歩」をスクリーンリーダーの使い方を覚えることにしてはどうだろう？
  10. iPhoneでHTMLソースを確認できるアプリを探してたら素敵なCookpadのソースコードに出くわした件

人気の記事

  1. Node.jsとnpmをアップデートする方法
  2. Affinity Designerの使い方： 初めて使ったときに戸惑ったことのまとめ
  3. Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
  4. いまさら聞けないRetina対応のための「ピクセル」の話
  5. 初心者のためのよく使うLinuxコマンド一覧
  6. 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
  7. position: stickyの面白い使い方と使用時の注意点
  8. Retina対応にSVGは本当に使えるのか？
  9. Alfredの使い方とおすすめワークフロー
  10. Appleがトップページで自動送りカルーセルをやめた理由