アクセシビリティから変わるビジュアルデザイン

WCAG 2.0 で提示されているアクセシビリティの 4 原則にはビジュアルデザインを改善させるためのヒントがあります。デザインとの連携性を高めることで、より自然にアクセシビリティが認知されるのではないでしょうか。

W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。

アクセシビリティの 4 原則は以下のとおりです(翻訳サイトより抜粋)。

知覚可能
情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。
操作可能
ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。
理解可能
情報およびユーザーインターフェースの操作は理解可能でなければならない。
堅牢性
コンテンツは、支援技術を含む幅広い様々なユーザーエージェントが確実に解釈できるように十分に堅牢でなければならない。

こうした原則は、アクセシビリティでよく例として出される音声ブラウザへの対応やキーボードの操作だけでなく、ビジュアルデザインにも大きな影響を及ぼします。原則を意識して作ることで見やすく使いやすいデザインが生まれることもあります。

Engadget 日本語版

例えば Engadget のトップページあるニュースアイテムに注目してみましょう。視覚的なインパクトが強く、可読性も高いです。また、レスポンシブ Web デザインを採用して、多くのデバイス対応にも注力しているのが分かります。しかし、PC 版だけでも改善点は幾つか挙げることができます。上記の原則を基に課題を幾つか挙げてみました。

知覚可能
写真と文字が重なる部分があるので若干可読性が落ちる場合がある。また、写真が訴えている情報も読み取り難くなる場合がある。
操作可能
ソーシャルメディアボタンが小さな領域に集約していることからクリック/タップが難しい。
理解可能
本文へのリンクも写真、題名、テキストの誘導と三種類あるが理解しにくい。また、コメントへの誘導が弱い。
堅牢性
マルチデバイス対応はしてあるが、概要の量に上下があったりレイアウトの構成上、スキミングが若干難しい。

こうした課題を幾つか解決したビジュアルデザイン案が以下になります。

Engadgetのニュースアイテムデザインの比較

  • 写真は重ならないようにして全体が見えるようにする
  • タイトルは色コントラストをはっきりさせて可読性を上げる
  • 作者名と日付はブランドカラーをつかってタイトルと明確に切り分ける
  • コメントを明確な形で切り分けて操作がしやすいようにする
  • 概要テキストはレイアウトの横幅に合わせてスキミングをしやすくする
  • 概要テキストの文章量を調整し、伝えなければならない情報をフォーカス
  • ソーシャルメディアのボタンは押しやすい大きさに変更

JIS X 8341–3 の準拠のためにチェックリストを潰すという作業をする前に、アクセシビリティの原則を基にビジュアルデザインを考えていくことで最低限のことを初期段階で解決することが可能になります。デザインはデザイン、アクセシビリティはアクセシビリティという分断が後付けの不可価値にしてしまい、それぞれの長所が活かせないという結果になるのではないでしょうか。

また、以下のようなコードを加えることでキーボード操作でのハイライトのビジュアルを引き立てることも出来るはずです。

ハイライトしたときの見た目

/* フォーカスしたときの見た目変更 */
h2 a:focus{
background: #2ac0e1; /* Engadget の別のキーカラー */
color: #003;
display: block;
outline: none;
}

制約なしで好きなように作ったので、今回のアイデアが現実的とは言い難いですが、アクセシビリティからビジュアルデザインを作ることは、それほど飛躍した考えではないことが分かると思います。

アクセシビリティは基本的に企画段階から議論していかなければならない重要な課題ではありますが、デザインとの連携性を高めることで、より自然にアクセシビリティが認知されるのではないかと考えています。そのためのツールとして 4 原則は使えそうです。

筆者について

Experience Points

電子書籍「エクスペリエンス ポイント」発売中

の初の電子書籍。過去 4 年間にわたり Web と体験について扱ったコラム・エッセーを 34 集めました。概念だけでなく、啓蒙するためのヒントなど、明日から考えを行動にうつすためのヒントが掲載されています。
500円で .epub 又は Kindle 形式で購入できます。

閉じる 共有する

記事はお楽しみいただけましたか?役に立つ情報でしたか?ぜひ他の場所で共有してみてください。