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

by Tiphaine

Slide 1

Slide 1 text

社内でできるアクセシビリティのはじめかた　　 Developers Summit 2023 Tiphaine（ティフェン）

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

取り込みの流れ How? 52 3

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Roadmap 54 1 観察

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Roadmap 56 1 観察 2 勉強

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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