$30 off During Our Annual Pro Sale. View Details »

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

Tiphaine
February 10, 2023

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

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

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

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

Tiphaine

February 10, 2023
Tweet

More Decks by Tiphaine

Other Decks in Technology

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. 4つの原則
    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万6千件の訴訟
    催告状は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