1 of 73

社内でできる

アクセシビリティのはじめかた

　　

Developers Summit 2023

Tiphaine（ティフェン）

2 of 73

Tiphaine（ティフェン）

  • Android エンジニア
  • メドピア株式会社（kakari）

@tahia910

2

3 of 73

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

3

4 of 73

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

4

5 of 73

フィードバックを聞いて

5

使いづらいぞ

改善し続くプロセスも好き

6 of 73

6

🤔

😨

自分の感覚に頼れない。。。

どうすれば体験が良くなる？

7 of 73

プロダクト志向で

モノづくりが好きな人なら

いずれ辿り着く

7

8 of 73

なぜ会社でアクセシビリティが

注目されない

8

?

“

9 of 73

チャレンジ

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

9

参考：Deque Systems

10 of 73

彼を知り　己を知れば

百戦危うからず

10

“

11 of 73

What?

課題と、それに対する向き合い方

11

1

12 of 73

障害の種類

12

視覚

認知/神経

運動

聴覚

13 of 73

問題：視覚系

  • 色が区別しづらい
  • テキストを読めない
  • 画面が見えない

13

14 of 73

問題：運動系

  • ボタンを正確に押せない
  • 複雑な操作がしづらい
  • タッチ画面が使えない

14

15 of 73

問題：認知系

  • 長文が読みづらい
  • 文字が理解しづらい
  • UIを理解できない

15

16 of 73

問題：視覚系

  • 聞き取りづらい
  • 音を認知できない
  • 字幕がないと理解できない

16

17 of 73

支援技術

  • 文字拡大
  • 色調補正
  • スクリーンリーダー

17

点字ディスプレイ

参考：Emerald Coast

18 of 73

支援技術

  • 表示拡大
  • 音声入力/音声操作
  • スイッチ・アクセス

18

参考：Google

19 of 73

19

他にも色々あります！

全部覚えられない😱

20 of 73

ガイドラインに従うだけで

解決できる

20

“

21 of 73

WCAG 2.0

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

21

22 of 73

４つの原則

  1. 知覚可能（perceivable）
  2. 操作可能（operable）
  3. 理解可能（understandable）
  4. 堅牢性（robust）

22

23 of 73

適合レベル

23

A

シングルA

25項目

最低限

AA

ダブルA

13項目

好ましい

AAA

トリプルA

23項目

最上級

24 of 73

JIS X 8341-3:2016

  • 国内の基準規格
  • モバイル端末向けのコンテンツも対象

「JIS X 8341-3:2016 適合レベルAA準拠」

記載を目指す✊

24

25 of 73

先輩たちの解読メモ

  • サイバーエージェント
  • freee
  • MDN
  • 弊社も作成中🙇‍♀️

25

参考：CyberAgent, freee, MDN

26 of 73

デジタル庁の解読メモ

  • 2022年に導入ガイドブックを公開
  • WCAG解読に加えて取り組み方も紹介
  • 解説動画も公開予定

26

参考：デジタル庁（1 / 2)

27 of 73

チャレンジ

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

27

参考：Deque Systems

28 of 73

Why？

ビジネスにとっての価値と危険性

28

2

29 of 73

ブランディング

  • 会社のイメージ向上✨
  • 業界の動向で当たり前になる
  • 競合サービスとの差別化要因

29

30 of 73

期待に応える

  • ロイヤル・カスタマーを増やす
  • 家族や友達への宣伝
  • SNSでの炎上を避ける

30

31 of 73

開発者の環境改善

  • ガイドラインがあるとコードが綺麗に
  • コンポーネント使い回しで、生産性🆙
  • UIテストの実装が勧められる

31

32 of 73

32

ユーザビリティ

アクセシビリティ

参考：BAsixs

満足

安心

利用

アクセス

しやすさ

33 of 73

日本の将来推計人口

33

参考：内閣府

（万人）

37%

34 of 73

2050年の高齢者は今の30代後半

全員スマホに慣れた人

34

35 of 73

ユーザー層の変化

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

​

35

36 of 73

生存者バイアス：

選択過程を通過した人が判断を行うから、

通過しなかった人が見えなくなる

36

“

37 of 73

37

アクセシビリティ対応をしない

障害者に利用できない

“考慮する必要がない”

マイノリティだと思われる

数字に出ない

(+ 社会的認知度が低い)

参考：pacingpixie, HubSpot

38 of 73

数字に見えない人

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

38

39 of 73

全てのユーザーのため

  • 「障害者 vs 健常者」ではない
  • 一時的/状況的障害で健常者も困る
  • “Don’t assume anything”

39

40 of 73

事例①：Tesco

  • 視覚障害者のために別のサイトを作る
  • ナビゲーション、コンポーネント階層、言葉をより簡単に、余計な画像も減らす

40

参考：Scope, W3C

41 of 73

事例①：Tesco 結果

  • 障害のないユーザーにも大人気
  • モバイルや接続の悪い状態でも使いやすい
  • 3万6千ポンドの初期費用に対して、

年1300万ポンドの収益

41

参考：Scope, W3C

42 of 73

事例①：Tesco 注意

  • サイトを分けるのは非推奨 ⚠️
  • 元のプロダクトを改善したら、全てのユーザーに喜ばれる

42

参考：Scope, W3C

43 of 73

事例②：Legal&General

  • アクセシビリティ監査
  • 障害者によるユーザビリティテスト
  • アクセシブルなデザインへ

43

参考：Scope, W3C, Bruce Lawson, Mike Davies

44 of 73

事例②：Legal&General 結果

  • オーガニック流入が倍に増えた🎉
  • 運用コストが66%減った
  • サイト経由での保険加入が90%増加

44

参考：Scope, W3C, Bruce Lawson, Mike Davies

45 of 73

より良いプロダクトへ

  • 制約を与えると創造性が上がる
  • スキルが高くなって品質向上に繋がる

45

BAD DESIGNS DISABLE PEOPLE

参考：btrax

46 of 73

(🇺🇸) webアクセシビリティ関連訴訟

46

参考：UsableNet

🤔

47 of 73

(🇺🇸) 5年間で、1万６千件の訴訟

催告状は5万件以上

47

参考：UsableNet

48 of 73

(🇺🇸) 様々な業界で敗訴事例がある

ドミノ・ピザ、Netflix、ハーバード大学、

アマゾン、Nike、ビヨンセ、

HSBC、EA、Foxニュース...

​

ドミノ・ピザ、Netflix、ハーバード大学、

アマゾン、Nike、ビヨンセ、

HSBC、EA、Foxニュース...

48

参考：Accessi.org, WhoisAccessible.com, Level Access, LFLegal

49 of 73

海外では当たり前

  • 訴訟に至る前に対応するようになった
  • 同じ業界で敗訴事例がある可能性は高い
  • アメリカだけではない

49

参考：W3C

50 of 73

日本の法律にも求められる

2021年に障害者差別解消法が改正され、

民間事業者も義務化へ

50

参考：内閣府

51 of 73

チャレンジ

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

51

参考：Deque Systems

52 of 73

How?

取り込みの流れ

52

3

53 of 73

全ての段階で確認したい

53

企画 & 分析

設計

実装

テスト

運用・保守

参考：TPGi

54 of 73

Roadmap

54

1

観察

55 of 73

観察

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

55

56 of 73

Roadmap

56

1

観察

2

勉強

57 of 73

勉強

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

57

58 of 73

Roadmap

58

1

2

観察

3

具体化

勉強

59 of 73

具体化

  • 達成可能で小刻みな目標を設定する
  • 問題を特定して、チケットを作る
  • ↑ 優先度を決めて、消化する

59

参考：W3C, Web担当者Forum / 弁護士ドットコム

60 of 73

やれる範囲で、少しずつ、

継続的に

60

“

61 of 73

長期的に続くため

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

61

62 of 73

Roadmap

62

1

3

2

観察

具体化

勉強

4

実装

63 of 73

63

WCAG知覚可能のAレベル項目

TalkBack対応のみ

全画面対応、リリース済み 🎉

WCAG知覚可能のAレベル項目

kakari for Clinic

64 of 73

Roadmap

64

1

3

4

2

観察

具体化

5

運用

勉強

実装

65 of 73

記録と教育

  • チェックリスト
  • トレーニング
  • 社内ガイドライン
  • ポリシー

65

66 of 73

進捗管理

支援技術利用のトラッキングは 🆖

​

​

66

参考：AdrianRoselli, W3C, Mightybytes, StackExchange, Léonie Watson

67 of 73

進捗管理

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

​

​

67

68 of 73

人間関係について

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

68

69 of 73

Roadmap

69

1

3

5

4

2

観察

具体化

運用

勉強

実装

6

情報配信

70 of 73

情報発信

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

70

71 of 73

日常の小さな思いやり

  • SNSで情報を共有するだけでも充分👍
  • 投稿する時に配慮する

71

72 of 73

参考

​

72

73 of 73

Thanks!

Special thanks:

@purunkaoru

@y2kit_1127

@Gabrielle_Lng

73

テーマ：SlidesCarnival