ウェブの情報設計 (IA) とアクセシビリティ
ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) はウェブデザインの要であると言えるでしょう。
ことウェブにおいては、同内容の情報であっても、ユーザーひとりひとりが抱える多様なコンテキスト (利用デバイス、シチュエーション、障害や加齢などに伴う身体特性、好ましい情報入出力のモダリティ、など) に応じてコミュニケートのしかたを柔軟に変えることが可能であり、こうしたウェブの特性を踏まえると、IA はアクセシビリティと密接に関係があると言えます。私自身、ウェブサイトの情報設計に携わる際にはあらゆる工程でアクセシビリティを考慮に入れますし、またアクセシビリティ施策を検討する際には IA 的な視点 (その施策は、実質的に、ユーザーの情報探索や情報理解に役立ち、ユーザー体験に寄与するか？) を常に持つようにしています。
この記事では、ウェブの IA の諸側面において、アクセシビリティがいかに関連性があるかについて、いくつか例を挙げてみたいと思います。
一貫性のある情報提示
ウェブで提示する情報は、その提示のしかたに一貫性があることが不可欠です。一貫性によって、ユーザーの認知、理解、学習を支援することができるからです。スマートフォンで「いつでもどこでも」ウェブが利用できる今日では、ビューポートが小さかったり、周囲の環境によって認知負荷が高まっていたりする状況下でも、スムーズに情報を見つけ利用できることが望ましく、一貫性のある情報提示は、ますます重要になっています。
こうした一貫性は、認知的限界のあるユーザー、画面表示を大幅に拡大することで視野が制約されるロービジョンのユーザー、シリアルな音声読み上げに依存する全盲のユーザーにとっても大きな助けになります。W3C が勧告している WCAG (Web Content Accessibility Guidelines) にも、一貫性に関する達成基準があります (参考 : 達成基準 3.2.3「一貫したナビゲーション」、達成基準 3.2.4「一貫した識別性」)。
一貫性が必要な情報設計のアウトプットとしては、たとえば以下が挙げられます。
- ナビゲーションシステムの構成要素や配置 (グローバルナビゲーション、ローカルナビゲーション、文脈的なナビゲーション、パンくず、ページネーション、ファセットナビゲーション、サイト内検索、など)
- ページレイアウトのパターン
- 各種 UI コンポーネントの構成要素
- リンクやボタンの外観
- アイコンの形状と意味の紐付け
- カラースキーム
- 用字用語
- ...など
サイト内での一貫性はもちろんのこと、広くウェブ全体との一貫性も重要です。イディオム (慣用句として定着している UI 表現) を採用することで、ユーザーの認知、学習負荷を大きく軽減することができます。
セマンティック (意味的) な情報構造
ウェブで提示する情報は、わかりやすく構造化されていることで、見つけやすく理解しやすくなりますが、その構造は、ビジュアルによって表現されるだけでは不十分です。ページ内における個々の情報のセマンティクス (意味、役割、位置づけ) を、適切にマークアップすることも併せて不可欠です。
情報構造がセマンティックに構築されることで、たとえば視覚障害者はスクリーンリーダーを介して情報を利用できますし、手指が自由に使えない人でもキーボード操作や音声操作によって情報を利用できるようになります。また、セマンティックな情報構造はコンテンツの効果的な二次利用を可能にし、ウェブエコシステムと自サイトのつながりを強化します (検索エンジンや AI アシスタントを介した自サイトへのアクセスなど)。
具体的には、たとえば以下のようなセマンティクスを HTML でマークアップします。
- ページ内のランドマーク (ヘッダー、ナビゲーション、メインコンテンツ、フッター、など)
- 見出し (大見出し、中見出し、小見出し、といったレベル設定)
- 段落の範囲
- リンク
- ボタン
- 画像 (およびその代替テキスト、キャプション)
- 箇条書き
- データテーブル (見出しセルとデータセルの関連付け)
- フォーム (入力フィールドの種類とラベル付け)
- 強調箇所
- メタ情報 (title、meta description、OGP)
- ...など
今日では、JavaScript によって情報提示を動的に変化させる UI も多く見られます。こうしたケースでは、WAI-ARIA を用いて HTML によるセマンティクスを補完することで、動的な状況変化を、画面を見ることができないユーザーにも的確に伝える (スクリーンリーダーを介して音声によってフィードバックを返す) ことができます。
情報構造がセマンティックであることは、ウェブにおける情報のありかたの根幹を成すものであり、HTML によるマークアップ (および WAI-ARIA による補完) は、きわめて IA 的な作業でもあると思います。私自身そうしているのですが、IA の中間成果物 (ワイヤーフレームや画面設計仕様書) の中に適宜マークアップに関する指示を盛り込み、チーム内の意識合わせをするのも一考です。
適切な情報配置
情報を見つけやすく理解しやすくするためには、適切な情報配置も重要なファクターです。ユーザーのウェブ利用環境は、PC、タブレット、スマートフォン ... と様々で、画面のサイズや向き (ポートレート / ランドスケープ) も人それぞれに異なります。また、アクセシビリティを考慮に入れると、画面の拡大表示やスクリーンリーダーでの利用も含めた、ユーザー環境の多様性に適応できる情報配置が必要になります。
情報配置の観点で押さえておきたいこととしては、たとえば以下が挙げられます。
- 情報の配置は、二次元的なレイアウトの前に、まずはシリアル (線形的) な順序立てを基本とする。画面が小さくマルチカラム表示が難しいモバイルデバイスや、スクリーンリーダーによる音声読み上げでも、スムーズに情報を見つけ、利用できるようにする。
- チャンク (情報の意味的な塊) を意識し、各チャンクのまとまり、関係性、重要度が伝わるよう配置する。チャンクにはなるべく見出しを付けて、視覚的にレイアウトを認識することが難しいスクリーンリーダーのユーザーでも、コンテンツの概略が素早く認知、理解できるようにする。
- 情報ノイズを軽減する。冗長性を省き、シンプルにする。
- 画面を拡大表示しても横スクロールが出ない「リフロー」型の情報配置を、できるだけ採用する。
- ユーザー行動を阻害する要素を排除する。集中力を削ぐ余計なアニメーション、文脈の流れを分断するコンテンツやインタラクション、などを避ける。
- アラートや通知など、動的に情報配置を変化させる場合は、ビューポート内で目につきやすいようにする。画面の拡大表示やスクリーンリーダーでの利用にも対応できるように、フォーカスの制御や、aria-live による音声フィードバックも併せて検討する。また、通知が一定時間後に自動的に消える仕様だと、認知的限界のあるユーザーの利用を阻害する恐れがあるため、時間制限を設ける代わりに、ユーザーの任意操作で通知を消すインタラクションを検討する。
明快でわかりやすい言語表現
ユーザーの情報理解を支援するために、コンテンツの言語表現 (文章表現) が明快でわかりやすいことは重要です。アクセシビリティも考慮に入れると、情報保障としての側面も含めて、障害者を含むあらゆるユーザーに分け隔てなく、言語表現の内容が適切に伝わり十分に理解されることを意識したいものです。
言語表現の観点で押さえておきたいこととしては、たとえば以下が挙げられます。
- 平易で簡潔な言語表現 (plain language) による明快なライティング。認知的限界のあるユーザーや、何らかの事情 (急いでいる、焦っている、マルチタスク状態である、など) で集中して熟読できない状況にあるユーザーであっても、スムーズに誤解なく伝わるようにする。また、コンテンツの言語が母語ではないユーザーにとっても、機械翻訳によってコンテンツが読みやすくなるという副次的な効果も見込まれる。
- UI コンポーネント (ボタンやリンク、メニュー項目など) のラベリング。そのラベルだけを見て、具体的に意味が理解できるようにする。
- 画像に対するキャプションおよび代替テキスト。特に代替テキストは、視覚障害者向けの情報保障として、画像が伝えたいメッセージが適切に伝わるようにする。
- 動画コンテンツに対するキャプション (字幕)。聴覚障害者向けの情報保障として、音声トラックの内容が視覚的にも伝わるようにする。音が出せない状況にある (公共の場所など)、手元にイヤホンがない (バッテリー切れなど)、音声よりも文字のほうが認知しやすい、といったユーザーにとっても助けになる。
- 音声コンテンツに対するトランスクリプト (書き起こし)。聴覚障害者向けの情報保障として、また、コンテンツの言語が母語ではなく音声の聞き取りがうまくできないユーザーへのサポートとして、内容が視覚的にも伝わるようにする。
- WAI-ARIA によって伝達される情報。aria-label や aria-labelledby によるラベル付け、aria-describedby による補足説明、など。スクリーンリーダーのユーザーが UI コンポーネントをフォーカスしたり操作した際に、意味や状況が文脈的にわかりやすく伝わるようにする。
情報の可読性と視認性
情報を見つけやすく理解しやすくするためには、コンテンツの読みやすさ (可読性) や見やすさ (視認性) も重要です。ユーザーは様々なコンテキストでウェブを利用しており (たとえば、移動中で画面を熟視できない、屋外の明るい日差しの下で画面を見ている、電子書籍端末などモノクロの端末でアクセスしている、など)、また、老眼、色覚特性、ロービジョンといった身体的特性によって、コンテンツが読みにくかったり見にくかったりするケースもあります。
あらゆるユーザーに向けて情報の可読性と視認性を担保するために、以下を考慮に入れます。
- 識別しやすい書体、十分な文字サイズ、行間によって、可読性を高める。
- 前景色 (文字やアイコン) と背景色の間で、十分なコントラストをもたせる。
- 色彩を廃した状態 (モノクロ表示) でも情報を識別できるようにする。
- 画面表示や文字サイズを大幅に拡大しても、コンテンツが欠損したりレイアウトが崩れたりしないようにする。
- マウスや指による直接的なポインティングができず、キーボード操作によって利用するユーザーのために、フォーカスインジケーターを可視化する。
以上、ウェブにおける IA とアクセシビリティの関係について俯瞰してみましたが、こうして見ると、IA の諸工程 (情報の分類や組織化、ペーパープロトタイピング、ワイヤーフレーム、UI コンポーネント定義、カラースキーム設計、など...) においてアクセシビリティを意識できることは実に多いと言えるでしょう。あらゆるユーザーにとって、情報を探しやすく、理解しやすくするために、ウェブサイトの情報設計に取り組む際は、ぜひ上流工程からアクセシビリティを考慮に入れていただきたいと思います。