Slide 1

Slide 1 text

アクセシビリティとこれからのWebデザイン我々はどこに向かうのか

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

5年ぶりにやってきました 3 http://sinap.jp/blog/2010/06/wireframecomwg02-rep1.html

Slide 4

Slide 4 text

伊原力也 BA  シニア・インフォメーションアーキテクト  デザインリサーチ、IA、Ix / UIデザイン その他  HCD-Net 認定人間中心設計専門家  ウェブアクセシビリティ基盤委員会 WG1 委員 4

Slide 5

Slide 5 text

ご購読ありがとうございます 5 http://www.amazon.co.jp/dp/4862462650 http://www.amazon.co.jp/dp/4862462669

Slide 6

Slide 6 text

本日の流れ 6

Slide 7

Slide 7 text

本日の流れ 前編：アクセシビリティとは 後編：Webアクセシビリティ概論 質疑応答タイム 7

Slide 8

Slide 8 text

前編：アクセシビリティとは 8

Slide 9

Slide 9 text

アクセシビリティという言葉 9

Slide 10

Slide 10 text

アクセシビリティってなんですか? 突然の質問! 10

Slide 11

Slide 11 text

Googleで「accessibility」を検索 11

Slide 12

Slide 12 text

Twitterで「アクセシビリティ」を検索 12

Slide 13

Slide 13 text

あるツイート 13 https://twitter.com/ori_io/status/659891177353666560

Slide 14

Slide 14 text

ソニーいわく 14 http://www.sony.co.jp/SonyInfo/accessibility/

Slide 15

Slide 15 text

fladdict深津さんいわく 15 http://staffblog.news.yahoo.co.jp/newshack/realnewshack_0917_part2.html

Slide 16

Slide 16 text

アクセシビリティの定義（辞書）  access  接近，入場，通路、入口、入手，利用  accessible  近づきやすい，行きやすい入手しやすい，利用できる，理解しやすい  accessibility  近づきやすさ，行きやすさ入手しやすさ，利用しやすさ，理解しやすさ 16

Slide 17

Slide 17 text

アクセシビリティの定義（ISO 9241-20）様々な能力を持つ幅広い層の人々に対する、製品、サービス、環境または施設のユーザビリティ。 the usability of a product, service, environment or facility by people with the widest range of capabilities. 17

Slide 18

Slide 18 text

ユーザビリティの定義（辞書） use  使う，用いる，使用する，利用する usable  用いることができる，使用に適した，便利な usability  使用性，使い勝手，利用可能性，使い易さ 18

Slide 19

Slide 19 text

ユーザビリティの定義（ISO 9241-11）特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. 19

Slide 20

Slide 20 text

ユーザビリティとアクセシビリティ 20 ユーザビリティアクセシビリティ Use Use Goal 特定ケースでの「使える度」「使える度」を束ねた「幅広さ」

Slide 21

Slide 21 text

アクセシビリティは尺度 特定ケースの「使える度」それを束ねた「幅広さ」 他の意味は文脈によって付与されている  探しやすさ、見つけやすさ、買いやすさ、持ち運びやすさ、再利用しやすさ……  高齢者・障害者向け、福祉、ボランティア……  情報、デジタル、Web、iOS …… 21

Slide 22

Slide 22 text

間違いではなく、文脈の違い アクセシビリティの指す範囲は広大 それぞれの分野やレイヤーの「アクセシビリティ」がある 文脈を知ることが重要 22

Slide 23

Slide 23 text

身近にあるアクセシビリティ 23

Slide 24

Slide 24 text

事例：視覚に関わるもの 24 https://www.jisc.go.jp/policy/KIDS-HP/kuizu/kaitou-1.html http://www.hatabe-cs.com/archives/269/ http://www.kao.com/jp/corp_news/2015/20150310_002.html http://homepage2.nifty.com/okonomigaki/2007-06/p5.html

Slide 25

Slide 25 text

事例：聴覚に関わるもの 25 http://haya.moo.jp/nancho/chaim.html https://obun.jp/original/nuboard/ http://www.jiritsu.com/products/detail.php?id=66 http://design.art.nihon-u.ac.jp/archives/2011/11/11/183

Slide 26

Slide 26 text

事例：上半身に関わるもの 26 http://www.itmedia.co.jp/lifestyle/articles/1301/15/news129.html http://m.aumall.jp/item/224739946 http://www.suntory.co.jp/news/2006/9343.html http://www.qunetto.co.jp/examples/

Slide 27

Slide 27 text

事例：子どもや医療に関わるもの 27 http://lohaco.jp/product/1257018/ http://www.cotta.jp/products/detail.php?product_id=009414 http://www.oxojapan.com/p-504-angled-measuring-cup-1-cup.aspx http://www.thegoldenconcepts.com/products/sabi-holster

Slide 28

Slide 28 text

事例：男坂と女坂 28 http://mttakaomagazine.com/archives/338

Slide 29

Slide 29 text

事例：車椅子用スロープ 29 http://yosf.cocolog-nifty.com/blog/2009/09/post-26d3.html

Slide 30

Slide 30 text

事例：エレベーターの鏡 30 http://annakachiro.gunmablog.net/e177526.html

Slide 31

Slide 31 text

事例：さまざまな自転車 31 http://trike-shop.jp/

Slide 32

Slide 32 text

アクセシビリティが向上すると? 誰かの便利は、ほかの人も便利でもある  狙ってる場合もあれば、偶然の場合もある 使える人が多くなれば、チャンスが増える  アクセスできると、全体のパイが広がる 利用機会が増えると、定番化しやすくなる  あって当たり前、前提のものになっていく 32

Slide 33

Slide 33 text

なぜそうなるのか? 人間は変化するから  一時的障害  自身の変化  周囲の変化 広い範囲で使えるものは、人生のどこかのステージでフィットする 33

Slide 34

Slide 34 text

一時的障害 誰もが状況によって能力が変化する  視覚障害：眼鏡の破損、周りが暗い、サングラス  四肢障害：腱鞘炎、骨折、けが  聴覚障害：オフィス、電車内、街中  認知障害：酔っ払い、徹夜、海外旅行 その瞬間は、継続する障害と変わらない 34

Slide 35

Slide 35 text

自身の変化 誰もが成長し、また加齢する 能力のバランスが年を追うごとに変化  視力、聴力、運動能力、反射神経、記憶力、認知力、経験…… その時々で使えるものが変わる 35

Slide 36

Slide 36 text

周囲の変化 家族構成や関わり方が変わる  出産、育児、ペット、独立、病気、介護…… 住む場所が変わる  国、地域、気温、移動手段…… 36

Slide 37

Slide 37 text

アクセシビリティをデザインする 偶然を待たず因数分解→ 設計思想へ 代表的な3つの考え方  バリアフリーデザイン  ユニバーサルデザイン  インクルーシブデザイン 37

Slide 38

Slide 38 text

バリアフリーデザイン Barrier : 障害 free : 取り除く 古来からある考え方 特徴  別の補助を付け足す、または何かをはずすと使える状況が増える  小回りが効きにくく、整合性が低くなりやすい  日本ではこれをユニバーサルデザインと呼びがち 38

Slide 39

Slide 39 text

すごくバリアフリー＝ユニバーサル? 39 http://www.tef.or.jp/renewal/album.html

Slide 40

Slide 40 text

ユニバーサルデザイン universal : 万人の，全員の，普遍的な 米国発（1985年～） 特徴  1つのもので最大公約数を狙う  UD7原則をデザイン指針としてチェック  有効度・効率・満足さも上がりやすい  上手くやらないと中途半端なものができる 40

Slide 41

Slide 41 text

ロナルド・メイスのUD7原則 1. 誰でも公平に使えること 2. 使う上での自由度が高いこと 3. 使いかたが簡単で、直感的に理解できること 4. 必要な情報がすぐに見つかること 5. うっかりミスや危険につながらないこと 6. 身体への負担が軽く、楽に使えること 7. 接近や利用のための十分な大きさと広さがあること 41

Slide 42

Slide 42 text

インクルーシブデザイン inclusive : すべてを含んだ，包括した. 英国発（1991年～） 特徴  極端ユーザーの潜在ニーズに着目  ユーザーと共に発想、プロトタイピング  その手があったか的なアウトプット  アウトプットを事前に予想しにくい 42

Slide 43

Slide 43 text

極端ユーザーの潜在ニーズから発想 43 http://www.projectdesign.jp/201409/tool/001603.php

Slide 44

Slide 44 text

極端ユーザーとの共創 44 http://i-d-sol.com/ http://i-d-sol.com/inclusivedesign/ http://yukianzai.com/blog/2012/02/11/163/

Slide 45

Slide 45 text

情報アクセシビリティとWeb 45

Slide 46

Slide 46 text

プロダクト＝ハードの価値 プロダクトの価値は「モノの形」に依存する  モノの価値は、機能面や、感性面での品質  それはハードと不可分（モノの形そのもの） プロダクトのアクセシビリティも「モノの形」に依存する 46

Slide 47

Slide 47 text

情報≒ ソフトの価値 情報の価値は「モノの形」に依存しにくい  情報と入れ物を分離できる  入れ物を変えることで多態性を獲得できる 情報のアクセシビリティは「入れ物」を変えることでチェンジできる 47

Slide 48

Slide 48 text

例: 小説、エッセイ、ノンフィクション 48

Slide 49

Slide 49 text

入れ物によって変化するアクセシビリティ 入れ物によって変わるもの  探しやすさ、見つけやすさ、買いやすさ、持ち運びやすさ、再利用しやすさ…… つまり、アクセシビリティは重層構造 これらもアクセシビリティの構成要素 49

Slide 50

Slide 50 text

情報アクセシビリティのレイヤー 50 robustness findability portability usability shareability hackability 頑健: 存在が維持される発見: 特定できる、探し出せる携帯: 持ち運べる、呼び出せる使用: 知覚・理解・操作、目的達成共有: 誰かに渡せる、共有できる改変: 加工できる、再利用できる

Slide 51

Slide 51 text

アクセシビリティは総力戦 いわゆる障害者高齢者対応は「使用」レイヤーのうち、さらに一部の話 前後のレイヤーも含めて考えると？  すべての本を大活字本にはできない  出版しても探せなければ意味がない  買えなければ手元に置けない  持ち歩けなければ読めない 51

Slide 52

Slide 52 text

根本からユニバーサルな対応を行うには? 情報と入れ物が分離できても、やはり「モノの形」の制約を受けるもっと根本的に、情報の利用機会を増やす方法はないのだろうか? そのような発想で作られたプラットフォームこそが……Web! 52

Slide 53

Slide 53 text

Webの本質 Webの力はその普遍性にあります。障害の有無にかかわらず誰もがアクセスできるというのがWebの本質的な側面なのです。 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. http://www.w3.org/standards/webdesign/accessibility 53

Slide 54

Slide 54 text

よくある「Webのしくみ」 54 http://www.soumu.go.jp/main_sosiki/joho_tsusin/security/basic/service/03.html

Slide 55

Slide 55 text

実はここまでプラットフォームが保障している 55 robustness findability portability 頑健: 存在が維持される発見: 特定できる、探し出せる携帯: 持ち運べる、呼び出せる

Slide 56

Slide 56 text

この時点ですでに圧倒的なアクセシビリティ 時間・空間・デバイスを超えてアクセス可能  インターネット：途中の経路が死んでも迂回できる  URL：コンテンツの場所が一意に特定できる  HTTP：仕様に沿えば誰でもプログラムが作れる  リンク：情報同士が結びついており探し出しやすい ※さらにGoogle検索が穴を埋めている Webに情報があるだけで圧倒的アクセシブル 56

Slide 57

Slide 57 text

正しくコンテンツを作ればここも保障される 57 usability shareability hackability 使用: 知覚・理解・操作、目的達成共有: 誰かに渡せる、共有できる改変: 加工できる、再利用できる

Slide 58

Slide 58 text

後編：Webアクセシビリティ概論 58

Slide 59

Slide 59 text

Webアクセシビリティの根幹 59

Slide 60

Slide 60 text

Webアクセシビリティってなんですか? 突然の質問! 60

Slide 61

Slide 61 text

マシンリーダブルとヒューマンリーダブル 61 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 62

Slide 62 text

プレーンテキスト  ■デザイニングWebアクセシビリティ ●訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介・上流から下流まで、制作プロセスの全てをカバー・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 ●取り組みの背景ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。 62

Slide 63

Slide 63 text

HTMLでマークアップデザイニングWebアクセシビリティ

デザイニングWebアクセシビリティ

訴求ポイント(この本が既存の本と異なる点)

「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容
解決アプローチの例として、実際に公開されているサイトの実例を多数紹介
上流から下流まで、制作プロセスの全てをカバー
デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視

取り組みの背景

ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。

Slide 64

Slide 64 text

これがWebアクセシビリティの根幹 Webアクセシビリティの根幹はマシンリーダブルなテキスト  誰にでも伝わる最強の表現方法は「テキスト」  テキストをマークアップすると意味が明確になり、機械が解釈可能になる  ユーザーエージェントや支援技術といったプログラムを通して利用可能な形に変換できる 64

Slide 65

Slide 65 text

ユーザーエージェントとは ユーザーの代理  ユーザーに成り代わってWebにアクセスする ブラウザはユーザーエージェントの一種  ブラウザ以外にもいろいろある 65

Slide 66

Slide 66 text

ビジュアルブラウザ(Firefox) 66

Slide 67

Slide 67 text

テキストブラウザ(w3m) 67

Slide 68

Slide 68 text

ダウンローダー(SiteSucker) 68

Slide 69

Slide 69 text

クローラー(Googlebot) 69

Slide 70

Slide 70 text

もっと自分に合った姿に変える OSの設定を変えたり、「支援技術」を用いると、さらに自分に合った姿に変えられる! 70

Slide 71

Slide 71 text

ハイコントラストモード 71

Slide 72

Slide 72 text

拡大ツール(Windows拡大鏡) 72

Slide 73

Slide 73 text

スクリーンリーダー(NVDA) 73

Slide 74

Slide 74 text

スクリーンリーダー(VoiceOver) 74

Slide 75

Slide 75 text

代替マウス 75

Slide 76

Slide 76 text

点字ディスプレイ 76

Slide 77

Slide 77 text

視線入力装置 77

Slide 78

Slide 78 text

分かれているから選択肢が増やせる 78 プロダクト情報入れ物情報デバイス Web 情報ユーザーエージェント Web デバイス情報ユーザーエージェント Web デバイス支援技術

Slide 79

Slide 79 text

Webアクセシビリティガイドライン 79

Slide 80

Slide 80 text

Webアクセシビリティってなんですか? 突然の質問! 80

Slide 81

Slide 81 text

Web Content Accessibility Guidelines (WCAG) 81 https://www.w3.org/TR/WCAG20/

Slide 82

Slide 82 text

JIS-X 8341-3:2016 82

Slide 83

Slide 83 text

WCAG 2.0 Webコンテンツのアクセシビリティ規格  W3Cが勧告している標準規格  JIS規格（JIS-X 8341-3:2016）と一致 対象はWebサイトだけじゃない  Web技術に関わるコンテンツは全て該当  アプリのWebView、HTMLヘルプ、キオスク端末のHTML、 Web上のPDF 、EPUB…… 83

Slide 84

Slide 84 text

レベルA どんなサイトも満たすべき、最低限の基準  この基準を満たせないと、支援技術を駆使しても全くアクセスできなくなる場合がある  25項目の基準  非テキストコンテンツにテキストを用意する、キーボードでも操作できるようにする、など 84

Slide 85

Slide 85 text

レベルA≒ テキスト提供、機械可読、キーボード 85 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 86

Slide 86 text

レベルAA 望ましい基準  この基準を満たすと、支援技術を駆使しなくても多くの環境でアクセスできるようになる  13項目の基準  最低限のカラーコントラスト、文字サイズなど 86

Slide 87

Slide 87 text

レベルAAA 発展的な基準  この基準を満たすと、よりアクセスしやすくなることがある  23項目の基準  レベルA～AAの基準を厳しくしたものに加え、わかりやすい言葉を使う、など 87

Slide 88

Slide 88 text

レベルAA~：見やすさ、読みやすさ、分かり易さ 88 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 89

Slide 89 text

意外とこんな話が含まれている 89 http://www.amazon.co.jp/dp/4062574438

Slide 90

Slide 90 text

意外とこんな話が含まれている 90 http://www.amazon.co.jp/dp/4873114101

Slide 91

Slide 91 text

意外とこんな話が含まれている 91 http://www.amazon.co.jp/dp/4839928401

Slide 92

Slide 92 text

意外とこんな話が含まれている 92 http://rosenfeldmedia.com/books/web-form-design/

Slide 93

Slide 93 text

意外とこんな話が含まれている 93 http://sinap.jp/blog/2015/04/efo01.html

Slide 94

Slide 94 text

IA/UXにつながるW3C公式テキストという考え方 94 https://twitter.com/storywriter/status/625297980212445185

Slide 95

Slide 95 text

Webアクセシビリティに取り組む理由

Slide 96

Slide 96 text

Web担当者の認識 96 https://www.wab.ne.jp/wab_sites/contents/2335

Slide 97

Slide 97 text

利益を上げるため 効率よくビジネスを回す下地となる  利用できる状況が最大化される  ファネルの最大化、機会損失の防止  コンテンツの再利用性が上がる  オペレーションコストが下がる 対応しないこと＝見えないコスト流出と同義 97

Slide 98

Slide 98 text

体験を向上するため 使いやすいと感じるユーザーが増加する  知覚、理解、操作のハードルが下がる  多くの状況での有効度、効率、満足さが改善 指名買いするユーザーが現れる  アクセシブルなもの以外は使えないユーザーがいる  他ではできないことができた → ロイヤリティ最大  コミュニティ内での推奨意向もアップ 98

Slide 99

Slide 99 text

高齢者のインターネット利用率増加 99 http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122000.html

Slide 100

Slide 100 text

高齢者のネットショッピング利用率増加 100 http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122000.html

Slide 101

Slide 101 text

障害者のインターネット利用率の高さ 101 http://barrierfree.nict.go.jp/relate/statistics/hc_internet.html

Slide 102

Slide 102 text

将来に対応するため 新しいデバイスに取り急ぎ対応できる  作法を守れば未知のデバイスでも利用できるはず  ユーザーへのサービス中断を回避できる  漸進的な対応により突発的なコスト発生を抑止  最適化を行うための準備や検証が可能になる 102

Slide 103

Slide 103 text

Thoughts on Flash 103 http://www.apple.com/hotnews/thoughts-on-flash/

Slide 104

Slide 104 text

Web担当者の認識 104 https://www.wab.ne.jp/wab_sites/contents/2335

Slide 105

Slide 105 text

主観：じわじわきてる 海外では法制化でWCAG準拠が前提に 大企業、公共系、グローバル案件で前提に 障害者差別解消法が2016年4月に施行 上記に伴い「アクセシビリティ方針」増加 ピンク本もコンスタントに出荷中 105

Slide 106

Slide 106 text

海外では法制化でWCAG準拠が前提に 106 https://www.wab.ne.jp/wab_sites/contents/2334

Slide 107

Slide 107 text

大企業、公的機関、グローバル案件では前提に とりあえずRFPには入っている （詳しくは口頭で） 107

Slide 108

Slide 108 text

障害者差別解消法が2016年4月に施行 108 http://www8.cao.go.jp/shougai/suishin/sabekai_wakariyasui.html

Slide 109

Slide 109 text

「アクセシビリティ方針」の掲載も増加中 109 https://twitter.com/search?q=%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83 %86%E3%82%A3%E6%96%B9%E9%87%9D%20from%3Awaic_jp&src=typd&lang=ja

Slide 110

Slide 110 text

ピンク本、好調推移中 110

Slide 111

Slide 111 text

参考：ミツエーリンクス社の考え方 111 http://www.slideshare.net/mlca11y/ss-52115490

Slide 112

Slide 112 text

これからのWebデザイン 112

Slide 113

Slide 113 text

The Web is dead. 113 http://wired.jp/2014/01/16/death-pc-also-mean-end-web/

Slide 114

Slide 114 text

ブラウザを超えていくWeb アプリから参照するWeb APIやデータとしてのWeb ウェアラブルデバイスとWeb Webof Things もはやブラウザでの「View」はサブ扱い 114

Slide 115

Slide 115 text

その終着点は 視覚デザインから開放され、多態性への対応こそが「Webデザイン」に 時にViewを伴い、時にSNSに流れ、時に一片のデータにもなる コンテキストに沿って活用される情報をどうデザインするか、というフェーズへ 115

Slide 116

Slide 116 text

流通しやすいマシンリーダブルなコンテンツを作っていくこと次のWebに必要な考え方 116

Slide 117

Slide 117 text

積極的に多様なアクセスのかたちをデザインしていくこと次のWebに必要な考え方 117