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

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（ティフェン）
   

   View Slide

2. ◉ Android エンジニア
   ◉ メドピア株式会社（kakari）
   @tahia910
   2
   Tiphaine（ティフェン）
   

   View Slide

3. 3
   アクセシビリティとの出会い
   

   View Slide

4. 4
   自分でアプリを作る事が楽しい
   

   View Slide

5. 5
   使いづらいぞ
   フィードバックを聞いて
   改善し続くプロセスも好き
   

   View Slide

6. 6
   🤔
   😨
   自分の感覚に頼れない。。。
   どうすれば体験が良くなる？
   

   View Slide

7. 7
   プロダクト志向で
   モノづくりが好きな人なら
   いずれ辿り着く
   

   View Slide

8. “
   なぜ会社でアクセシビリティが
   注目されない
   8
   ?
   

   View Slide

9. ◉ クレームのイメージが強くて嫌な印象
   ◉ 向き合い方が分からない
   ◉ 問題を放置する危険性が明確ではない
   ◉ タスクを増やされたくない
   9
   チャレンジ
   参考：Deque Systems
   

   View Slide

10. “
    彼を知り　己を知れば
    百戦危うからず
    10
    

    View Slide

11. 課題と、それに対する向き合い方
    What?
    11
    1
    

    View Slide

12. 障害の種類
    12
    視覚
    認知/神経
    運動
    聴覚
    

    View Slide

13. ◉ 色が区別しづらい
    ◉ テキストを読めない
    ◉ 画面が見えない
    13
    問題：視覚系
    

    View Slide

14. ◉ ボタンを正確に押せない
    ◉ 複雑な操作がしづらい
    ◉ タッチ画面が使えない
    14
    問題：運動系
    

    View Slide

15. ◉ 長文が読みづらい
    ◉ 文字が理解しづらい
    ◉ UIを理解できない
    15
    問題：認知系
    

    View Slide

16. ◉ 聞き取りづらい
    ◉ 音を認知できない
    ◉ 字幕がないと理解できない
    16
    問題：視覚系
    

    View Slide

17. ◉ 文字拡大
    ◉ 色調補正
    ◉ スクリーンリーダー
    支援技術
    17
    点字ディスプレイ
    参考：Emerald Coast
    

    View Slide

18. 支援技術
    18
    ◉ 表示拡大
    ◉ 音声入力/音声操作
    ◉ スイッチ・アクセス
    参考：Google
    

    View Slide

19. 19
    他にも色々あります！
    全部覚えられない😱
    

    View Slide

20. “
    20
    ガイドラインに従うだけで
    解決できる
    

    View Slide

21. WCAG 2.0
    ◉ ウェブ・コンテンツ・アクセシビリティ・ガイドライ
    ン 2.0
    ◉ W3Cの勧告ガイドライン
    ◉ 内容は対応すべき要件のリスト
    21
    

    View Slide

22. ４つの原則
    1. 知覚可能（perceivable）
    2. 操作可能（operable）
    3. 理解可能（understandable）
    4. 堅牢性（robust）
    22
    

    View Slide

23. 適合レベル
    23
    A シングルA 25項目 最低限
    AA ダブルA 13項目 好ましい
    AAA トリプルA 23項目 最上級
    

    View Slide

24. JIS X 8341-3:2016
    ◉ 国内の基準規格
    ◉ モバイル端末向けのコンテンツも対象
    24
    「JIS X 8341-3:2016 適合レベルAA準拠」
    記載を目指す✊
    

    View Slide

25. 先輩たちの解読メモ
    ◉ サイバーエージェント
    ◉ freee
    ◉ MDN
    ◉ 弊社も作成中󰢜
    25
    参考：CyberAgent, freee, MDN
    

    View Slide

26. 26
    デジタル庁の解読メモ
    参考：デジタル庁（1 / 2)
    ◉ 2022年に導入ガイドブックを公開
    ◉ WCAG解読に加えて取り組み方も紹介
    ◉ 解説動画も公開予定
    

    View Slide

27. ◉ クレームのイメージが強くて嫌な印象
    ◉ 向き合い方が分からない
    ◉ 問題を放置する危険性が明確ではない
    ◉ タスクを増やされたくない
    27
    チャレンジ
    参考：Deque Systems
    

    View Slide

28. Why？
    ビジネスにとっての価値と危険性
    2
    28
    

    View Slide

29. ブランディング
    ◉ 会社のイメージ向上✨
    ◉ 業界の動向で当たり前になる
    ◉ 競合サービスとの差別化要因
    29
    

    View Slide

30. 期待に応える
    ◉ ロイヤル・カスタマーを増やす
    ◉ 家族や友達への宣伝
    ◉ SNSでの炎上を避ける
    30
    

    View Slide

31. ◉ ガイドラインがあるとコードが綺麗に
    ◉ コンポーネント使い回しで、生産性🆙
    ◉ UIテストの実装が勧められる
    開発者の環境改善
    31
    

    View Slide

32. 32
    ユーザビリティ
    アクセシビリティ
    参考：BAsixs
    満足
    安心
    利用
    アクセス
    しやすさ
    

    View Slide

33. 33
    参考：内閣府
    （万人）
    日本の将来推計人口
    37%
    

    View Slide

34. 2050年の高齢者は今の30代後半
    全員スマホに慣れた人
    34
    

    View Slide

35. ユーザー層の変化
    ◉ 日本の総人口が縮む
    ◉ 現在のユーザーが老けていく
    ◉ 加齢による問題は65歳前から始まる
    35
    

    View Slide

36. “
    生存者バイアス：
    選択過程を通過した人が判断を行うから、
    通過しなかった人が見えなくなる
    36
    

    View Slide

37. 37
    アクセシビリティ対応をしない
    障害者に利用できない
    “考慮する必要がない”
    マイノリティだと思
    われる
    数字に出ない
    (+ 社会的認知度が低い)
    参考：pacingpixie, HubSpot
    

    View Slide

38. 数字に見えない人
    ◉ 自分は無関係だと思えば、見えなくなる
    ◉ 社会のプレッシャーで、言えない人
    ◉ そもそも政府の数字と対象が違う
    38
    

    View Slide

39. 全てのユーザーのため
    ◉ 「障害者 vs 健常者」ではない
    ◉ 一時的/状況的障害で健常者も困る
    ◉ “Don’t assume anything”
    39
    

    View Slide

40. 40
    参考：Scope, W3C
    ◉ 視覚障害者のために別のサイトを作る
    ◉ ナビゲーション、コンポーネント階層、言葉を
    より簡単に、余計な画像も減らす
    事例①：Tesco
    

    View Slide

41. 41
    参考：Scope, W3C
    ◉ 障害のないユーザーにも大人気
    ◉ モバイルや接続の悪い状態でも使いやすい
    ◉ 3万6千ポンドの初期費用に対して、
    年1300万ポンドの収益
    事例①：Tesco 結果
    

    View Slide

42. 42
    参考：Scope, W3C
    ◉ サイトを分けるのは非推奨 ⚠
    ◉ 元のプロダクトを改善したら、全て
    のユーザーに喜ばれる
    事例①：Tesco 注意
    

    View Slide

43. 参考：Scope, W3C, Bruce Lawson, Mike Davies 43
    ◉ アクセシビリティ監査
    ◉ 障害者によるユーザビリティテスト
    ◉ アクセシブルなデザインへ
    事例②：Legal&General
    

    View Slide

44. 事例②：Legal&General 結果
    44
    参考：Scope, W3C, Bruce Lawson, Mike Davies
    ◉ オーガニック流入が倍に増えた🎉
    ◉ 運用コストが66%減った
    ◉ サイト経由での保険加入が90%増加
    

    View Slide

45. より良いプロダクトへ
    ◉ 制約を与えると創造性が上がる
    ◉ スキルが高くなって品質向上に繋がる
    45
    BAD DESIGNS DISABLE PEOPLE
    参考：btrax
    

    View Slide

46. 46
    (󰑔) webアクセシビリティ関連訴訟
    参考：UsableNet
    🤔
    

    View Slide

47. 47
    参考：UsableNet
    (󰑔) 5年間で、1万６千件の訴訟
    催告状は5万件以上
    

    View Slide

48. 48
    参考：Accessi.org, WhoisAccessible.com, Level Access, LFLegal
    (󰑔) 様々な業界で敗訴事例がある
    ドミノ・ピザ、Netflix、ハーバード大学、
    アマゾン、Nike、ビヨンセ、
    HSBC、EA、Foxニュース...
    ドミノ・ピザ、Netflix、ハーバード大学、
    アマゾン、Nike、ビヨンセ、
    HSBC、EA、Foxニュース...
    

    View Slide

49. 49
    ◉ 訴訟に至る前に対応するようになった
    ◉ 同じ業界で敗訴事例がある可能性は高い
    ◉ アメリカだけではない
    海外では当たり前
    参考：W3C
    

    View Slide

50. 日本の法律にも求められる
    50
    参考：内閣府
    2021年に障害者差別解消法が改正され、
    民間事業者も義務化へ
    

    View Slide

51. ◉ クレームのイメージが強くて嫌な印象
    ◉ 向き合い方が分からない
    ◉ 問題を放置する危険性が明確ではない
    ◉ タスクを増やされたくない
    51
    チャレンジ
    参考：Deque Systems
    

    View Slide

52. 取り込みの流れ
    How?
    52
    3
    

    View Slide

53. 53
    企画 & 分析
    設計
    実装
    テスト
    運用・保守
    全ての段階で確認したい
    参考：TPGi
    

    View Slide

54. Roadmap
    54
    1
    観察
    

    View Slide

55. 観察
    ◉ どれぐらい注目されているか？
    ◉ 担当アプリの現状はどうか？
    ◉ 意思決定者は誰か？
    ◉ 仲間はいるか？
    55
    

    View Slide

56. Roadmap
    56
    1
    観察
    2
    勉強
    

    View Slide

57. 勉強
    ◉ 基礎知識（対象、問題、支援技術）
    ◉ アクセシビリティの重要性
    ◉ WCAG解読
    ◉ インクルーシブデザイン
    57
    

    View Slide

58. Roadmap
    58
    1
    2
    観察
    3
    具体化
    勉強
    

    View Slide

59. 59
    具体化
    ◉ 達成可能で小刻みな目標を設定する
    ◉ 問題を特定して、チケットを作る
    ◉ ↑ 優先度を決めて、消化する
    参考：W3C, Web担当者Forum / 弁護士ドットコム
    

    View Slide

60. “
    60
    やれる範囲で、少しずつ、
    継続的に
    

    View Slide

61. ◉ 小さくてやりやすい変更から始める
    ◉ 1スプリントに小さいチケット1件など
    ◉ 既存プロセスにチェックを入れ込む
    61
    長期的に続くため
    

    View Slide

62. Roadmap
    62
    1 3
    2
    観察 具体化
    勉強
    4
    実装
    

    View Slide

63. 63
    WCAG知覚可能のAレベル項目
    TalkBack対応のみ
    全画面対応、リリース済み 🎉
    WCAG知覚可能のAレベル項目
    kakari for Clinic
    

    View Slide

64. Roadmap
    64
    1 3
    4
    2
    観察 具体化
    5
    運用
    勉強 実装
    

    View Slide

65. 記録と教育
    ◉ チェックリスト
    ◉ トレーニング
    ◉ 社内ガイドライン
    ◉ ポリシー
    65
    

    View Slide

66. 進捗管理
    支援技術利用のトラッキングは 🆖
    66
    参考：AdrianRoselli, W3C, Mightybytes, StackExchange, Léonie Watson
    

    View Slide

67. 進捗管理
    ◉ 達成したWCAG項目の数
    ◉ 事前に設定した目標
    ◉ チケットの消化
    ◉ アクセシビリティ関連問い合わせの数
    67
    

    View Slide

68. ◉ 人はあなた自身を否定していない
    ◉ 仲間を増やそう
    ◉ 無駄なプレッシャーを減らす
    ◉ 影響力のある人のサポートを求めよう
    68
    人間関係について
    

    View Slide

69. Roadmap
    69
    1 3 5
    4
    2
    観察 具体化 運用
    勉強 実装
    6
    情報配信
    

    View Slide

70. 情報発信
    ◉ 社内で進捗を共有する
    ◉ お客さんに変更を知らせる
    ◉ フィードバックをもらう
    70
    

    View Slide

71. 日常の小さな思いやり
    ◉ SNSで情報を共有するだけでも充分👍
    ◉ 投稿する時に配慮する
    71
    

    View Slide

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
    

    View Slide

73. Thanks!
    73
    テーマ：SlidesCarnival
    Special thanks:
    @purunkaoru
    @y2kit_1127
    @Gabrielle_Lng
    

    View Slide