CSS GridやFlexboxを使うと簡単に視覚的なコンテンツの順番を変えられるけど、アクセシビリティについては注意が必要ですよということを「CSS Gridとアクセシビリティについて気になっていたこと」で書きました。
ざっくり言うと以下の3つに気をつける必要があるんですが、そもそも「論理的なコンテンツの順番」てなに？どうやって決めたらいいの？という疑問は未解決のままでした。
- HTMLソースでは論理的なコンテンツの順番を保つ
- CSS GridやFlexboxを使った順番の変更は視覚的な順番のみが変わる
- スクリーンリーダーやタブ操作にはHTMLソースの順番が使われる
ということで、今回はこの「論理的なコンテンツの順番」についてとCSS GridやFlexboxでのコンテンツの順番の変更につい書いてみます。実は、まだモヤモヤが残ったままなんですが、どこでハマっているか整理しておけば次につながると期待しています。
では、とにかく行ってみましょう！
論理的なコンテンツの順番はスマホでの表示順を目安にする
「論理的なコンテンツの順番」を考える1つの方法は、スマホのような小さい画面にコンテンツをレイアウトする際に何をどの順番で表示するかを考えて、それを論理的なコンテンツの順番とする方法です。前回紹介したMoz web docs にも書いてあるんですが、たしかに、それが一番シンプルでやりやすい方法だと思います。
スマホからのアクセスが優に5割を超えるウェブサイトがほとんどだと思うので、モバイル・ファーストでHTMLを組んでコンテンツをレイアウトしてみて、自然に落ち着いた順番を「論理的なコンテンツの順番」と考える。そして、大きな画面にあわせてレイアウトを調整していく際に、必要に応じて視覚的なコンテンツの順番を変えていく。そんなやり方が一番しっくりきそうです。
そんな感じで、まずはモバイル・ファーストでHTMLを組んで、無事に論理的なコンテンツの順番でページをレイアウトします。で、次にレスポンシブ対応するわけですが、その際、コンテンツの順番を変えるときはアクセシビリティに気をつけましょう！となるわけです。
コンテンツの順番を変えるときの注意点
繰り返しになりますけど、CSS GridやFlexboxでコンテンツの順番を変える際は以下に注意が必要です。
- HTMLソースでは論理的なコンテンツの順番を保つ
- CSS GridやFlexboxを使った順番の変更は視覚的な順番のみが変わる
- スクリーンリーダーやタブ操作にはHTMLソースの順番が使われる
なので、CSS Gridのorderプロパティなどを使ってコンテンツの順番を変えると、たとえばスクリーンリーダーでページにアクセスする人には見た目とは異なる順番でコンテンツが読み上げられます。
視覚的にページを閲覧するか、スクリーンリーダーで読むかのどちらかの場合は問題ないですが、視覚的にページを閲覧しながら補助としてスクリーンリーダーやキーボードでページを操作する人は混乱する確率が高そうです。
そういった使い方がどのくらい一般的で、実際、どのくらい問題になるのかわからないですけど。そういう使い方を全くしない僕にも不便だということは容易に想像できます。
CSS Gridのorderプロパティは宝の持ち腐れ？
そう考えるとCSS GridやFlexboxの順番の変更機能って簡単には使えなくなっちゃうんですよね。せっかくの機能が宝の持ち腐れというか。。。
そもそも論理的なコンテンツの順番ってコンテキストによって変わる場合もあると思うんですよね。だって、デスクトップでレイアウトする時はAの順番が理にかなっているけどスマホの小さい画面ではBの順番が理にかなってるってことありますよね？え？ない？
なので、いっそのことスクリーンリーダーやタブ操作でのコンテンツの順番もCSS GridやFlexboxで指定したものにするという柔軟な仕様にすれば問題は解決できると思うんですけどね。それか、どちらかに指定できるようにするとか？
まぁ、そういうわけにはいかない事情があるんでしょうね。
憲法改正くらい大変なこと？
セマンティックスはHTMLでスタイルはCSSでというように、セマンティックスとスタイルを明確に分けた状態を保つことを考えると、セマンティックスにあたる文章構造、そして、文章構造の一部であるコンテンツの順番をCSSでいじくるというのはありえない話なんでしょうか？HTMLとCSSの基本的な考え方を覆しちゃうから、憲法改正くらい大変なことなのかもしれません。
個人的には論理や理念にこだわり過ぎると現実的じゃなくなって、結局、ルールが無視されるか、もしくは使われないものになるかどちらかだと思うので、どこかで折り合いをつけた方がみんなのためだと思うんですけど、どうなんでしょうね。未知の大問題を作ってしまう可能性もあるので怖いのはわかるんですけど。
残された2つの選択肢
とはいえ、仕様は仕様なのでCSS GridやFlexboxの機能をフル活用するために現実的な落とし所を探って行きたいところです。そうすると残された選択肢は以下の2つしか思いつきません。
- CSS GridやFlexboxでの順番変更はプロタイプ作成のみに使う
- HTMLソースと視覚的な順番はできるだけ一緒にする
CSS GridやFlexboxでの順番変更はプロタイプ作成のみに使う
CSS GridやFlexboxのorderプロパティはプロトタイプ作成時のみに使うと割り切って、プロダクションサイトでは使わない。そういうのもありかもしれません。プロトタイプ作成時はCSS Gridでぐりぐりレイアウトや順番を変えて検証やテストをして、最終盤にする際にHTMLソースで順番を変える。floatでレイアウトを組むことを考えたら、プロトタイプ制作がかなり効率化できそうです。それだけでも価値はあるかもしれません。
HTMLソースと視覚的な順番はできるだけ一緒にする
「できるだけ」って判断が難しいので微妙なんですけど。スクリーンリーダーやタブ操作をテストして、コンテンツの視覚的な順番と読み上げやタブ操作の順番の違いで大きな問題が残らないようにする。ようするに多少の違和感や不便さは許容してもらうという折衷案というか妥協案です。あくまでテストしながら「できるだけ」の部分を決めていく方法です。
あと、ナビゲーションなどに関わるクリティカルな部分でどうしても解決できないところは、JavaScriptやARIAを駆使してどうにかするとかでしょうか？（この辺りの方法については記事 が少し参考になりそうです）
さいごにひとこと
本当に煮え切らない感じで申し訳ないですが、今のところ良い解決策が思いつかないんですよね。もう少しアクセシビリティについて勉強して何か良いアイディアを学べたら、またここでシェアしたいと思います。
それまで、良い解決策をご存知の方がいたら、ぜひお知恵を拝借したいところです。よろしくお願いしますm(_ _)m
Until then, enjoy learning more about a11y!
2018年1月24日に公開され、2018年1月24日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。