あなたの価値を高めるWebアクセシビリティ

Slide 1

Slide 1 text

あなたの価値を高める Web アクセシビリティ 2016.12.03 | WCAN 2016 Winter Rikiya Ihara | BA

Slide 2

Slide 2 text

伊原力也 @magi1125 BA （ビジネス・アーキテクツ）ユーザー調査、情報設計、 UI デザインウェブアクセシビリティ基盤委員会委員 HCD‑Net 認定人間中心設計専門家

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

電子書籍版、 12 月 22 日に発売予定 facebook.com/a11ybooks

Slide 7

Slide 7 text

現状認識

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

仕様書を見てはいないが感覚的に意識している（ 100 人、 51% ） Q ：アクセシビリティについて

Slide 11

Slide 11 text

Q WCAG 2.0 JIS X 8341‑3

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

24 位：アクセシブルなサイト構築 3 位：優れたユーザビリティ設計 2 位：優れたインターフェイス／ナビゲーション設計 1 位： JavaScript Q ：近いうちに習得したいものは？

Slide 15

Slide 15 text

Web 制作者がアクセシビリティに取り組む価値とは？

Slide 16

Slide 16 text

access + ability アクセスできる度合い

Slide 17

Slide 17 text

Intertwingled http://intertwingled.org/jp/

Slide 18

Slide 18 text

Evaluation method of UX “ The User Experience Honeycomb ” http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

Slide 19

Slide 19 text

Q アクセシビリティになんらか取り組んでいる？

Slide 20

Slide 20 text

A この場にいる全員が実は取り組んでいる

Slide 21

Slide 21 text

Web に載るだけで圧倒的にアクセシブル

Slide 22

Slide 22 text

お店　→　 Web 新聞　→　 Web 学校　→　 Web 業務　→　 Web

Slide 23

Slide 23 text

ユーザは、わたしたちの製品にアクセスすることで何にアクセスしようとしているのか？あなたの言葉で伝える Web アクセシビリティ http://www.slideshare.net/KobayashiDaisuke1/web‑59111913

Slide 24

Slide 24 text

製品・サービス価値 Web

Slide 25

Slide 25 text

アクセシビリティ＝特殊な対応？

Slide 26

Slide 26 text

アクセシビリティ＝障害者・高齢者対応？

Slide 27

Slide 27 text

腱鞘炎でマウスが持てない Bluetooth イヤホンが電池切れ子どもにメガネを壊された

Slide 28

Slide 28 text

アクセシビリティ＝使えるかどうか？使いやすいか使えるか access usable

Slide 29

Slide 29 text

remote control pig pile https://www. ﬂ ickr .com/photos/redjar/136216456/

Slide 30

Slide 30 text

ISO 9241‑11 のユーザビリティ定義特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い。

Slide 31

Slide 31 text

様々な能力を持つ幅広い層の人々に対する、製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義

Slide 32

Slide 32 text

ユーザビリティアクセシビリティ Use Use ある状況での使える度使える度合いの幅広さ

Slide 33

Slide 33 text

アクセシビリティ＝ユーザビリティの幅広さ

Slide 34

Slide 34 text

Web アクセシビリティの解剖

Slide 35

Slide 35 text

素人とは違う、 Web プロフェッショナルの仕事としての Web コンテンツ開発を考えてみた http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 36

Slide 36 text

マシンリーダブルプログラムが解釈できるか様々な形に変換して幅広く使えるようにする Web ならではのアプローチ

Slide 37

Slide 37 text

ヒューマンリーダブル人の目で見やすいか、わかりやすいかひとつの表現で幅広く使えるようにする物理的な製品のユニバーサルデザインに近い

Slide 38

Slide 38 text

WCAG 2.0 のヒューマンリーダブル関連

Slide 39

Slide 39 text

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。 1.4 判別可能 1. 知覚可能

Slide 40

Slide 40 text

利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2: 操作可能

Slide 41

Slide 41 text

テキストのコンテンツを読みやすく理解可能にすること。ウェブページの表示や挙動を予測可能にすること。利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3: 理解可能

Slide 42

Slide 42 text

Web Content Accessibility Guidelines (WCAG) 2.0 イントロダクション：しばしば利用者全般のユーザビリティを向上させる。

Slide 43

Slide 43 text

幅広い状況でのヒューマンリーダビリティ ≒モバイル、マルチデバイス

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

モバイルの利用状況から来るデザインヒント必要十分な表現にとどめるチラ見しやすいようにデザインする階層を深くしない自然な形で接点を見せる途中で操作を止めても同じことができる時間軸を使って情報を整理する

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

特定状況でのユーザビリティ＝いわゆるユーザビリティ UI

Slide 50

Slide 50 text

UI 幅広い状況でのヒューマンリーダビリティ ≒アクセシビリティ特定状況でのユーザビリティ＝いわゆるユーザビリティ

Slide 51

Slide 51 text

可能性をさらに広げるマシンリーダビリティ

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

ヒューマンリーダブルひとつのものでは対応範囲に限界があるマシンリーダブル形を変えることで様々な状況に対応できる実は WCAG 2.0 ではレベル A 、必ず満たすべきとされている

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

マシンとヒューマンの架け橋は「テキスト」

Slide 60

Slide 60 text

伝わる可能性が一番高い UI 「テキスト」 Web コンテンツのほとんどは「テキスト」 IA の中心にあるのは「テキスト」検索に使うのも「テキスト」書き込むのも「テキスト」

Slide 61

Slide 61 text

The Final Hamburger A/B T est http://sitesforpro ﬁ t.com/menu‑eats‑hamburger

Slide 62

Slide 62 text

設計・デザインの段階でテキストを意識わかりやすく、構造を持ったテキストを「ヒューマンリーダブル」な形で出す

Slide 63

Slide 63 text

マシンリーダブルはテキストがあればこそテキストが無ければマークアップはできない（！）構造を持つテキストあれば、マークアップは難しくない title, h1 ～ h6, ul, ol, a, form, label nav, article, section, aside, header , footer , main

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

可能性を保つマシンリーダビリティ網を張るヒューマンリーダビリティ狙い撃つユーザビリティ Web

Slide 67

Slide 67 text

アクセシビリティ＝売りにつながらない？

Slide 68

Slide 68 text

遷移・回遊コンバージョン利用開始流入理解申込母数へのアプローチデザイン側での唯一のアプローチ手段 65 歳以上の利用が 16.4 ％（ 1,653 万人）障害者の利用率は高い（ 82.7 ～ 93.4% ）流入を増やす？アクセシブルにする？

Slide 69

Slide 69 text

チームにひとりでも含まれる確率

Slide 70

Slide 70 text

遷移・回遊コンバージョン利用開始流入理解申込各段階へのアプローチ WCAG2.0 に含まれる内容：ナビゲーションのガイドラインライティングのガイドラインフォーム最適化のガイドライン

Slide 71

Slide 71 text

流入例：ナビゲーション

Slide 72

Slide 72 text

流入例：ナビゲーション

Slide 73

Slide 73 text

流入例：ライティング

Slide 74

Slide 74 text

流入例：ライティング

Slide 75

Slide 75 text

流入例：フォーム最適化

Slide 76

Slide 76 text

流入例：フォーム最適化

Slide 77

Slide 77 text

アクセシビリティ＝ KPI に寄与する

Slide 78

Slide 78 text

アクセシビリティ＝コストが増える？

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

時間軸とコスト学習コスト：ピンク本を手元に置けば「できます」と言える。導入コスト：根回しが必要。本スライドを活用のこと。実施コスト：要件定義の段階で宣言しておけば、高くない。運用コスト：システム化が要求されるため、むしろ下がる。例外：動画、 PDF 、 JS 、試験

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

ルールを要する案件にアクセシビリティを絡める

Slide 86

Slide 86 text

ルールを要する案件にアクセシビリティを絡める

Slide 87

Slide 87 text

ルールを要する案件にアクセシビリティを絡める標準のガイドラインがあることで：理由付けがしやすい CMS 選定の基準となる対応後に評価しやすい発展させる際に立ち戻りやすい

Slide 88

Slide 88 text

まとめまず Web に載せるだけでアクセシブルアクセシビリティ＝ユーザビリティの幅広さアクセシビリティ＝ヒューマン向けとマシン向けヒューマン向けはマルチデバイス対応との重なり大マシンリーダブルなら形も変えて届けられるヒューマンとマシンの架け橋はテキストアクセシビリティは利益にも寄与する

Slide 89

Slide 89 text

僕なら「ウェブ制作の教科書」とか「ウェブ制作のすべて」とつけるすべてのウェブサイト制作者のための「ウェブサイト構築」の教科書土台の揺らぐことのないウェブサイトを構築するチャート本書は Web デザインの「型」の説明をしてくれています実は、ユニバーサルなユーザビリティの解説本 Web の本質はアクセシビリティ

Slide 90

Slide 90 text

どのプロセスにもポイントがある Web に関わる全ての人に関係がある Web に関わるどんな人にもできることがある少しの取り組みでも劇的に改善する可能性がある

Slide 91

Slide 91 text

アクセシビリティはゼロか 100 かではないガイドラインの全ての施策を完璧に実施しても、全てのアクセスが完全に保証されるわけではないある特定の施策ができないからといって、他の施策が無駄なわけではないし、取り組みの全てが無駄になるわけでもない