社内でできるアクセシビリティのはじめかた

Developers Summit 2023 - Day 2 (2023/2/10)
https://event.shoeisha.jp/devsumi/20230209/session/4203/

DroidKaigi 2022とWomen Developers Summit 2022で話した内容を更にブラッシュアップしたバージョン

読みにくい場合：
https://docs.google.com/presentation/d/1d4tJhHwbLc0-pphj2umsadd4RB9A_lwKu4m3ON7PubM/

Transcript

1. 社内でできる アクセシビリティのはじめかた 　　 Developers Summit 2023 Tiphaine（ティフェン）
2. ◉ Android エンジニア ◉ メドピア株式会社（kakari） @tahia910 2 Tiphaine（ティフェン）
3. 3 アクセシビリティとの出会い
4. 4 自分でアプリを作る事が楽しい
5. 5 使いづらいぞ フィードバックを聞いて 改善し続くプロセスも好き
6. 6 🤔 😨 自分の感覚に頼れない。。。 どうすれば体験が良くなる？
7. 7 プロダクト志向で モノづくりが好きな人なら いずれ辿り着く
8. “ なぜ会社でアクセシビリティが 注目されない 8 ?
9. ◉ クレームのイメージが強くて嫌な印象 ◉ 向き合い方が分からない ◉ 問題を放置する危険性が明確ではない ◉ タスクを増やされたくない 9 チャレンジ 参考：Deque Systems
10. “ 彼を知り　己を知れば 百戦危うからず 10
11. 課題と、それに対する向き合い方 What? 11 1
12. 障害の種類 12 視覚 認知/神経 運動 聴覚
13. ◉ 色が区別しづらい ◉ テキストを読めない ◉ 画面が見えない 13 問題：視覚系
14. ◉ ボタンを正確に押せない ◉ 複雑な操作がしづらい ◉ タッチ画面が使えない 14 問題：運動系
15. ◉ 長文が読みづらい ◉ 文字が理解しづらい ◉ UIを理解できない 15 問題：認知系
16. ◉ 聞き取りづらい ◉ 音を認知できない ◉ 字幕がないと理解できない 16 問題：視覚系
17. ◉ 文字拡大 ◉ 色調補正 ◉ スクリーンリーダー 支援技術 17 点字ディスプレイ 参考：Emerald Coast
18. 支援技術 18 ◉ 表示拡大 ◉ 音声入力/音声操作 ◉ スイッチ・アクセス 参考：Google
19. 19 他にも色々あります！ 全部覚えられない😱
20. “ 20 ガイドラインに従うだけで 解決できる
21. WCAG 2.0 ◉ ウェブ・コンテンツ・アクセシビリティ・ガイドライ ン 2.0 ◉ W3Cの勧告ガイドライン ◉ 内容は対応すべき要件のリスト 21
22. ４つの原則 1. 知覚可能（perceivable） 2. 操作可能（operable） 3. 理解可能（understandable） 4. 堅牢性（robust） 22
23. 適合レベル 23 A シングルA 25項目 最低限 AA ダブルA 13項目 好ましい AAA トリプルA 23項目 最上級
24. JIS X 8341-3:2016 ◉ 国内の基準規格 ◉ モバイル端末向けのコンテンツも対象 24 「JIS X 8341-3:2016 適合レベルAA準拠」 記載を目指す✊
25. 先輩たちの解読メモ ◉ サイバーエージェント ◉ freee ◉ MDN ◉ 弊社も作成中󰢜 25 参考：CyberAgent, freee, MDN
26. 26 デジタル庁の解読メモ 参考：デジタル庁（1 / 2) ◉ 2022年に導入ガイドブックを公開 ◉ WCAG解読に加えて取り組み方も紹介 ◉ 解説動画も公開予定
27. ◉ クレームのイメージが強くて嫌な印象 ◉ 向き合い方が分からない ◉ 問題を放置する危険性が明確ではない ◉ タスクを増やされたくない 27 チャレンジ 参考：Deque Systems
28. Why？ ビジネスにとっての価値と危険性 2 28
29. ブランディング ◉ 会社のイメージ向上✨ ◉ 業界の動向で当たり前になる ◉ 競合サービスとの差別化要因 29
30. 期待に応える ◉ ロイヤル・カスタマーを増やす ◉ 家族や友達への宣伝 ◉ SNSでの炎上を避ける 30
31. ◉ ガイドラインがあるとコードが綺麗に ◉ コンポーネント使い回しで、生産性🆙 ◉ UIテストの実装が勧められる 開発者の環境改善 31
32. 32 ユーザビリティ アクセシビリティ 参考：BAsixs 満足 安心 利用 アクセス しやすさ
33. 33 参考：内閣府 （万人） 日本の将来推計人口 37%
34. 2050年の高齢者は今の30代後半 全員スマホに慣れた人 34
35. ユーザー層の変化 ◉ 日本の総人口が縮む ◉ 現在のユーザーが老けていく ◉ 加齢による問題は65歳前から始まる 35
36. “ 生存者バイアス： 選択過程を通過した人が判断を行うから、 通過しなかった人が見えなくなる 36
37. 37 アクセシビリティ対応をしない 障害者に利用できない “考慮する必要がない” マイノリティだと思 われる 数字に出ない (+ 社会的認知度が低い) 参考：pacingpixie, HubSpot
38. 数字に見えない人 ◉ 自分は無関係だと思えば、見えなくなる ◉ 社会のプレッシャーで、言えない人 ◉ そもそも政府の数字と対象が違う 38
39. 全てのユーザーのため ◉ 「障害者 vs 健常者」ではない ◉ 一時的/状況的障害で健常者も困る ◉ “Don’t assume anything” 39
40. 40 参考：Scope, W3C ◉ 視覚障害者のために別のサイトを作る ◉ ナビゲーション、コンポーネント階層、言葉を より簡単に、余計な画像も減らす 事例①：Tesco
41. 41 参考：Scope, W3C ◉ 障害のないユーザーにも大人気 ◉ モバイルや接続の悪い状態でも使いやすい ◉ 3万6千ポンドの初期費用に対して、 年1300万ポンドの収益 事例①：Tesco 結果
42. 42 参考：Scope, W3C ◉ サイトを分けるのは非推奨 ⚠ ◉ 元のプロダクトを改善したら、全て のユーザーに喜ばれる 事例①：Tesco 注意
43. 参考：Scope, W3C, Bruce Lawson, Mike Davies 43 ◉ アクセシビリティ監査 ◉ 障害者によるユーザビリティテスト ◉ アクセシブルなデザインへ 事例②：Legal&General
44. 事例②：Legal&General 結果 44 参考：Scope, W3C, Bruce Lawson, Mike Davies ◉ オーガニック流入が倍に増えた🎉 ◉ 運用コストが66%減った ◉ サイト経由での保険加入が90%増加
45. より良いプロダクトへ ◉ 制約を与えると創造性が上がる ◉ スキルが高くなって品質向上に繋がる 45 BAD DESIGNS DISABLE PEOPLE 参考：btrax
46. 46 (󰑔) webアクセシビリティ関連訴訟 参考：UsableNet 🤔
47. 47 参考：UsableNet (󰑔) 5年間で、1万６千件の訴訟 催告状は5万件以上
48. 48 参考：Accessi.org, WhoisAccessible.com, Level Access, LFLegal (󰑔) 様々な業界で敗訴事例がある ドミノ・ピザ、Netflix、ハーバード大学、 アマゾン、Nike、ビヨンセ、 HSBC、EA、Foxニュース... ドミノ・ピザ、Netflix、ハーバード大学、 アマゾン、Nike、ビヨンセ、 HSBC、EA、Foxニュース...
49. 49 ◉ 訴訟に至る前に対応するようになった ◉ 同じ業界で敗訴事例がある可能性は高い ◉ アメリカだけではない 海外では当たり前 参考：W3C
50. 日本の法律にも求められる 50 参考：内閣府 2021年に障害者差別解消法が改正され、 民間事業者も義務化へ
51. ◉ クレームのイメージが強くて嫌な印象 ◉ 向き合い方が分からない ◉ 問題を放置する危険性が明確ではない ◉ タスクを増やされたくない 51 チャレンジ 参考：Deque Systems
52. 取り込みの流れ How? 52 3
53. 53 企画 & 分析 設計 実装 テスト 運用・保守 全ての段階で確認したい 参考：TPGi
54. Roadmap 54 1 観察
55. 観察 ◉ どれぐらい注目されているか？ ◉ 担当アプリの現状はどうか？ ◉ 意思決定者は誰か？ ◉ 仲間はいるか？ 55
56. Roadmap 56 1 観察 2 勉強
57. 勉強 ◉ 基礎知識（対象、問題、支援技術） ◉ アクセシビリティの重要性 ◉ WCAG解読 ◉ インクルーシブデザイン 57
58. Roadmap 58 1 2 観察 3 具体化 勉強
59. 59 具体化 ◉ 達成可能で小刻みな目標を設定する ◉ 問題を特定して、チケットを作る ◉ ↑ 優先度を決めて、消化する 参考：W3C, Web担当者Forum / 弁護士ドットコム
60. “ 60 やれる範囲で、少しずつ、 継続的に
61. ◉ 小さくてやりやすい変更から始める ◉ 1スプリントに小さいチケット1件など ◉ 既存プロセスにチェックを入れ込む 61 長期的に続くため
62. Roadmap 62 1 3 2 観察 具体化 勉強 4 実装
63. 63 WCAG知覚可能のAレベル項目 TalkBack対応のみ 全画面対応、リリース済み 🎉 WCAG知覚可能のAレベル項目 kakari for Clinic
64. Roadmap 64 1 3 4 2 観察 具体化 5 運用 勉強 実装
65. 記録と教育 ◉ チェックリスト ◉ トレーニング ◉ 社内ガイドライン ◉ ポリシー 65
66. 進捗管理 支援技術利用のトラッキングは 🆖 66 参考：AdrianRoselli, W3C, Mightybytes, StackExchange, Léonie Watson
67. 進捗管理 ◉ 達成したWCAG項目の数 ◉ 事前に設定した目標 ◉ チケットの消化 ◉ アクセシビリティ関連問い合わせの数 67
68. ◉ 人はあなた自身を否定していない ◉ 仲間を増やそう ◉ 無駄なプレッシャーを減らす ◉ 影響力のある人のサポートを求めよう 68 人間関係について
69. Roadmap 69 1 3 5 4 2 観察 具体化 運用 勉強 実装 6 情報配信
70. 情報発信 ◉ 社内で進捗を共有する ◉ お客さんに変更を知らせる ◉ フィードバックをもらう 70
71. 日常の小さな思いやり ◉ SNSで情報を共有するだけでも充分👍 ◉ 投稿する時に配慮する 71
72. 参考 ◉ Pragmatic Accessibility: A How-To Guide for Teams (Google I/O '17) - Google Developers ◉ Android Accessibility by Tutorials - Victoria Gonda ◉ noteアクセシビリティ施策 - note ◉ Ameba Pickのアクセシビリティ向上への取り込みに ついて - CyberAgent 72
73. Thanks! 73 テーマ：SlidesCarnival Special thanks: @purunkaoru @y2kit_1127 @Gabrielle_Lng