2017年11月11日の「Japan Accessibility Conference vol.1」登壇で使用したスライドです。 https://japan-a11y-conf.com/ https://connpass.com/event/68762/

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

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

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

6. アクセシビリティとは

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

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

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

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

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

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

13. 製品・サービス
価値
Web

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

15. Intertwingled
http://intertwingled.org/jp/

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

17. remote control pig pile
https://www.flickr.com/photos/redjar/136216456/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

57. 流入
例：ナビゲーション

58. 流入
例：テキストライティング

59. 流入
例：テキストライティング

60. 流入
例：フォーム最適化

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

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

65. https://calil.jp/

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

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

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

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

76. アクセシビリティ
＝利益につながる

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

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

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

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

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

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

88. どこからはじめるか

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

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

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

92. The Final Hamburger A/B Test
http://sitesforprofit.com/menu‑eats‑hamburger

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

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

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

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

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

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

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

101. おわりに

102. 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

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

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

105. さあ、次の一歩を踏み出そう！

106. ありがとうございました
@magi1125
facebook.com/rikiya.ihara