2018年5月17日の「Global Accessibility Awareness Day」に、神戸で開催された「アクセシビリティの祭典 2018」に登壇させていただき、「インクルーシブなペルソナ拡張 (Inclusive Persona Extension)」というデザイン支援ツールを発表しました。 詳しくは、以下の記事をご覧ください。 https://website-usability.info/2018/05/entry_180517.html

1. インクルーシブな
ペルソナ拡張
アクセシビリティの祭典 2018
Global Accessibility Awareness Day 2018

2. @caztcha
Website Usability Info
https://website-usability.info
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ

3. ウェブアクセシビリティへの取り組み
「後回し」になりがちではありませんか…？
「大切」だけど、
そこまで
手が回らないし。
「正しい」けど、今、
自分がやらねば
という感じじゃないし。

4. 「UX デザイン」への関心の高まり
でも多くの場合ペルソナは「健常者」。
ユーザー中心に設計プロセスを回しても、デザイン成果物からアクセシビリティへの配慮が抜け落ちてしまう…。

5. When UX doesn't consider ALL users, shouldn't it be
known as "SOME User Experience" or... SUX?
UX が、すべてのユーザーのことを考慮しないのなら、
そんなの「Some User eXperience」
つまり ... sucks (へなちょこ) じゃね？

6. Inclusive Design
ユーザーが障害やその他の利用状況を抱えていても、
それを理由に排除することのないよう、ウェブサイトをデザインしよう。

7. UX の基本品質としてアクセシビリティは不可欠という価値観の定着
(CSS Nite Shift11「アクセシビリティ 改め インクルーシブデザイン？」 にて)

8. UX の基本品質としてのアクセシビリティ
ある目的を持ったユーザーに対して、障害などの条件ゆえに
その人の目的達成やユーザー体験を妨げないよう、デザインしたいもの。

9. インクルーシブなペルソナ拡張
Inclusive Persona Extension

10. 「障害者ペルソナ」の試みは数あれど…

11. 視覚障害 (全盲)
ウェブ利用時の障壁
• 目が見えない。視覚的な情報が理解できない。
• スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用でき
ない。
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。
解決方法
• 文字情報は画像ではなくテキストで作る。
• 画像やアイコンに対して、代替テキストを提供する。
• 映像コンテンツに対して、音声化可能な代替コンテンツ (テキストまたは音声解説)
を提供する。
• ページの見出し構造やランドマークを適切にマークアップする。
• キーボード操作だけで過不足なく利用できるようにする。
• リンクやボタンのラベルを具体的に記述する。
• フォームの入力要素にはラベル (label 要素) を付ける。
• テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
• インタラクションに伴う状況の変化がスクリーンリーダーでも伝わるようにする
(WAI-ARIA)。
• 勝手に音声を出さない (スクリーンリーダーの音声とぶつかるため)。Inclusive Persona Extension by Website Usability Info

12. problem solution
context

13. 「ペルソナ」に並べてコンテキストを付け足す

14. 聴覚障害
: 佐藤さん
視覚障害 (ロービジョン )
: 山田さん
運動障害
: 鈴木さん
「ペルソナ」との視覚的な紐付け

15. • UI 設計時に、随時立ち返って参照する要求仕様として。
• UI 評価時に、障害者の立場に立ってウォークスルーする際のチートシートとして。
• アクセシビリティのワークショップにも。(ユーザー特性の観点から対象物を捉えるきっかけ)
プロジェクトメンバーみんなで一緒に考えよう！

16. 視覚障害 (全盲)
ウェブ利用時の障壁
• 目が見えない。視覚的な情報が理解できない。
• スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用でき
ない。
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。
解決方法
• 文字情報は画像ではなくテキストで作る。
• 画像やアイコンに対して、代替テキストを提供する。
• 映像コンテンツに対して、代替コンテンツ (音声解説など) を提供する。
• 見出し構造やランドマークを適切にマークアップする。
• キーボード操作だけで過不足なく利用できるようにする。
• リンクやボタンのラベルを具体的に記述する。
• フォームの入力要素にはラベル (label 要素) を付ける。
• テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
• インタラクションに伴う状況の変化がスクリーンリーダーでも伝わるようにする
(WAI-ARIA)。
• ページの読み込みと併せて勝手に音声を出さない。
Inclusive Persona Extension by Website Usability Info

17. 視覚障害 (ロービジョン )
ウェブ利用時の障壁
• 目が見えにくい。
• 明瞭に見えない (ぼやける、重なる)。
• まぶしい。
• ちらつく。
• 視野を広く見ることができない。
• 視野の中心が欠ける。
• 焦点が定まらない (震える)。
• 見えにくさによっては、スクリーンリーダーによる音声読み上げに頼ることも
ある。
解決方法
• ズーム (画面表示の拡大) を妨げない。
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• 文字色と背景色のコントラストを十分に保つ。
• ユーザーエージェントの機能で色を反転表示しても、情報が伝わるようにする。
• ユーザーが独自のスタイルシートを使うことを妨げない。
• 情報のチャンク (塊やつながり) に配慮してレイアウトする。
• 偶発的なトリガー (マウスオーバーやフォーカス) でコンテンツを変更しない。
• 音声読み上げ順と視覚的なレイアウトを合致させる。
Inclusive Persona Extension by Website Usability Info

18. 色覚特性
ウェブ利用時の障壁
• 色が識別しにくい。
• P型 (赤の視感度がないか低い)
• D型 (緑の視感度がないか低い)
• T型 (青の視感度がないか低い)
• A型 (色の識別ができず明暗でしか判別できない)
• ウェブページをグレースケールで印刷する場合、情報識別を色に依存している
コンテンツだと判別できない。
• モノクロの電子書籍リーダーで (電子書籍からのリンクなどで) ウェブページ
を開く場合、情報識別を色に依存しているコンテンツだと判別できない。
解決方法
• 色だけで情報を識別させない。
• リンク (特に文中のリンク) には下線を付ける。
• 文字の大きさや太さなど、色以外の要素を用いてテキストのビジュアルヒエラル
キー (視覚的な優先度) を表現する。
• 図 (グラフなど) においては、色以外の形状も、視覚的な判別の手がかりとして
付ける。
• グレースケール表示でもコンテンツを理解/利用できるようにする。
(グレースケール印刷)
Inclusive Persona Extension by Website Usability Info

19. 聴覚障害
ウェブ利用時の障壁
• 音が聞こえない、または聞こえにくい。
• 公共の場 (交通機関、図書館、など) にいて、音を出せない (Bluetooth イヤ
ホンのバッテリー切れ、イヤホン忘れ、といった状況も含む)。
• コンテンツに用いられている言語が母語ではないユーザーが、音声を正しく聞
き取れない。
解決方法
• 音声コンテンツに対して、トランスクリプト (書き起こし文) を併せて提供する。
• 音声付き動画コンテンツに対して、キャプション (字幕) を併せて提供する。
(公共の場 ) (非母語話者 )
Inclusive Persona Extension by Website Usability Info

20. 運動障害
ウェブ利用時の障壁
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。以
下の手段に頼る必要がある。
• PC キーボード
• マウススティック
• 各種スイッチ (ボタン)
• 音声認識ソフト
• 視線入力装置
• …etc.
• デバイスの持ち替え (自由に向きを変えること) が難しい。
解決方法
• キーボード操作だけで過不足なく利用できるようにする。
• キーボード操作によるフォーカス位置を視認できるようにする。
• リンクやボタンなどは、精緻なポインティング操作ができなくてもクリック / タッ
プ / 実行できるよう、十分な大きさにする。
• リンクやボタンのラベルを具体的に記述する。テキストで記述し、適切にマークアッ
プする。
• デバイスの向きが「ポートレート (縦)」「ランドスケープ (横)」どちらでも過不足
なく利用できるようにする。
•
Inclusive Persona Extension by Website Usability Info

21. 認知 / 学習障害
ウェブ利用時の障壁
• 情報を認知したり記憶することが難しい。
• 外的な刺激によって集中が妨げられる。
• 文字を読むのが難しい。(ディスレクシア)
解決方法
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• コンテンツはなるべく平易な言葉で表現する。
• 見出しを提示してコンテンツの概要をつかみやすくする。
• 読まなくても理解できるよう、視覚表現 (画像、図、アイコン、シンボルなど) を適
宜用いる。
• コンテンツに時間制限がある場合、ユーザーが任意で解除または調整できるように
する。
• コンテンツ内の動きや点滅は、5秒以内にとどめるか、ユーザーが任意で停止でき
るようにする。
• コンテンツ表現において、1秒に3回以上の閃光は用いない。
• 視認性のよいフォントを用いる。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。Inclusive Persona Extension by Website Usability Info

22. 加齢
ウェブ利用時の障壁
• 精緻なポインティング (マウスでのクリックや指でのタップ) ができない。
• 小さな文字や薄い文字が見にくい。(老眼)
• 耳が遠い。
• 情報を認知したり記憶することが難しい。
• 思い込みで判断しやすい。
解決方法
• リンクやボタンなどは、精緻なポインティング操作でなくてもクリック / タップ /
実行できるよう、十分な大きさにする。
• 文字色と背景色のコントラストを十分に保つ。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• コンテンツはなるべく平易な言葉で表現する。
• 見出しを提示してコンテンツの概要をつかみやすくする。
• 読まなくても理解できるよう、視覚表現 (画像、図、アイコン、シンボルなど) を適
宜用いる。
Inclusive Persona Extension by Website Usability Info

23. モバイル
ウェブ利用時の障壁
• 画面が小さく、情報を得るための視野が狭い。
• 文字が小さくなりがちで、読みにくい。
• 屋外で使用する場合、自然光のまぶしさでコンテンツが見にくい。
• 指でタップするので、マウスに比べて精緻なポインティングが難しい。
• ハードウェアのキーボードに比べて文字のタイピングが面倒。
• マウスを前提としたインタラクション (マウスオーバーなど) を利用できない。
解決方法
• ユーザー体験 (UX) の観点からコンテンツの優先順位を明確にし、伝えたいことを
上位に提示する。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。
• ズーム (画面表示の拡大) を妨げない。
• 文字色と背景色のコントラストを十分に保つ。
• リンクやボタンなどは、精緻なポインティング操作でなくてもタップ / 実行できる
よう、十分な大きさにする。
• 文字入力 (タイピング) の発生をなるべく少なくする。
• マウスオーバー (hover) 依存のインタラクションを実装しない。
Inclusive Persona Extension by Website Usability Info

24. GitHub で公開中
https://github.com/caztcha/Inclusive-Persona-Extension
コメントは
この GitHub リポジトリの Issues に
入れていただくか、Twitter
(@caztcha) にどうぞ！

25. ありがとうございました。

26. アクセシビリティの祭典
スポンサー紹介