Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
あなたの価値を高める
Webアクセシビリティ
2019.06.01
Rikiya Ihara / freee K.K.
Slide 3
Slide 3 text
伊原 力也
@magi1125
freee プロダクトマネジャー, UXデザイナー
ウェブアクセシビリティ基盤委員会 WG1委員
HCD‑Net 評議委員、認定人間中心設計専門家
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
findability
portability
usability
shareability
hackability
頑健:存在が維持される
発見:特定できる、探し出せる
携帯:持ち運べる、呼び出せる
使用: 知覚・理解・操作、目的達成
共有: 誰かに渡せる、共有できる
改変: 加工できる、再利用できる
Slide 12
Slide 12 text
製品・サービス
価値
Web
Slide 13
Slide 13 text
http://www.ric.co.jp/book/contents/pdfs/893_6_1.pdf
Slide 14
Slide 14 text
アクセシビリティ
＝使えるかどうか？
使いやすいか
使えるか
Accessible Usable
Slide 15
Slide 15 text
remote control pig pile
https://www.flickr.com/photos/redjar/136216456/
Slide 16
Slide 16 text
1 ２
３ ４
Slide 17
Slide 17 text
ISO 9241‑11 のユーザビリティ定義
特定の目的を達成するために、
特定の利用者が、特定の利用状況で、
有効性、効率性、そして満足とともに
ある製品を利用することができる度合い。
Slide 18
Slide 18 text
様々な能力を持つ幅広い層の人々に対する、
製品、サービス、環境または施設のユーザビリティ。
ISO 9241‑20 のアクセシビリティ定義
Slide 19
Slide 19 text
ユーザビリティ アクセシビリティ
Use
Use
ある状況での使える度 使える度合いの幅広さ
Slide 20
Slide 20 text
アクセシビリティ
＝障害者・高齢者対応？
Slide 21
Slide 21 text
腱鞘炎でマウスが持てない
Bluetoothイヤホンが電池切れ
子どもにメガネを壊された
Slide 22
Slide 22 text
Web Content Accessibility Guidelines (WCAG) 2.0
イントロダクション：
しばしば利用者全般の
ユーザビリティを向上させる。
Slide 23
Slide 23 text
アクセシビリティ
＝ユーザビリティの幅広さ
Slide 24
Slide 24 text
Webアクセシビリティの解剖
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
素人とは違う、Webプロフェッショナルの
仕事としてのWebコンテンツ開発を考えてみた
http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727
Slide 28
Slide 28 text
ヒューマンリーダブル
人の目で見やすいか、わかりやすいか
ひとつの表現で幅広く使えるようにする
物理的な製品のユニバーサルデザインに近い
Slide 29
Slide 29 text
コンテンツを、利用者にとって見やすく、聞きやすいものにすること。
これには、前景と背景を区別することも含む。
1.4 判別可能
1. 知覚可能
Slide 30
Slide 30 text
利用者がナビゲートしたり、コンテンツを探し出したり、
現在位置を確認したりすることを手助けする手段を提供すること。
2.4 ナビゲーション可能
発作を引き起こすようなコンテンツを設計しないこと。
2.3 発作の防止
利用者がコンテンツを読み、使用するために十分な時間を提供すること。
2.2 十分な時間
2: 操作可能
Slide 31
Slide 31 text
テキストのコンテンツを読みやすく理解可能にすること。
ウェブページの表示や挙動を予測可能にすること。
利用者の間違いを防ぎ、修正を支援すること。
3.1 読みやすさ
3.2 予測可能
3.3 入力支援
3: 理解可能
Slide 32
Slide 32 text
モバイルの利用状況から来るデザインヒント
必要十分な表現にとどめる
チラ見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じことができる
時間軸を使って情報を整理する
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
サイボウズの組織的な取り組みと
ビジュアルデザイン
小林 大輔 ＆ 樋田 勇也
Slide 37
Slide 37 text
UI
幅広い状況でのヒューマンリーダビリティ
≒アクセシビリティ
特定状況でのユーザビリティ
＝いわゆるユーザビリティ
Slide 38
Slide 38 text
マシンリーダブル
プログラムが解釈できるか
様々な形に変換して幅広く使えるようにする
Webならではのアプローチ
Slide 39
Slide 39 text
ヒューマンリーダブル
ひとつのものでは
対応範囲に限界がある
マシンリーダブル
WCAG 2.0 レベルA
必ず満たすべきもの
Slide 40
Slide 40 text
No content
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
辻ちゃん・ウエちゃんのアクセシブル GO GO!!
「スクリーンリーダーで『Backlog』を使ってみる」の巻
辻 勝利 ＆ 植木 真
Slide 45
Slide 45 text
ブラウザや支援技術で
状況に適した表現に変えられること
Webアクセシビリティの重要なポイント
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
可能性を保つ
マシン
リーダビリティ
網を張る
ヒューマン
リーダビリティ
狙い撃つ
ユーザビリティ
Web
Slide 50
Slide 50 text
Webアクセシビリティの誤解
Slide 51
Slide 51 text
アクセシビリティ
＝売りにつながらない？
Slide 52
Slide 52 text
遷移・回遊
コンバージョン
利用開始
流入
理解
申込
分母へのアプローチ
デザイン側での唯一のアプローチ手段
65歳以上の利用が16.4％（1,653万人）
障害者の利用率は高い（82.7～93.4%）
流入を増やす？アクセシブルにする？
Slide 53
Slide 53 text
遷移・回遊
コンバージョン
利用開始
流入
理解
申込
各段階へのアプローチ
WCAG2.0 に含まれる内容：
ナビゲーションのガイドライン
ライティングのガイドライン
フォーム最適化のガイドライン
Slide 54
Slide 54 text
流入
例：ナビゲーション
Slide 55
Slide 55 text
流入
例：テキストライティング
Slide 56
Slide 56 text
流入
例：フォーム最適化
Slide 57
Slide 57 text
アクセシビリティ
＝売りにつながる
Slide 58
Slide 58 text
アクセシビリティ
＝守りのイメージ？
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
https://calil.jp/
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
誰もが隣にいる人と一緒に楽しむために
松森 果林
Slide 67
Slide 67 text
アクセシビリティ
＝攻めの一手
Slide 68
Slide 68 text
アクセシビリティ
＝コストが増える？
Slide 69
Slide 69 text
http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
個別対応が減る → コスト削減＆品質の安定
コンポーネント
テンプレート
一貫性、再利用性
アクセシビリティ
幅広い環境に
全体最適化
Slide 73
Slide 73 text
No content
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
インクルーシブネスを超えて
木達 一仁
Slide 83
Slide 83 text
アクセシビリティ
＝はじめるなら今！
Slide 84
Slide 84 text
どこからはじめるか
Slide 85
Slide 85 text
マシンとヒューマンの架け橋は
「テキスト」
Slide 86
Slide 86 text
伝わる可能性が一番高いUI「テキスト」
Webコンテンツのほとんどは「テキスト」
検索に使うのも「テキスト」
書き込むのも「テキスト」
Slide 87
Slide 87 text
http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/
Slide 88
Slide 88 text
https://blogs.msdn.microsoft.com/jensenh/2005/11/01/the‑importance‑of‑labels/
https://blogs.msdn.microsoft.com/jensenh/2005/09/15/enter‑the‑ribbon/
Slide 89
Slide 89 text
設計・デザインの段階でテキストを意識
「ヒューマンリーダブル」な形で
わかりやすく、構造を持ったテキストを出す
Slide 90
Slide 90 text
マシンリーダブルは
テキストがあればこそ
テキストが無ければマークアップはできない（！）
構造を持つテキストあれば、マークアップは難しくない
Slide 91
Slide 91 text
『代替テキスト決定ツリー』の使い方
澤田 望
Slide 92
Slide 92 text
可能性を保つ
マシン
リーダビリティ
網を張る
ヒューマン
リーダビリティ
狙い撃つ
ユーザビリティ
Web
Slide 93
Slide 93 text
一人でなくチームで取り組もう
Slide 94
Slide 94 text
方針があれば、はじめからチームで取り組める
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
おわりに
Slide 97
Slide 97 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
Slide 98
Slide 98 text
Q
アクセシビリティに
何かしら取り組んでいる？
Slide 99
Slide 99 text
A
この場にいる全員が
実は取り組んでいる
Slide 100
Slide 100 text
さあ、次の一歩を踏み出そう！
Slide 101
Slide 101 text
ありがとうございました
@magi1125
facebook.com/rikiya.ihara