Making Content Usable for People with Cognitive and Learning Disabilities (W3C Working Group Note)

• 公開日 : 2021年12月27日
• カテゴリー : ユーザビリティ / アクセシビリティ

認知および学習に障害を持つ人々にとって使いやすいウェブコンテンツの作りかたについて、W3C が Working Group Note を公開しています。

• Making Content Usable for People with Cognitive and Learning Disabilities - W3C Working Group Note
  • この記事で扱う2021年4月29日付の Working Group Note のアーカイブ URL は www.w3.org/TR/2021/NOTE-coga-usable-20210429/ です。

本ドキュメントは、W3C の Cognitive and Learning Disabilities Accessibility Task Force ("Coga" タスクフォース) によって策定されたものです。認知障害や学習障害は、ウェブアクセシビリティという文脈においては比較的最近になって重視されるようになりましたが (その契機のひとつが、2018年にバージョンアップされた WCAG 2.1 でしょう)、認知や学習に障害がある人々にとっての利用上の障壁を取り除くデザインはまた、いわゆる健常者を含むあらゆる人々にとってのユーザビリティ向上にも、よい影響が期待できます。というのも、ウェブサイトやアプリケーションでよく見られるユーザビリティ問題はつまるところ、ユーザー側の認知や理解の範囲内で構築されるメンタルモデルが、システム側のそれと齟齬を起こしていることに起因することが多いからです。また、利用状況 (コンテキスト) や心理的あるいは身体的な状態によって、一時的に認知、理解、記憶が困難な状況に陥ることは、誰しもあり得ることでしょう。その意味では、いわゆる UX を念頭に置いているすべてのデザイナーにとって、本ドキュメントで提示されている内容は有用であると考えます。

本ドキュメントでは、認知障害や学習障害のユーザーのために考慮に入れるべきポイントとして8つの目標 (Objective) が掲げられており、それぞれの目標に関して「ユーザーストーリー (3章)」と「デザインガイド (4章)」がまとめられています。ユーザーストーリー (†) は、「As a [role], I need [goal/desire], so that [benefit]. ( [ある特定の状況] である私は、[目的や望みごと] がしたい。それによって [こんな利益やよいことが得られる] だから。)」というフォーマットで記述されています。また、デザインガイドは、「User Need (ユーザーのニーズ)」「What to Do (デザインにおいてすべきこと)」「How it Helps (それがユーザーにとってどんな助けになるか)」「More Detailes (さらに詳しい情報)」「Examples (べき / べからずの事例)」というパターンでまとめられています。さらに、5章でテストの方法 (ユーザビリティテストやフォーカスグループなど)、6章でユーザーのペルソナとシナリオが、参考資料として添えられています。

この記事では、以下に8つの目標 (Objective) と、各目標に紐づくユーザーストーリーおよびデザインガイドを抜き出します。個々のユーザーストーリーおよびデザインガイドは、原文 (本ドキュメントの該当箇所) へのリンクになっています。日本語のサマリーを添えていますが、詳細は、リンク先の原文をご参照ください。

1. Help users understand what things are and how to use them.

ユーザーの理解 (対象物が何であるか、どう使うか、がわかること) を支援する。

ユーザーストーリー

• Clear Purpose : ユーザーの注意や集中が途切れても、自身が正しい場所にいるのか、何をしているのかが分かるように、コンテンツの目的を知りたい。
• Clear Operation : 馴染みのない UI パターンを学ぶことが困難なユーザーでも、どのような操作が可能で、どのように使用すればよいかを知りたい。
• Symbols (pictographic or ideographic that represent concepts) : 言語障害などのユーザーにとって、コンテンツ内容を理解する助けになる手段 (シンボル) が欲しい。

デザインガイド

• Make the Purpose of Your Page Clear : ページのタイトルや見出しなどで、コンテンツの目的を明確に示す。
• Use a Familiar Hierarchy and Design : 多くのユーザーが慣れ親しんでいる「おなじみの」デザインを採用する (アフォーダンスまたはシグニファイア、レイアウトパターン、ビジュアルヒエラルキー、など)。
• Use a Consistent Visual Design : ウェブサイトやアプリケーションの全体にわたって、一貫性のあるビジュアルデザインを採用する。
• Make Each Step Clear : 一連のプロセスのステップ表示、パンくず、見出しなどで、今どこにいるのか (どこに進むのか) を明示する。
• Clearly Identify Controls and Their Use : 操作可能な UI 部品 (コントロール) を明快に識別できるようデザインする。
• Make the Relationship Clear Between Controls and the Content They Affect : 操作可能な UI 部品 (コントロール) と、その影響を受けるコンテンツとの関係が明快であるようにデザインする。
• Use Icons that Help the User : 操作可能な UI 部品 (コントロール) やセクション見出しなど重要なコンテンツに、ユーザーが慣れ親しんでいる一貫性のあるアイコンを隣接させる。

2. Help users find what they need.

ユーザーが必要なものを見つけられるようにする。

ユーザーストーリー

• Findable : 記憶や言語処理などに障害があるユーザーでも、必要な (重要な) 情報や機能を、時間をかけずに探し出したい。
• Searchable : 認知や学習に障害があるユーザーにとって、ものごとを効率的に探し出す助けとして、検索ができてほしい。
• Clear Navigation : 認知や学習に障害があるユーザーでも、ブラウジングを楽しみつつ間違えずに探しものが見つけられる、明快なナビゲーション (メニュー、カテゴリーの提示) が欲しい。
• Media : 動画などのメディアコンテンツでは、要点を理解したりフォーカス (自分が何を見ているかという意識) を見失わないように、(チャプターの区切りなど) チャンク分けがなされていてほしい。

デザインガイド

• Make it Easy to Find the Most Important Tasks and Features of the Site : サイト上の重要なタスクや機能を目立たせ、見つけやすくする。
• Make the Site Hierarchy Easy to Understand and Navigate : サイトの階層構造やメニュー構造を、わかりやすく、使いやすくする。
• Use a Clear and Understandable Page Structure : ページのレイアウト構成を、明快でわかりやすくする。
• Make it easy to find the most important actions and information on the page : ページ上で、重要な情報や機能を見落とさないようにする。スクロールしたり hover したりせずとも、ユーザーから見えるようにする。
• Break Media into Chunks : 動画などのメディアコンテンツを論理的に識別しやすい粒度でチャンク分けし、ナビゲートできるようにする。
• Provide Search : ユーザーフレンドリーな検索機能を提供する。オートコンプリート、検索結果のグルーピング (と見出し付け)、検索履歴へのアクセス、クエリの綴り修正、など。

3. Use clear and understandable content (text, images and media).

コンテンツ (テキスト、画像、メディア) を明快にする。

ユーザーストーリー

• Clear Language (Written or Audio) : 言語の処理や記憶に障害のあるユーザーにとって、コンテンツに使用されている言語 (記述や音声) は明確で理解しやすいものであってほしい。
• Visual Presentation : 言語障害、ディスレクシア、あるいは記憶力に制約があるユーザーでも、圧倒されることなくコンテンツを理解できるよう、ページレイアウトに配慮が欲しい (チャンキング、ホワイトスペース、など)。
• Math Concepts : 数的な概念の理解や利用が苦手なユーザーにとって、それに代わるコンテンツ (数ではなく言葉など) があると助かる。

デザインガイド

• Use Clear Words : 明快な語彙を用いる (基本的に、一般的でわかりやすい語彙を採用し、一般的でない頭字語、略語、専門用語、造語の使用は避ける)。
• Use a Simple Tense and Voice : シンプルな言語表現になるような時制と態を用いる (英語の場合、現在形と能動態がこれに該当する)。
• Avoid Double Negatives or Nested Clauses : 二重否定や節の入れ子の使用を避ける。
• Use Literal Language : 「文字通り」の具体的な言葉を用いる。比喩や類語は不必要に用いない。
• Keep Text Succinct : テキスト (文章表現) は簡潔に表記する。
• Use Clear, Unambiguous Formatting and Punctuation : 句読点や記号 (括弧、コロン、ハイフン、など) を適切に用いて、文意の曖昧さをなくし、可読性を高める。
• Include Symbols and Letters Necessary to Decipher the Words : 言葉の解読に必要な記号や文字を十分に含む。(アラビア語やヘブライ語など)
• Provide Summary of Long Documents and Media : 長い文書や動画などのメディアコンテンツについて、簡潔な要約を提供する。
• Separate Each Instruction : 手順説明においては、わかりやすくステップを分ける。
• Use White Spacing : ホワイトスペースを用いて、チャンクを明確に示す。
• Ensure Foreground Content is not Obscured by Background : コンテンツが、背景によって覆い隠されないようにする (文字表現において背景を無地にする、音声コンテンツにおいて雑音を入れない、など)。
• Explain Implied Content : 暗黙的な情報 (ジョーク、隠喩、非言語的な感情表現、など) に対して、説明や定義を提供する。
• Provide Alternatives for Numerical Concepts : 数的な概念に代わる表現を提供する (数字だけでなく、「暖かい / 寒い」「高い / 低い」「長い / 短い」といった言語表現も併せて提示する、など)。

4. Help users avoid mistakes (and know how to correct them)

誤りを防ぐ。また、誤りを簡単に修正できるようにする。

ユーザーストーリー

• Assistance and Support : ものごとを構造的に捉えたり、タイピング入力をしたり、文字や数字を正しく並べたり、といった作業が苦手なユーザーにとって、フォームをミスなくスムーズに利用できるような支援がほしい。
• Undo : 誤解や操作ミスが多いユーザーでも、素早く簡単に「やり直し」ができて、アプリケーションを使いこなしたい。

デザインガイド

• Ensure Controls and Content Do Not Move Unexpectedly : 操作可能な UI 部品 (コントロール) やコンテンツの位置を、ユーザーが予期しない形で勝手に移動させない。
• Let Users Go Back : ユーザーがいつでも前の状態に「戻れる」ようにする (ブラウザ標準の「戻る」ボタンの適切な挙動の担保も含む)。
• Notify Users of Fees and Charges at the Start of a Task : 金銭的な取引 (物品の購入など) では、タスクの開始時点から、料金や手数料を明示する。
• Design Forms to Prevent Mistakes : フォームのデザインにおいて、ミスを防止する (最小限の入力、入力必須項目の明示、フォーマットの自動補正、オートコンプリート、など)。
• Make it Easy to Undo Form Errors : フォームの誤入力を、容易に取り消し、修正できるようにする。
• Use Clear Visible Labels : 入力フィールドやボタンなどにおいて、明快な可視ラベルを用いる。
• Use Clear Step-by-step Instructions : 明確に、順を追って、手続きを説明 (指示、誘導) する。
• Accept different input formats : 異なる入力フォーマットを受け入れる (日付、通貨、タイムゾーン、クレジットカード番号や電話番号のチャンキング、など)。
• Avoid Data Loss and “Timeouts” : タイムアウトによる入力情報を消失を防ぐ。
• Provide Feedback : 手続き上の各手順において、ステータス (正常に完了したか、など) をユーザーにフィードバックする。
• Help the user stay safe : ユーザーの安全を守る (認知や学習に障害があるユーザーや高齢者でも安心して利用できるように、センシティブな情報のやり取りをセキュアにし、また必要に応じてリスクの理解を支援する)。
• Use Familiar Metrics and Units : ユーザーが慣れ親しんでいる数値と単位の組み合わせを用いる (キロメートル vs マイル、グラム vs ポンド、など)。

5. Help users focus.

ユーザーの (コンテンツやタスクへの) 集中を支援する。

ユーザーストーリー

• Distractions : 注意力や記憶力に制約のあるユーザーにとって、インターフェースが「気が散らない」ものであってほしい。また、「今やっていること」を見失っても、思い出させてくれる支援が欲しい。

デザインガイド

• Limit Interruptions : 中断の原因となるものを制限できるようにする (通知や自動更新を無効化したり頻度を下げたりする、など)。
• Make Short Critical Paths : プロセスやワークフローを合理化し、必要最小限のステップを提示する。
• Avoid Too Much Content : 情報過多となることを避ける (コンテンツの分量や選択肢の数など)。
• Provide Information So a User Can Complete and Prepare for a Task : タスクの完了や次のタスクの準備に必要な情報を提供する (必要となる時間や労力の見積もり、ステップの進行状況、など)。

6. Ensure processes do not rely on memory.

プロセスにおいて、ユーザーの記憶に依存しないようにする。

ユーザーストーリー

• Remembering from Previous Steps : 短期記憶が苦手なユーザーにとって、自身の記憶に依存せずとも前工程の作業内容にアクセスできてほしい。
• Accessible Authentication : 記憶障害などでパスワードの記憶が困難なユーザーでも、安全に使える認証の方法があってほしい。
• Voice Menus : 記憶や言語処理に制約があるユーザーにとって、記憶負荷のかかる複雑な音声メニューに対する支援が欲しい。

デザインガイド

• Provide a Login that Does Not Rely on Memory or Other Cognitive Skills : 記憶や認知的なスキル (文字列を記憶する、計算やパズルを解く、文字画像を解読してタイプ入力する、など) に依存しないログイン手段を提供する。
• Allow the User a Simple, Single Step, Login : シンプルなシングルステップのログイン手段を提供する (多要素認証の代替として) 。
• Provide a Login Alternative with Less Words : 多くの文字を読んだり入力したりする必要のない、ログインの代替手段を提供する。
• Let Users Avoid Navigating Voice Menus : 音声メニューによるナビゲーションを回避できるようにする (ユーザーが求めれば、人によるサポートが受けられるようにする)。
• Do Not Rely on Users Calculations or Memorizing Information : ユーザーによる計算力や暗記力に頼らない形で、操作を進められるようにする。

7. Provide help and support.

ヘルプおよびサポートを提供する。

ユーザーストーリー

• Help : ウェブサイトが使いにくいユーザーにとって、困ったときに簡単にヘルプを得ることができ、またフィードバックを送ることができてほしい。
• Support : ウェブサイトが使いにくいユーザーにとって、適切な文脈 (ページ内やインラインなど) でサポートが得られてほしい。また、そのサポートは「気が散らない」もので、自身でコントロールできるものであってほしい。
• Directions : 認知や学習に障害があるユーザーにとって、進むべき方向やナビゲーションが理解しやすいような支援が欲しい。
• Cognitive Stress : 刺激に敏感 (忙殺されやすい、混乱しやすい、気分が落ち込みがち、大きな音に驚きやすい、など) なユーザーでも、ストレスなく目的を達成できるコンテンツやインターフェースであってほしい。
• Task Management : 実行機能 (遂行機能) に障害のあるユーザーでも、自信をもってタスクの管理ができるよう、事前準備を含めた支援が欲しい。

デザインガイド

• Provide Human Help : 人によるヘルプを容易に受けられるようにする。
• Provide Alternative Content for Complex Information and Tasks : 複雑な情報やタスクに対して、(ユーザーの認知特性に応じた冗長な) 代替コンテンツを提供する。
• Clearly State the Results and Disadvantages of Actions, Options, and Selections : ユーザーに行動や選択肢を提示する場合、その結果やリスクを明快に説明する。
• Provide Help for Forms and Non-standard Controls : フォームが複雑だったり、操作可能な UI 部品 (コントロール) が標準的なものでない場合、わかりやすいヘルプを提供する。
• Make It Easy to Find Help and Give Feedback : ユーザーが一連のプロセスのどの時点にいても、ヘルプを利用したり、問題点をフィードバックしたりしやすいようにする。
• Provide Help with Directions : 道案内において、進むべき方向のヘルプを、ユーザーの認知特性に応じた形で提供する。
• Provide Reminders : 特定の日付や時間があるイベントのリマインダーを簡単に設定し、利用できるようにする。

8. Support adaptation and personalization.

ユーザーの適応や、その手段としてシステムのパーソナライゼーションをサポートする。

ユーザーストーリー

• Adapt : 記憶や実行機能 (遂行機能) に障害のあるユーザーにとって、学習負荷のかからない、使い慣れたインターフェースが適用可能であってほしい。
• Extensions and APIs : 認知や学習に障害があるユーザーにとって、コンテンツの利用に際しての支援技術として、アドオン (拡張機能) またはそのための API が利用可能であってほしい。

デザインガイド

• Let Users Control When the Content Moves or Changes : コンテキスト、機能、設定内容、道順や方向、などコンテンツに動きや変化が生じる場合、ユーザーの認知特性に応じて、こうした動きや変化を制御できるようにする。
• Enable APIs and Extensions : ユーザーの認知特性に応じて有用なアドオン (拡張機能) や API を、コンテンツ利用の際に併用できるようにする。
• Support Simplification : コンテンツの簡素化をサポートする。
• Support a Personalized and Familiar Interface : ユーザーに馴染みのあるインターフェイスを提供するために、パーソナライズ手段を提供する (タイポグラフィまわりのスタイル調整、旧 UI へのロールバック、セマンティクスで利用可能なパーソナライゼーション、など)。

以上です。UI デザインをはじめ、デジタルコンテンツ作りに携わる多くの方にはぜひ、本ドキュメントの原文を (機械翻訳を介する形でもよいので) ご一読いただければと思いますが、この記事がそのきっかけになったなら、幸いです。