Share
Embed
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
() 様々な業界で敗訴事例がある
ドミノ・ピザ、Netflix、ハーバード大学、
アマゾン、Nike、ビヨンセ、
HSBC、EA、Foxニュース...
ドミノ・ピザ、Netflix、ハーバード大学、
アマゾン、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