CSS Nite in Okayama, vol.9「現場の視点で工夫するウェブ制作」

ウェブ制作に活かすユニバーサルデザインの視点

講師	間嶋沙知
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

動画

講師メッセージ

「ウェブ制作に活かすユニバーサルデザインの視点」でお話しました間嶋です。
セッションを聴いていただき、ありがとうございました。アンケートでも感想やコメントをたくさんいただき、嬉しくて何度も読み返しています。

今回、色弱模擬フィルタ「バリアントール」を使って、いつもと違う色の見え方を体験していただきました。自分の想像を超えていろんな人にコンテンツを届けることができるのは、他のメディアにはないウェブの大きな魅力です。自分の関わっているサイトに色覚シミュレーションをかけてみたり、大事な情報のコントラストをチェックしてみるところからでも始めてみてください。0か100かではなく、できるところから改善していくことで、工夫した分だけ情報が伝わる人を増やすことができます。ユニバーサルデザインの視点が、皆さんのコンテンツをより多くの人に届ける武器のひとつになれば嬉しいです。

質問と回答

デザインに制約ができてしまいそうな不安があります。デザインの多様性も活かしつつ、ユニバーサルデザインも考慮するにはどうしたら良いでしょうか。

今回はデザインの機能的な面にフォーカスしてお話しましたが、見る人に素敵だなと感じてもらうこともデザインの大切な役割です。まずはこれまで通りデザインして、「情報を伝えている要素」についてはコントラストを確保する等の調整を加えると、機能とイメージが両立しやすいと思います。

主に楽天やYahoo!ショッピングの商品ページをデザインしていますが、最近の傾向としてサムネのクリック画像に商品説明をすべて入れるように奨められます。結果、文字がすべて画像になるのでユニバーサルデザインと逆行しているように思えます。ECサイトのショップは「売りたい」が先行しすぎてユニバーサルデザインを捨てざるを得ないことが多くあります。

リンク画像内に文字がある場合は、その内容を画像の代替テキスト（alt）に設定しましょう。画像と一緒にリンク内にテキストが含められる場合は、テキストで情報を提供しても良いです。この場合、代替テキストが重複しないように alt= “”（空）にしておきます。画像リンクの代替テキストについては、次のページが参考になります。
代替テキスト：画像リンク｜実践ノウハウ［WebA11y.jp］

ネットショップは、実店舗に買い物に行けない人でも商品を買うことができるユニバーサル性を備えています。インターネットを利用している障害者は多いですし（視覚障害者のインターネット利用率は91.7％…障害者によるインターネットの利用率｜NICT）、今後は高齢者の利用率も増えていくでしょう。サイトを使える人やいろんな人の使いやすさを高めるユニバーサルデザインの考え方は、「売りたい」に相反するものではないと思います。ショップの仕様上難しい面もあるかもしれませんが、工夫できる部分を探してみてください。

ユニバーサルデザインに興味を持った理由が知りたいです。

印刷物からウェブへとデザインする媒体を広げた過程で、ウェブの可能性＝アクセシビリティに関心を持つようになりました。ウェブアクセシビリティの勉強をする中で、技術系の話題は充実しているけれど、デザイン面でできることがもっとないかなと感じていました。そこでユニバーサルデザインに興味を持つようになりました。

Japan Accessibility Conference vol.2 で、色弱当事者の伊賀公一さんのお話を聴いたこともインパクトがありました。