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

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

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

知覚可能

情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。

操作可能

ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。

理解可能

情報およびユーザーインターフェースの操作は理解可能でなければならない。

堅牢性

コンテンツは、支援技術を含む幅広い様々なユーザーエージェントが確実に解釈できるように十分に堅牢でなければならない。

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

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

知覚可能

写真と文字が重なる部分があるので若干可読性が落ちる場合がある。また、写真が訴えている情報も読み取り難くなる場合がある。

操作可能

ソーシャルメディアボタンが小さな領域に集約していることからクリック／タップが難しい。

理解可能

本文へのリンクも写真、題名、テキストの誘導と三種類あるが理解しにくい。また、コメントへの誘導が弱い。

堅牢性

マルチデバイス対応はしてあるが、概要の量に上下があったりレイアウトの構成上、スキミングが若干難しい。

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

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

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

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

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

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

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