認知的アクセシビリティ
認知アクセシビリティとは、認知障碍や学習障碍のある人々に対するアクセシビリティの配慮を指します。本書では、認知アクセシビリティについて解説するとともに、認知や学習の特性が異なる人々のためにウェブのアクセシビリティを向上させる方法について紹介します。
認知障碍とは、能力が最も制限されている可能性のある知的障碍者から、加齢に伴う思考や記憶の問題に至るまで、幅広い障碍を指します。その範囲には、うつ病や統合失調症などの精神疾患を持つ人々も含まれます。また、失読症や注意欠陥・多動性障碍 (ADHD) などの学習障碍を伴う人々も含まれます。
認知障碍の臨床的定義には多岐にわたる多様性がありますが、こうした障碍を持つ人々は共通した機能上の問題を抱えています。これらの問題には、コンテンツの理解の困難さ、タスクの遂行方法を思い出すことの困難さ、一貫性のない、あるいは従来とは異なるウェブページのレイアウトによって引き起こされる混乱などが含まれます。本資料では、開発者が自社のウェブサイトやアプリケーションの認知アクセシビリティを向上させるために取るべき措置に焦点を当てます。
概要
認知障碍や知的障碍は幅広い範囲に及び、一時的、暫定的、あるいは永続的な状態である場合があります。例えば、認知症やアルツハイマー病は、徐々に悪化する永続的な認知障碍です。その他の永続的な認知障碍としては、失語症、言語障碍、自閉症、ADD/ADHD、失読症、算数障碍などが挙げられます。
一時的な認知障碍の例としては、アルコールや薬物などの物質の影響を受けている人が挙げられます。また、愛する人の死を悼む場合や、オンラインで見たツイートや動画に一時的に悲しみを覚える場合など、うつ状態もその一形態と言えます。3 つ目の例としては、睡眠不足が挙げられます。
認知の差異は多岐にわたるため、特に 2 人の人に対する解決策が相反する場合など、これに対処することは非常に困難な課題のように思えるかもしれません。これに対処する一つの方法は、認知スキルに焦点を当てることです。認知スキルには次のようなものがあります。
- 注意力
- 記憶力
- 処理速度
- 時間管理
- 文字と言語
- 数字・記号・算数
- 理解力と選択力
認知障碍のある方々に利用しやすい解決策を提供するための確実なアプローチには、以下のものがあります。
- テキスト読み上げや動画など、複数の方法でコンテンツを提供すること
- 平易な言葉の基準に基づいて書かれたテキストなど、理解しやすいコンテンツを提供すること
- 重要なコンテンツに注目を集めること
- 不要なコンテンツや広告など、注意をそらす要素を最小限に抑えること
- 一貫性のあるウェブページのレイアウトとナビゲーションを提供すること
- 未訪問時は青色、訪問済みの場合は紫色になる下線付きリンクなど、慣れ親しんだ要素を取り入れること
- プロセスを論理的かつ不可欠な手順に分割し、進行状況のインジケーターを設けること
- セキュリティを損なうことなく、ウェブサイトの認証を可能な限り簡単にすること
- 明確なエラーメッセージやエラー回復機能などを用いて、フォームへの入力が容易になるようにすること
WCAG ガイドライン
WCAG(ウェブコンテンツアクセシビリティガイドライン)には、認知的アクセシビリティを向上させるためのいくつかのガイドラインが含まれています。これらのガイドラインは、インターネットの主要な国際標準化団体である World Wide Web Consortium (W3C) の Web Accessibility Initiative (WAI) によって公開されています。この団体は、Accessible Rich Internet Application (ARIA) のガイドラインの策定も担当しています。
WCAGは、「知覚可能 (Perceivable)」「操作可能 (Operable)」「理解可能 (Understandable)」「堅牢 (Robust)」という 4 つの原則に基づいています。この目的のために、17 の具体的なガイドラインが定義されており、そのうち 6 つは認知アクセシビリティに特に関連しています。
以下のガイドラインはすべて、認知障碍のある人だけでなく、より多くの人々に役立ちます。例えば、SMS を介してモバイルデバイスに送信される認証コードを必要とするアプリケーションにおいて、有効期限を延長できるようにすることは、次のようなシナリオで役立ちます。
- 注意欠陥障碍や不安障碍のある人。
- 短期記憶力が弱い人、またはマルチタスクを行っている人。
- テクノロジーへの習熟度が低い人。
- 無線受信状態が悪い人。
- 運動制御に問題がある人。
適応可能性
ガイドライン 1.3 には、「コンテンツは適応可能であるべきである」と記載されています。情報や構造を損なうことなく、さまざまな方法で表示できるコンテンツを作成してください。例えば、レスポンシブレイアウトを用意し、モバイル向けには単一カラムのデザインを提供します。
この目標を達成するためには、表示を通じて伝えられる構造や関係性を含むすべての情報が、すべてのユーザーが認識できる形式で提供される必要があります。例えば、ナレーションツールを介して情報を音声で読み上げられるようにすることなどが挙げられます。コンテンツをソフトウェアが理解できるようにすることは、代替の表示モードでも確実に利用できるようにするための有効な手段です。
時間
ユーザーがタスクを完了するために必要な時間を確保することが重要です。ガイドライン 2.2 では、「ユーザーがコンテンツを読み、利用するために十分な時間を提供すること」と規定されています。
時間制限とは、設定された時間が経過した後、または定期的に、ユーザーの操作を待たずに自動的に行われる処理のことです。例えば、30 分後にログアウトされることや、購入手続きに 15 分間しか与えられないことなどが挙げられます。認知障碍のあるユーザーは、コンテンツを読む際や、フォームへの入力などの操作を行う際に、より多くの時間を必要とする場合があります。解決策としては、タスクを完了するために十分な追加時間をユーザーに提供するか、時間制限を完全に撤廃することが挙げられます。
タイマー
時間制限を調整するためのオプションには、次のようなものがあります。
- ユーザーが時間制限に到達する前に、制限を無効にしたり、元の制限時間の少なくとも 10 倍に調整したりできるようにする。
- ユーザーに警告を表示し、スペースバーを押すなどの操作を行うことで、タイムアウト時間を 10 倍に延長できる、少なくとも 20 秒の猶予時間を設ける。
コンテンツ上に、ユーザーがセッションの時間制限を長く設定したり、時間制限を完全に無効にしたりできる切り替えボタンを設けてください。時間制限が設定されるコンテンツの例としては、フォーム、制限時間付きの読解演習、研修資料などが挙げられます。時間制限が 20 時間を超える場合、合理的配慮は不要です。
動く、点滅する、スクロールする
ユーザー、特に認知障碍のあるユーザーの注意をそらさないことが重要です。
情報の動き、点滅、スクロール、または自動更新が自動的に開始され、5 秒以上続き、かつ他のコンテンツと並行して表示される場合、それが不可欠な機能でない限り、ユーザーはそれらを一時停止、停止、非表示、または制御できる必要があります。「不可欠」とは、動き、点滅、スクロール、または情報の自動更新を取り除いた場合、コンテンツや機能の意味が根本的に変わってしまうこと、かつ、その情報や機能を、準拠した別の方法で実現できないことを意味します。これには、アニメーション GIF も含まれます(ただし、GIF アニメーションが 5 秒以上続く場合に限ります)。
考慮すべき追加の時間に関する基準は以下の通りです。
- 認知や言語に制限のある人は、読み込みや理解にさらに時間を必要とする場合があります。ユーザビリティを向上させるため、時間制限はすべて取り除いてください。また、非対話型の同期メディアやリアルタイムのイベントを除き、時間制限のあるコンテンツも避けるべきです。
- 注意欠陥障碍のある人は、注意散漫になることなくコンテンツに集中できる必要があります。緊急事態を通知する場合を除き、ユーザーは中断を延期または抑制できる必要があります。これにより、認知障碍のある人がコンテンツの主目的に集中できるようになり、アクセシビリティが向上します。コンテンツの更新を自動的に行うのではなく、更新をリクエストする方法を用意することで、ユーザーがコンテンツの更新を延期できるようにしてください。また、重要でないアラートを任意に設定できる方法も提供してください。
- 有効期限が切れたセッションの再認証後、データが失われることなく活動を継続できるようにしてください(例:アンケートの状態を保存する)。ユーザーが再認証した後にデータを変更できるよう、適切な方法でデータを保存してください。再認証を行う前に、データを非表示または暗号化して保存してください。
- データ損失につながる可能性のある非アクティブ状態について警告を表示してください。タイムアウトを設定する場合は、セッションがタイムアウトし、データが失われるまでの正確な時間をユーザーに伝えてください。ただし、操作が行われない場合でも20時間以上データを保持する場合はこの限りではありません。
ナビゲーション
ガイドライン 2.4 には、「ユーザーがサイト内を移動し、コンテンツを見つけ、現在地を把握できるよう支援する手段を提供する」と記載されており、サイト内の移動が容易でコンテンツが見つけやすいようにするための 10 のガイドラインが示されています。
<title> を指定する
文書には必ず <title> を指定してください。タイトルは、画面の要点を素早く簡単に把握できる説明となるからです。認知障碍、短期記憶の制限、読字障碍のある方にとって、この方法でコンテンツの目的を把握できることは大きな助けとなります。
見出しとラベル
ユーザーが情報を簡単に見つけ、さまざまなコンテンツセクション間の関係性を理解できるよう、明確で説明的な見出しを付けましょう。説明的なラベルは、ユーザーがコンテンツ内の特定の要素を特定するのに役立ちます。読み進めるのが遅い人や、短期記憶に制限がある人にとっては、セクションの見出しから各セクションの内容が予測できると、理解しやすくなります。
セクション見出し
見出しは、ページコンテンツ全体の構成を明確にするのに役立ちます。ページコンテンツの各セクション間を移動しやすくするとともに、内容の理解を助ける手段となります。見出しの例としては、コンテンツの章、節、項などがあります。
見出しは、ページコンテンツのセクションを区別するための他の方法(枠線、余白、水平線など)に比べ、よりわかりやすいナビゲーションの助けとなります。
コンテンツを探す方法が複数ある
ユーザーによって情報を探す方法はさまざまであるため、サイト上のコンテンツを見つけられるよう、複数の手段を用意することが重要です。
サイト内を移動するための方法を複数用意することで、ユーザーが情報をより早く見つけられるようになります。必要な情報を見つけるために、何ページも読み進めて探すよりも、目次やサイトマップ、検索機能を利用することを好むユーザーもいます。一方で、サイトのレイアウトやコンテンツ、コンセプトをしっかりと理解するために、ページからページへと順を追ってサイトを閲覧することを好むユーザーもいます。
コンテンツのブロックを迂回する機能
複数のウェブページで繰り返し表示されるコンテンツのブロックをスキップするための仕組み(スキップリンクなど)を提供します。
理にかなったフォーカス順序
操作可能な要素のフォーカス順序は、理にかなったものであるべきです。これを実現するためには、DOM の順序が視覚的な順序と一致し、さらにその順序がタブ順序とも一致している必要があります。タブ順序が飛び飛びになっていたり、特にキーボード操作時に視覚的な順序と一致しないような動きをする場合、ユーザーは混乱してしまう可能性があります。
フォーカスされている要素は、視覚的にフォーカスが分かるようにすべき
ユーザーがキーボードを使って操作する際、どの要素に現在フォーカスが当たっているかが一目でわかるように UI を設計する必要があります。フォーカスをより明確に示す場合を除き、ブラウザのデフォルトの :focus スタイルを変更したり削除したりしないでください。
意味を伝えるリンクテキスト
リンクのテキストは、ユーザーがリンクをクリックした際に次にどのページに移動するかが、明確かつ簡潔に伝わるものでなければなりません。不適切なリンクテキストは、その目的や移動先についてユーザーを混乱させる恐れがあります。
一部の支援技術では、ページ上に存在するすべてのリンクのリストを順にたどって操作することができます。この場合、リンクは周囲の非リンクコンテンツという文脈から切り離されて表示されるため、理解しやすいリンクテキストがさらに重要になります。ユーザー体験の悪い例として、リンクテキストがすべて「ここをクリック」となっているページが挙げられます。「ここ」がどこへ移動するのかが示されていないため、リンクの目的が不明確になってしまいます。
スクリーンリーダーの場合、リンクテキストが各リンクの目的を説明していることが不可欠です。スクリーンリーダー向けにリンクに追加したテキストが冗長で、視覚に障碍のない読者にとって混乱を招く可能性がある場合は、支援技術を使用していないユーザーからは視覚的に隠れるよう、追加テキストを省略することを検討してください。
現在地が確認できる
ユーザーは、サイトやアプリケーション内で現在位置を把握できる必要があります。これは、集中力が持続しにくく、長い一連のナビゲーション手順をたどる際に混乱してしまう可能性のある人にとって、特に重要であり、役立ちます。
サイト内の階層構造において自分が現在どこにいるのかという情報は、すべてのユーザーにとって有益です。特に、コンテンツ量が多く、サブセクションが多数あるサイトやアプリケーションでは重要です。パンくずリスト、サイトマップ、ナビゲーション内で現在のページを「現在地」として明示することなどは、いずれも現在の位置を伝えるのに役立つ手法です。
読みやすさ
ガイドライン 3.1 では、「テキストコンテンツを読みやすく、理解しやすいものにする」と規定されています。一部のユーザーにとっては、文脈から単語やフレーズの意味を推測することが困難な場合があります。特に、その単語やフレーズが通常とは異なる用法で用いられている場合や、専門的な意味が与えられている場合はなおさらです。
こうしたユーザーにとって、読み取りや理解の可否は、具体的な定義や、頭字語・略語の完全な表記が提供されているかどうかに左右される場合があります。また、文字で書かれた単語を認識することに大きな困難を感じるユーザーであっても、テキストが音声で読み上げられたり、重要なプロセスや概念が視覚的に説明されたりすれば、極めて複雑で高度な文書を理解できる場合もあります。
ページの言語、およびその主要言語以外のコンテンツを明記する
各ページの言語は、<html> 要素の lang 属性を使用して宣言する必要があります。文書の主要言語とは異なる言語のテキストには、再度 lang 属性を指定してください。
lang を適切に使用することで、一部のスクリーンリーダーがテキストを合成音声に変換する際に、正しく読み上げられるようになります。また、テキスト読み上げソフトウェアを利用するユーザーにとっても役立ちます。
珍しい単語や言葉の用法を定義する
障碍の種類によっては、慣用句、口語表現、専門用語など、文字通りの意味以外の言葉の使い方について理解するのが困難な場合があります。また、その言語を母語としない人も、こうした表現に戸惑うことがあります。単語やフレーズに特有の意味がある場合は、文書内でその定義を記載するか、用語集やオンライン辞書へのリンクを貼ってください。単語やフレーズが複数の意味で使用されている場合は、それぞれの用法について定義を明記してください。
略語の定義
次のような人にとっては、略語は分かりにくい場合があります。
- 単語の意味を解読するのが難しい。
- 記憶力が限られている。
- 文脈を利用して理解を深めるのが難しい。
- 画面拡大ソフトに頼っている(これにより、文脈からの手がかりが失われることが多い)。
略語を初めて使用する際は、その完全形を記載し、その後に <abbr> 要素内に略語を記述してください。略語に完全形がない場合、またはその略語が文書の主要言語に含まれていない単語(ラテン語など)の略語である場合は、その意味を説明してください。また、頭字語(頭文字語)の読み方については、ルビテキストの使用を検討してください。
読解レベル
コンテンツはできるだけわかりやすく書くべきです。良い目安として、一度読んだだけで理解できるほどシンプルにすることが挙げられます。これを実現するための方法には、次のようなものがあります。
- 短くてシンプルな単語を使う。
- 短い文を書く。
- 現在形の能動態を使用する。
- 正しい文法と綴りを使用する。
認知障碍のあるユーザーには、読みやすさを考慮した要約文(TL;DR、つまり「長すぎるので読まなかった」とも呼ばれる)を提供することが役立ちます。また、アイデアや出来事、プロセスを説明するために、付随する視覚資料を提供するのも有効な手法です。
コンテンツの読みやすさを評価するツールも存在します。例えば、この文書の平均グレードレベルは約 11 です。これは、16 歳から 17 歳の英語ネイティブスピーカーであれば容易に理解できることを意味します。一部のツールでは、内容を簡略化するための提案を提供してくれるものもあります。
発音
単語の発音を教えるのに役立つテクニックはいくつかあります。
- 単語の直後に発音を記載する。
- 発音一覧へのリンクを貼る。
- 発音付きの用語集を用意する。
<ruby>要素を使用して、単語の発音を示す。
単語の発音に関するガイダンスを提供することは、声に出して読むことを好む人、母語の話者ではない人、文脈における用語の意味に不慣れな人など、さまざまな人々に役立ちます。
別の解決策として、字体や発音記号を使用して発音を示す方法もあります。ただし、この手法を採用する場合は、表示をオフにできる仕組みを設ける必要があります。さらに、使用されている記号の意味が直感的に分かりにくい場合があるため、それらの記号に関するガイドへのリンクを掲載すると役立ちます。
予測可能性
WCAG ガイドライン 3.2 では、「ウェブページの外観や動作が予測可能なものにする」と規定されています。これは、優れたユーザー体験設計の基本原則です。一貫性は、認知に困難を抱える人々にとって特に重要です。これには、ページレイアウトの一貫性や、予測可能なインタラクティブ要素が含まれます。
コンテキストを切り替えるのにフォーカスではなくアクティベーションを使用
コンテキストの変更は意図的なものであるべきです。そのため、UI 機能がフォーカスを受けた際、それだけでユーザー向けのさらなるアクションがトリガーされてはなりません。むしろ、ユーザーが機能を「アクティブ化」することで、その変更がトリガーされるようにすべきです。
アクティブなリクエストに基づいて設定を変更する
フォームの操作やデータ入力は、予測可能な動作をもたらすべきです。コンテキストの変化は、認知障碍のあるユーザーを混乱させる可能性があるため、ユーザーの操作に応じてその変化が明確に起こる場合のみ、発生するようにすべきです。
状態の変更には、ユーザーによる意図的な操作が必要です。その例としては、チェックボックスのチェック、データの入力、選択ボックスの選択肢の変更などが挙げられます。また、コンテキストの変更を開始するための送信ボタンを必ず用意し、変更が行われる前に何が起こるかを説明するようにしてください。
サイト全体を通じてナビゲーションの一貫性を保つ
ページ間のナビゲーション順序を統一してください。たとえば、複数のページにナビゲーションバーがある場合は、サイト全体で同じリンクを同じ位置に配置し、ナビゲーションを統一してください。これはナビゲーションだけに限ったことではありません。繰り返し使用されるコンポーネントはすべて、表示されるたびに同じ相対的な順序で配置してください。
一貫性のあるラベル付けを行う
同一の機能については、使用するたびに同様のラベルを付けるべきです。サイト内の異なるセクションであっても、ボタンラベルやアイコンの代替テキスト、類似した操作に対するアイコン表記などを統一することで、すべてのユーザーにとって使いやすくなります。
一貫性と予測可能性を保ち、規範を活用する
ラベルのないアイコンは情報を伝える上で最も効果的な方法とは言えませんが、アイコンの使用方法(およびラベルがある場合はそのテキスト)を一貫させておくことで、ユーザーがアイコンが何を表しているかを理解しやすくなります。同様に、ブラウザの「戻る」ボタンなどのデフォルト設定を変更してはいけません。ユーザーを別のページにリダイレクトする必要がある場合は、事前にその旨をユーザーに伝えてください。
入力支援
ガイドライン 3.3 は、「ユーザーがミスを回避し、修正できるよう支援する」と明記しており、正確なデータ入力を確実にするのに役立ちます。誰もがミスを犯すものですが、中にはミスを犯しやすい人、ミスに気づきにくい人、あるいは一度ミスを犯すと修正するのが困難な人もいます。
入力支援のガイドラインは、ユーザー、特に障がいを持つユーザーがミスを犯す可能性を低減するとともに、万が一ミスを犯した場合でも、エラーメッセージに気づき、その内容を理解し、エラーを確実に修正できる可能性を高めることを目的としています。
自動化されたエラー検出の伝達
ユーザーにはエラーが発生したことを通知し、何が問題なのかを伝える必要があります。クライアント側でエラー検出を行う場合は、ユーザーへのエラー通知を可能な限り効果的なものにするために、以下のガイドラインに従ってください。
- エラーの内容はテキストで説明する必要があります。
- エラーメッセージは可能な限り具体的にしてください。
- 必須項目が入力されていない場合はその旨を明記し、入力された値が無効な場合はその説明文を表示してください。
- エラーによってフォームの送信が阻止された場合は、そのエラーに焦点を当ててください。複数のエラーがある場合は、概要を表示し、各エラーから関連する入力項目へのリンクを張ってください。
- アイコン、画像、色などの視覚的要素に加え、テキストも併せて表示してください。アイコンやその他の視覚的ヒントの意味を理解するのが難しい人もいます。
- 一方で、エラーメッセージのテキスト版を理解するのが難しい人もいるかもしれません。そのような人のために、アイコンや色なども併せて提供してください。
- また、フォームの送信に成功した際にも、フィードバックを提供してください。
ユーザー入力に関する指示を表示する
フォームの冒頭には、その操作方法に関する説明文を記載してください。ユーザーが入力を行う必要がある箇所には、<label>、<fieldset>、<legend> 要素を使用して、ラベルや説明文を記載してください。
ラベルは説明的であり、関連する入力フィールドの近くに配置してください。入力に特定の形式が必要な場合は、適切な形式で整えられた例を示してください。さらに、ユーザーが入力しやすいように、入力データの形式を整えるためのサーバーサイド検証の実施も検討してください。
フォームコントロールが必須である場合は、視覚的に示すとともに、コード でもその旨を明示してください。フォームコントロールのコンテキストが変更される場合は、ユーザーがコンテキスト変更を引き起こす前に、何が起こるかをユーザーが理解できる形で説明してください。
エラーに関する提案
入力の誤りが自動的に検出され、かつ修正案が判明している場合は、ユーザーに修正案を提示します(ただし、そのことがコンテンツのセキュリティや目的を損なう恐れがある場合は除く)。
大惨事を防ぐ
法的、財務的、またはその他の重大な結果を招く、あるいは招くおそれのある提出物については、その提出物が審査・確認が可能であり、取り消し可能であることを確認してください。
ユーザーが入力したデータは、送信前にエラーがないか確認し、ユーザーに修正の機会を与える必要があります。ユーザーは、最終的な送信前に情報を確認・検証し、必要に応じて修正できる必要があります。また、送信ボタンに加えて、確認用のチェックボックスも必ず設けてください。
提出された内容によって法的または金銭的な取引が発生する場合、ユーザーがその依頼内容を修正または取り消すことができる期限を明記してください。
ヘルプを提供する
コンテキストに応じたヘルプを用意する必要があります。フォームにテキスト入力が必要な場合は、その目的や必要な入力内容について説明したフォームの説明文を提供してください。また、長文入力時にはスペルチェック機能や候補表示機能に加え、ヘルプやサポート資料へのリンクも併せて提供してください。入力に特定のデータ形式が求められる場合は、例を示してください。
メモ
これらは優れた設計上の慣行です。これらを取り入れることで、誰もが恩恵を受けるでしょう。
- 認知障碍のある人の多くは、身体障碍も併せ持っています。ウェブサイトは、W3C のウェブコンテンツアクセシビリティガイドラインに準拠しなければなりません。
- W3C の認知障碍および学習障碍アクセシビリティ・タスクフォースは、認知障碍のある人向けのウェブアクセシビリティガイドラインを作成しています。
- WebAIM には、関連情報やリソースをまとめた認知障碍に関するページがあります。
- 米国疾病予防管理センター (CDC) の推計によると、2018 年時点で米国市民の 4 人に 1 人が何らかの障碍を抱えており、そのうち若年層では認知障碍が最も一般的であるとしています。
- 米国では、「知的障碍」はかつて「知恵遅れ」と呼ばれていました。英国では、「知的障碍」は一般に「学習障碍」または「学習困難」と呼ばれています。