「ユーザ中心のWebアクセシビリティをデザインする」
東京女子大学 渡辺隆行
<nabe@lab.twcu.ac.jp>
ウェブアクセシビリティ推進協会（JWAC）
2017年5月26日

今日のお話の背景
渡辺は，• WCAG WGに参加して，WCAG 2.0草稿の国際協調に努力• WCAG 2.0と国際協調したJIS X 8341-3:2010を策定• JIS X 8341-3を支える組織つくり（WAIC,JWAC）
してきた．
それに加えて人間中心デザイン（HCD）の立場でWebアクセシビリティを考える重要性をお話しします．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

2

何が変わることを期待できるか3• 特定の目的を持って，特定のコンテキスト（利用の状況）で，特定のUA（ブラウザ，支援技術）を用いてWebを利用するユーザーが，その目的を達成することを援助できる．
• 本物のユーザーにデザインのプロセスに参加してもらうことにより，予想外の気づき・理解が生まれ，関係者のモチベーションも上る（予算獲得が容易になる）．
• JIS X 8341-3を読んでも腑に落ちないことがユーザーを見れば分かる．
• 障害者が出会う問題の一部は自分も出会う問題であることに気づく．
• HCDはユーザー自身も気づいていない本質的な問題点に気づく手法でもあるので，Webサイトのイノベーションにつながる可能性がある．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

4

今日の話の流れ1. 渡辺の問題意識
2. デザインとは
3. 人間中心設計
4. Webアクセシビリティ
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

JIS X 8341-3:2004以前

公共や民間での独自のWCAG 1.0つまみ食いガイドライン

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

5

6JIS X 8341-3：2004策定 後• 国際協調を進めるため，WCAG WGに参加して日本語で顕著な問題を議論• 同じスタンダード（ガイドライン）を使うことが大事渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

7

JIS X 8341-3：2010策定 後• JISを支える組織が必要→WAICとJWAC創設• Webアクセシビリティを学問（当時は工学と思っていた．今は学際）する• Webアクセシビリティを自然に実現する仕組みを考えていた

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

JIS X 8341-3:2016策定• 国際協調は不可欠だがWCAG 2.0盲信でよいのか？
• コンテンツのガイドラインだけ守っていればよいのか？
• 達成基準レベルではなくて達成方法レベルに陥っていないか？
• なんか考え方が古くないか？（バージョン1.0から2.0,3.0へ進化しよう）• 研究の知見を活かせていない→WCAGは万能でない：批判論文の例（後述）渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

8

WCAG 2.0の限界を示す論文（例）9• ガイドラインの限界

C. Power, A. Freire, H. Petrie, and D. Sqllow: Guidelines are Only Half of the Story:
Accessibility Problems Encountered by Blind Users on the Web, CHI 2012, pp. 433-442.

• コンテクストの重要性（WCAG 1.0時代の論文）

D. Sloan, B. Kelly, A. Heath, H. Petrie, F. Hamilton, and L. Phipps: Contextual Web
Accessibility –maximizing the benefit of accessibility guidelines, W4A 2006, pp.121-131, 2006.

• ユーザテストの重要性

A. Aizpurua, M. Arrue, S. Harper, and M. Vigo: Are Users the Gold Standard for Accessibility
Evaluation?, W4A 2014.

• コンテクスト，ユーザテストをはじめとするWCAG 2.0に欠けている要素の指摘
T. Watanabe: Communication Model of Web Accessibility, HCIi Posters 2017，Part I, CCIS 713,
pp.1-8, 2017 (Springer).
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

10

Guidelines are Only Half of the Story: Accessibility
Problems Encountered by Blind Users on the Web（CHI 2012）“ABSTRATCT: This paper describes an empirical study of theproblems encountered by 32 blind users on the Web. Task-baseduser evaluations were undertaken on 16 websites, yielding 1383
instances of user problems. The results showed that only 50.4% ofthe problems encountered by users were covered by Success Criteria
in the WCAG 2.0. For user problems that were covered by WCAG 2.0,
16.7% of website implemented techniques recommended in WCAG
2.0 but the techniques did not solve the problems. (略)”渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

11

提案

HCD（人間中心デザイン）の枠組みでWebアクセシビリティをデザインする

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

12

今日の話の流れ1. 渡辺の問題意識
2. デザインとは
3. 人間中心設計
4. Webアクセシビリティ
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

1. アートとデザイン

デザインとは？

• アート（芸術．主観的．表現することが目的．自分主体）• デザイン（モノ・コトの意味をユーザに伝えること．ユーザ主体）

2. 設計＝デザイン（Design）？
• 設計

２ 一般に、計画を立てること。また、その計画。「老後の生活を設計する」（デジタル大辞林）• デザイン（このスライドでの意味）• 「明確な目的をもって，モノやコトに新しい価値や意味を与える方法」（早川克美：『デザインへのまなざし』（藝術学舎））• 「私たちの生活におけるさまざまな問題解決のための（略）人工物の設計」（カセム他編：『インクルーシブデザイン』（学芸出版社））
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

13

デザインの歴史
1. 18世紀の産業革命：手工芸ではない工業化が進行
2. 粗悪工業品への反発（19世紀：アーツ・アンド・クラフツ）
3. 20世紀のバウハウス（合理的・機能的なデザイン）• 1980年代：PC登場．
• 1990年代：インターネットの普及

4. Krippendorff：『the Semantic Turn –a new foundation fordesign』,2006.
• 人間中心のデザイン• デザインとは物の意味を与えることである．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

14

15

デザインの歴史と未来
デザイン
1.0

絵を描く作業中心の伝統的なデザイン観

メディア←Web A11y界隈

2.0

ユーザー体験や人間中心のデザイン

ソリューション

←デザイン界隈

3.0

コミュニケーション，サービス• 1990年から始まったICT社会（PC,ネットワーク,Web,スマホ）• 現代社会が抱える問題：高齢化，グローバル化，多様化• 新しい技術：ビッグデータ，人工知能，IoT，ロボット
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

XXXXデザインの定義

16• ユニバーサルデザイン（ロン・メイス他，1997）「すべての製品や建物を，年齢や能力や地位に関わらず，できるだけ多くの人にとって，美しくて使いやすく設計すること．」• インクルーシブデザイン（ロジャー・コールマン，1994）
社会の課題を解決する参加型デザイン．課題を発見・検証するデザイン思考と近い．

• ユーザビリティ（ISO 9241-11:1998）「ある製品が，指定された利用者によって，指定された利用の状況下で，指定された目標を達成するために用いられる際の有効さ，効率，および満足度の度合い」• アクセシビリティ（JIS X 8341-1:2010）「様々な能力を持つ最も幅広い人々に対する製品，サービス，環境または施設（のインタラクティブシステム）のユーザビリティ」
ユーザ＝障害者，利用状況＝支援技術込み，利用できるか
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

デザインに言及したウェブアクセシビリティの書籍

17

1. 太田，伊原：『デザイニングWebアクセシビリティ』（ボーンデジタル），2015．
• アクセシビリティをコンテンツの品質基準として位置づけ，アクセシブルなユーザ体験でのデザインプロセスを理解・実践するための本．

2. Shawn Henry：『Just Ask: Integrating Accessibility Throughout Design』，2007.
• WAIで活躍していてWebアクセシビリティの著書もあるShawn Henryの著書．Webで公開されている（日本語訳あり）．
• 分析段階：ペルソナ，ワークフロー，シナリオ• 設計段階：ガイドライン• 評価段階：専門家による評価，ユーザによる評価
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

デザインとコミュニケーションの関係

18• 古典的なコミュニケーションのモデル（次ページ）• コミュニケーション：人⇔人，人⇔情報システム（Web）• コミュニケーションではコンテクストも大事• デザイン：デザインとは物の意味を与えることである• デザインが受信者にメッセージを伝える• Webアクセシビリティもコミュニケーションの一部（Author⇔User）• Webアクセシビリティをコミュニケーションとしてとらえる広い視野が必要ではないか？
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

19

古典的なコミュニケーションのモデル
池上：『記号論への招待』（岩波新書），p.39

コード

[発信者]

伝達内容

解読

記号化

メッセージ

メッセージ
[経路]

[コンテクスト]
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

[受信者]

伝達内容

20

今日の話の流れ1. 渡辺の問題意識
2. デザインとは
3. 人間中心設計（HCD）
4. Webアクセシビリティ
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

21人間中心設計（HCD）

人間中心設計プロセスの計画

利用状況の把握と明示設計された解決案
がユーザーの要求事項を満たす要求事項に対する設計の評価

ユーザーの要求事項の明示

ユーザーの要求事項を満たす設計による解決案の作成

人間中心デザインプロセスの相互依存性（ISO 9241-210:2010）（『UXデザインの教科書』，図2.27）
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

HCD時代のデザイン

22• UXD(ユーザー体験のデザイン）（UXの定義：ISO 9241-210:2010）「製品，システムまたはサービスの使用および／または使用を予想したことにより生じる人々の知覚と反応」• デザイン思考• デザイナーがデザインを行う過程で用いる特有の認知的活動を指す言葉（Wikipedia）• 人の潜在的欲求について探り、そこで得たインサイトを自らの意志として、新たなモノ、コト、ビジネスをデザインしていく（IDEO）• 共感 → 問題定義 → 創造 → プロトタイプ → テスト（d.school）• サービスデザイン
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

23

HCD時代のWebアクセシビリティ
1. Webアクセシビリティの基本的な構成要素（W3C/WAI）
2. Communication Model of Web Accessibility (Watanabe)

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

24

行為の7段階モデル（D.A.ノーマン：『誰のためのデザイン？ 増補・改訂版』）
何かタスクをおこなうときは，そのゴールに向かって何かをしたいという意図がある．その意図に基づいて実際の行為を行う．そして行為の結果を評価する．
ゴール ⇒ 意図 → 意図に基づく行為系列の形成 → 実行・操作 ⇒ 外界
⇒ 外界状況の知覚 → 知覚の解釈 → 解釈の評価（理解） ⇒• 実行の橋（ギャップ）と評価の橋（ギャップ）• JISは知覚，理解，操作に焦点．ゴールを含んでいない．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

Essential Components of Web Accessibility(W3C/WAI)

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

25

Communication Model of Web Accessibility 26（T. Watanabe, HCIi 2017）

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

Communication Model of Web Accessibilityの意味

27• ユーザは ゴール（と意図）をもってWebを使用• ユーザは コンテクスト（文脈）の中でWebを使用• 発信者（Author）はサーバにコンテンツをアップロード．受信者（User）はそのコンテンツとインタラクションする．つまり，発信者と受信者はコミュニケーションできない．
• Webコンテンツをユーザエージェント（ブラウザ，スクリーンリーダなど）がレンダリングして，マルチモーダルなメッセージをユーザに伝える．
• ユーザはそれを受け取り，ナビゲーションなどのインタラクションをすることでWebコンテンツのメンタルモデルを構築する．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

28

今日の話の流れ1. 渡辺の問題意識
2. デザインとは
3. 人間中心設計
4. Webアクセシビリティ
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

Webアクセシビリティを促進するものたち• 規格（ガイドライン）• Webコンテンツの規格（WCAG 2.0＝JIS X 8341-3:2016）• W3C/WAIの他の規格（UAAG，ATAG）• プロセスの規格（Best Practice）• 法律• 障害者差別解消法＋？

• ポリシー，道徳，企業の社会的責任，教育• デザイン（プロセス）に自然にアクセシビリティを組み込む
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

29

障害者差別解消法
全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として、平成25年6月、「障害を理由とする差別の解消の推進に関する法律」（いわゆる「障害者差別解消法」）が制定され、平成28年4月1日から施行されました。
（内閣府）

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

30

31

障害者差別を解消するための措置• 不当な差別的扱いの禁止（民間事業者も法的義務）：法は、障害者に対して、正当な理由なく、障害を理由として、財・サービスや各種機会の提供を拒否する又は提供に当たって場所・時間帯などを制限する、障害者でない者に対しては付さない条件を付けることなどにより、障害者の権利利益を侵害することを禁止している。（内閣府）• 合理的配慮の提供（民間事業者は努力義務）：配慮する側，される側どちらか一方の立場が強くなる関係ではなく，等しく平等の関係を築くことができるよう，無理のない範囲での調整を行う．
（『これならわかる 障害者差別解消法』）
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

32

ユーザ中心のWebアクセシビリティをデザインする• ユーザが持つゴールがスタート地点• コンテクスト（利用の状況）も影響する• ユーザは製作者とコミュニケーションできない．コンテンツがもたらす概念モデルを利用．
• コンテンツの達成方法（Techniques）が大事なのではない．
• 達成方法→ガイドライン→ガイドライン策定者の経験→ユーザの世界• ユーザの視点を取り戻そう．
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

33

ガイドライン（WCAGなど）開発とユーザの関係• 専門家や当事者が参加• 基本的に話し合い．文献調査も併用• 多様なユーザの多様なコンテキストで生じる問題を収集• それらの問題の重要性や分類を議論• 特定のユーザやコンテキストに依存しないように一般化してガイドラインに取り込む
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

アクセシビリティ評価の手法

34• 専門家による評価（インスペクション法）• ヒューリスティック評価（Expert Review）：評価者の経験やガイドラインに基づいて評価• 認知的ウォークスルー：ユーザの情報処理（認知）過程に沿って利用行動をトレース• チェックリスト：用意されたチェックリストを使用• ガイドライン：ガイドラインに示されたポイントごとに満たしているかどうか評価• ユーザによる評価• ユーザテスト• インタビュー，質問紙，ロギング
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

35

まとめ
• ガイドラインとしてはJIS利用．JISや総務省のみんなの公共サイト運用ガイドラインに沿って利用する．
• JISの達成基準の理解や達成方法はWAICの資料を参照．
• でも，それだけではWebアクセシビリティを満たしたことにならないことに注意．特定の目的（ゴール）を持って，特定のコンテキストで，特定のUA（ブラウザ画面の大きさ，用いる支援技術）を用いてWebを利用するユーザーがその目的を達することが出来るかが大事．
• そのためにはユーザー視点を忘れないことが大事．多様なユーザーの全てを本物のユーザーでカバーできないが，文献やガイドラインである程度は補える．
• 本物のユーザーにデザインのプロセス（開発、評価）に参加してもらうことにより，予想外の気づき・理解が生まれ，モチベーションも上る．

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

36

続 まとめ
• JISを読んでも腑に落ちないことがユーザーを見れば分かる．
• ただし，ユーザーの意見を鵜呑みにすることが正しいわけではない．ユーザーの行動や発言からユーザーの本質的な問題を見つけ出す能力が必要．その手法は既に蓄積されている．
• 障害者が出会う問題のー部は自分も出会う問題であることにも気づく（アクセシビリティとユーザビリティの共通点）．
• HCDはユーザー自身も気づいていない本質的な問題点に気づく手法でもあるので，Webサイトのイノベーション（飛躍的な改善）につながる可能性がある．
• Webアクセシビリティのデザイン2.0の実現，そして直ぐに対応しなければならない3.0に備えよう．

渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

FYI：W3C/WAI の Silver Task Force

37

Objective
The objective of the task force is to perform preliminary development of
a new version of Accessibility Guidelines following a research-focused,user-centered design methodology to produce the most effective andflexible outcome. Code-named “Silver”, these guidelines will address theprocess of making content and functionality accessible to people withdisabilities, including the roles of content authoring, user agent support,and authoring tool support. These guidelines will address current
technological and cultural web accessibility requirements and provide a（下線は渡辺が付与）
base for continued evolution of the guidelines.
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

JWAC入会のお誘い（http://www.jwac.or.jp/）
入会金 0円

正会員
賛助会員

非営利団体
営利団体
個人
非営利団体
営利団体
個人

お問い合わせ：info@jwac.or.jp
渡辺隆行「ユーザ中心のWebアクセシビリティをデザインする」（2017年5月26日，JWAC）

10,000円
50,000円
10,000円
5,000円（一口）25,000円（一口）5,000円（一口）38