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

Slide 1

Slide 1 text

あなたの価値を高める Webアクセシビリティ 2017.11.11 / Japan Accessibility Conference vol.1 Rikiya Ihara / freee K.K.

Slide 2

Slide 2 text

伊原力也 @magi1125 freee IA/UX ウェブアクセシビリティ基盤委員会 WG1委員 HCD‑Net 評議委員、認定人間中心設計専門家

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

本日の流れアクセシビリティとは Webアクセシビリティの解剖 Webアクセシビリティの誤解どこからはじめるか

Slide 6

Slide 6 text

アクセシビリティとは

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

robustness ﬁndability portability usability shareability hackability 頑健:存在が維持される発見:特定できる、探し出せる携帯:持ち運べる、呼び出せる使用: 知覚・理解・操作、目的達成共有: 誰かに渡せる、共有できる改変: 加工できる、再利用できる

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

製品・サービス価値 Web

Slide 14

Slide 14 text

http://www.ric.co.jp/book/contents/pdfs/893_6_1.pdf

Slide 15

Slide 15 text

Intertwingled http://intertwingled.org/jp/

Slide 16

Slide 16 text

アクセシビリティ＝使えるかどうか？使いものになるか使えるか accessible usable

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

A‑2 アクセシビリティ・ガイドラインの歩き方（初心者編） 15:20 ‑ 16:00 / Room A もんど／太田良典

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ヒューマンリーダブルひとつのものでは対応範囲に限界があるマシンリーダブル WCAG 2.0 レベルA 必ず満たすべきもの

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

A‑3 アクセシビリティ検証ツールとしてのNVDA入門 16:20 ‑ 17:00 / Room A NVDA日本語チーム西本卓也

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

ブラウザや支援技術で状況に適した表現に変えられること Webアクセシビリティの重要なポイント

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

最も多くの人に伝わる表現方法は「テキスト」それをマークアップすると機械が解釈できるようになる使い方に応じ、プログラムを通して変換可能になるこれがWebアクセシビリティの根幹

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

流入例：ナビゲーション

Slide 58

Slide 58 text

流入例：テキストライティング

Slide 59

Slide 59 text

流入例：テキストライティング

Slide 60

Slide 60 text

流入例：フォーム最適化

Slide 61

Slide 61 text

アクセシビリティ＝売りにつながる

Slide 62

Slide 62 text

アクセシビリティ＝守りのイメージ？

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

https://calil.jp/

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

アクセシビリティ＝攻めの一手

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

個別対応が減る → コスト削減＆品質の安定コンポーネントテンプレート一貫性、再利用性アクセシビリティ幅広い環境に全体最適化

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

アクセシビリティ＝利益につながる

Slide 77

Slide 77 text

アクセシビリティ＝いまは必要ない？

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

各国で進む法整備 Section 508, ADA, ACAA EN 301 549 障害者差別禁止法 AODA

Slide 82

Slide 82 text

B‑3 アクセシビリティに対する WordPress の責任について 16:20 ‑ 17:00 / Room B 合同会社ロックロブスター三好隆之

Slide 83

Slide 83 text

A‑4 日本最大級のトラフィックを操る企業を動かす障害当事者の声。 17:20 ‑ 18:00 / Room A ヤフー株式会社中野信／ AccSell 中根雅文

Slide 84

Slide 84 text

B‑4 メディア事業でのアクセシビリティ展開事例・CAではこうやってます 17:20 ‑ 18:00 / Room B 株式会社サイバーエージェント桝田草一・土岐真里奈

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

アクセシビリティ＝はじめるなら今！

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

どこからはじめるか

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

マシンリーダブルはテキストがあればこそテキストが無ければマークアップはできない（！）構造を持つテキストあれば、マークアップは難しくない

Slide 95

Slide 95 text

WCAG2.0 レベルAでやるべきこと：3つ 1. テキストだけでわかるように書く 2. それを適切にマークアップする 3. 勝手に動かさない、チカチカさせない

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

一人でなくチームで取り組もう

Slide 98

Slide 98 text

方針があれば、はじめからチームで取り組める

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

B‑2 チームで取り組む！アクセシビリティコーディング・デザイン 15:20 ‑ 16:00 / Room B サイボウズ株式会社小林大輔／ Cocktailz 伊敷政英

Slide 101

Slide 101 text

おわりに

Slide 102

Slide 102 text

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Webのパワーは、その普遍性にある。障害の有無に関係なく、誰もが使えることが、その本質である。 Webの本質はアクセシビリティ Tim Berners‑Lee, W3C Director and inventor of the World Wide Web