レスポンシブWebデザインとアクセシビリティ

2013年4月14日 著

先週の金曜日、勤務先にてCSUN2013 参加報告セミナーが開催され、自分も講師の一人として登壇しました。セミナーで紹介し終えるまで言及するのを避けていた、というわけでもないけれど、今更ながらレスポンシブWebデザインにおけるアクセシビリティ面での注意点について覚え書きしておきます。その注意点は、CSUN 2013の初日に参加したResponsive Design and Accessibility Workshopで聞いた話や、3日間あったセッション聴講期間の初日に聞いたAccessibility Through Responsive Designというセッションで伺った話が元ネタです。ちなみに、レスポンシブにデザインしさえすればアクセシブルだと言える訳ではない、という話ではありません（それはそれで重要な事実ですが）。

Webは、さまざまな人々がさまざまなアクセス手段でもって利用するものであり、それがWebの利点でもあります。なかには、視覚系ブラウザで閲覧しながら、同時にスクリーンリーダーのような音声読み上げ環境を使う、つまり視覚と聴覚の両方でもってWebを利用する人もいます（弱視の方など）。その種のユーザーにとって、Webページの読み上げ順序（＝HTMLのソースオーダー）と見た目上のレイアウト（位置関係、近接度合い）が過度に乖離してしまうと、理解の妨げになりかねません。別の言い方をするなら、音声読み上げ環境経由で耳にした要素が、画面上で視覚的に見つけられない/見つけにくい状況は、アクセシビリティ上の懸念となり得るということ。これはレスポンシブWebデザインで実装したページに限った話ではないけれど、そうした状況はできるだけ避けたほうが無難だとは言えるでしょう。レスポンシブWebデザインにおけるコーダーの役割で紹介されていた

「PC用」「スマホ用」で、どう考えても1ソースで組めないようなデザインでも、 HTML内に複数回要素を繰り返して、mediaqueryでウィンドウ幅によってdisplayを切り替えて実装してしまう、という例があるようなんです。

というケースも、音声読み上げ環境のユーザーに対して混乱を招き得ますし、同じ内容が複数回読み上げられるというのは、少なくとも冗長で煩わしく感じさせることでしょう。そう考えると益々、先日書いたようにレスポンシブWebデザインは「分けて考えない」でうまくいくと思います。スクリーンサイズごとにレイアウトを「分けて考えない」のみならず、HTMLソースとレイアウトについても「分けて考えない」。当たり前といえば当たり前の話かもですが、一部にはレスポンシブWebデザインの利点に囚われすぎた結果、メディアクエリーでスクリーンサイズごとに何かしら変化を与えれば与えるほど凄いとか優れているなどとお考えの方もいらっしゃるっぽいので以下略。

余談ですが、冒頭で触れたセミナーには著書の『レスポンシブWebデザイン 制作の実践的ワークフローとテクニック』をくださった渡辺竜さんもお越しになり、終了後ご挨拶させていただきました。過去に某イベントで超ニアミスしていた事実には大変驚きましたが（謎）、今後ともよろしくお願いいたします。