Upgrade to Pro — share decks privately, control downloads, hide ads and more …

社内でのアクセシビリティ推進

Tiphaine
October 05, 2022

 社内でのアクセシビリティ推進

Tiphaine

October 05, 2022
Tweet

More Decks by Tiphaine

Other Decks in Technology

Transcript

  1. 社内での
    アクセシビリティ推進
      
    DroidKaigi 2022
    Tiphaine(ティフェン)

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  6. 課題と向き合い方
    What?
    6
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ◉ 文字拡大
    ◉ 色調補正
    ◉ TalkBack
    支援技術
    12
    点字ディスプレイ
    参考:Emerald Coast

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  17. 4つの原則
    1. 知覚可能(perceivable)
    2. 操作可能(operable)
    3. 理解可能(understandable)
    4. 堅牢性(robust)
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 先輩たちの解読メモ
    ◉ サイバーエージェント
    ◉ Freee
    ◉ MDN
    ◉ 弊社も作成中󰢜
    20

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 27
    参考:内閣府
    (万人)
    日本の将来推計人口
    37%

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 30
    参考:総務省 (1 / 2)
    (󰏦) インターネットの利用状況 (%)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Roadmap
    40
    1
    観察

    View full-size slide

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

    View full-size slide

  42. Roadmap
    42
    1
    観察
    2
    勉強

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 49
    WCAG知覚可能のAレベル項目
    スクリーンリーダー対応のみ
    無事にリリース😭✨
    WCAG知覚可能のAレベル項目
    kakari for Clinic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 進捗管理
    支援技術利用のトラッキングは 🆖
    52
    参考:AdrianRoselli, W3C, Mightybytes, StackExchange

    View full-size slide

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

    View full-size slide

  54. ◉ 人はあなた自身を否定していない
    ◉ 仲間を増やそう
    ◉ 謙虚心を忘れない
    ◉ 影響力のある人のサポートを求めよう
    54
    人間関係について

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. 参考
    ◉ 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
    58

    View full-size slide

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

    View full-size slide