クラスメソッドで開催されたモバイルメソッド大阪 第3回 #mobilemethod で発表した資料です。

1. そのアプリ、目を閉じても使えますか?
〜 アクセシビリティの基礎と対応の考え方 〜
クラスメソッド株式会社 AIソリューション部
持田 徹 ( @motchie )

2. 簡単な自己紹介
⚫ AIソリューション部
⚫ 大阪オフィス勤務
⚫ 入社3.5か月
⚫ やっていること
⚫ Alexaスキルの受託開発
⚫ 2002年からアクセシビリティ研究
⚫ ウェブアクセシビリティ基盤委員会
WG4 作業協力者

3. 今日話すこと
テーマ: アプリの利用者に目を向けませんか?
1. アクセシビリティとは?
2. 障害者のアプリ利用を考慮すべき背景
3. アクセシビリティ対応の基準
4. アクセシビリティ向上のポイント(一部)
5. アクセシビリティのテスト
6. アクセシビリティ対応とマーケット

4. 1. アクセシビリティとは?
⚫ 一生懸命作ったアプリだけど、 それを利用できない人が
いるかもしれないことに配慮すること
⚫ 主に障害者・高齢者、その他一時的な障害も含む
⚫ モノを作る立場から離れて、 実際の利用者に思いをはせること
⚫ “Accessibility” = Access + Ability
⚫ より多くのユーザーが、より多くの利用環境から、
より多くの場面や状況で、アプリを使えるようにすること

5. 作ったものが実際には使えない例
『狐と鶴のごちそう』
⚫ これはいたずらですが…
⚫ 自分が意図せず、お皿のスープ
や壺のお肉を作っているかも
しれません
⚫ VoiceOverで使えないボタン
⚫ 文字拡大で読めないボタン
⚫ 色反転すると読めない画面…

6. アクセシビリティは全てのユーザーが対象
https://blogs.technet.microsoft.com/nzedu/2017/06/21/accessibility-is-at-the-heart-of-microsoft-office365/

7. 2. 障害者のアプリ利用を考慮すべき背景
⚫ 2008年: 国連: 障害者権利条約 発効(日本: 2014年締結)
⚫ 2013年 日本: 障害者基本計画(第3次 4年間)
⚫2013年 障害者雇用促進法改正（201５年施行）
⚫2013年 障害者差別解消法（2016年施行）
第9条 （g） 障害者が新たな情報通信機器及び情報通信システム（インターネットを含む。）
を利用する機会を有することを促進すること。
障害者が円滑に情報を取得・利用し，意思表示やコミュニケーションを行うことができるよ
うに，情報通信における情報アクセシビリティの向上，情報提供の充実，コミュニケーション
支援の充実等，情報の利用におけるアクセシビリティの向上を推進する。

8. 障害者差別解消法
⚫ 不当な差別的取扱いの禁止
国・地方自治体や事業者が、障害当事者に対して、正当な理由なく
障害を理由として差別することの禁止
⚫ 「合理的配慮」の提供
国・地方自治体や事業者は、障害当事者から、社会の中にある
バリアを取り除くために何らかの対応を必要としているとの
意思が伝えられた場合、負担が重すぎない範囲で対応すること
(事業者は対応に努めること)

9. 例えば…
⚫ 電動車椅子利用者が予約、乗務員「重い」と拒否
県が再発防止へ研修会 実技交えて介助法学ぶ ／鳥取
http://mainichi.jp/articles/20181006/ddl/k31/040/518000c (10月６日)
⚫ 東京）障害者への配慮、条例で義務化 悪質例は公表も
https://www.asahi.com/articles/ASL8H46RCL8HUTIL01D.html (9月15日)
⚫ 「差別の恐れ」県審議会が異例の指摘 名古屋城ＥＶ問題
https://www.asahi.com/articles/ASLB24Q3MLB2OIPE00Y.html (10月4日)

10. アメリカの例(1)
Lawsuit: McDonald‘s website, mobile
app not accessible to the blind, violates
ADA (Apr 24, 2017)
“A blind man has sued McDonald’s,
claiming the fast food giant has
discriminated against him under federal
disabilities law because it has not made its
smartphone app or website accessible to
those with visual impairments. …”

11. アメリカの例(2)
our commitment to accessibility.
“At Target, we’re committed to accessibility, diversity and
inclusion. We believe all of our guests should be able to easily
shop online at Target.com, use our smartphone apps, and
access all of our other web sites and digital offerings. …”

12. EUの例
“On 26 October 2016 the European
Parliament approved the directive on
making the websites and mobile apps
of public sector bodies more
accessible. This means that people
with disabilities – especially persons
with vision or hearing impairments –
will have better access to the websites
and mobile applications of public
services. …”

13. つまり…
アクセシビリティ:
何か特別な用途のアプリ開発の時だけ取り組むこと
セキュリティテストや可用性テストのように、
すべてのアプリケーションで設計の段階から取り組み
テストすべきこと

14. 3. アクセシビリティ対応の基準
Web： 共通規格で試験方法まで網羅 → これに従う
⚫ “Web Content Accessibility Guidelines (WCAG) 2.1”
https://www.w3.org/TR/WCAG21/
⚫ JIS X 8341-3:2016
『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェ
ア及びサービス－第3部：ウェブコンテンツ』
附属書JB（参考）試験方法

15. アプリには共通基準と呼べるものがない
各プラットフォームごとのドキュメントはある
⚫ iOSアクセシビリティプログラミングガイド：
https://developer.apple.com/jp/documentation/iPhon
eAccessibility.pdf
⚫ Make apps more accessible:
https://developer.android.com/guide/topics/ui/acces
sibility/apps

16. 数少ないガイドライン
⚫ The BBC Mobile Accessibility
Guidelines
⚫ HTML、iOS、Androidを含むガイド
ラインで、項目ごとにそれぞれのプラット
フォームの実装方法とテスト方法を含む
⚫ MUST、MUST NOTに従い
SHOULD、SHOULD NOTを
考慮するだけでかなり違う

17. 4. アクセシビリティ向上のポイント(一部)
最も避けるべき４項目
1. 音声の自動再生
2. フォーカストラップ
3. 動き続ける要素
4. 閃光
⚫ １９９７年 「ポケモンショック」
⚫ 「一般閃光及び／又は赤色閃光は3回/秒以下」
⚫ 「同時に生じている閃光が占める領域の合計が、…(画面上の視野10度
の25％)よりも多くを占めていない」

18. 色のコントラスト
⚫ ある種の先天性色覚異常は男性の20%
⚫ ボタンなどのUIのフォントの色とその背景色
⚫ UIに限らず情報を提供している部分
⚫ 少なくとも 4.5:1 のコントラスト比が必要
⚫ 白地に赤い文字はNG
⚫ Colour Contrast Analyser
https://developer.paciellogroup.com/resources/cont
rastanalyser/

19. UIはフォーカス可能にしてラベルを設定
⚫ VoiceOver、TalkBackで操作するにはフォーカスが必要
⚫ フォーカス時、何の要素かをラベルで示す
⚫ 逆に画面にある装飾やコンテナはフォーカスしないようにする
⚫ iOS
⚫ Android
[sampleButton setIsAccessibilityElement:YES];
[sampleButton setAccessibilityLabel:NSLocalizedString(@"Description of thing", @"Accesibility label for thing")];
[somethingDecorative setIsAccessibilityElement:NO]
<button
android:layout_height="wrap_content"
android:id="@+id/sunnyday"
android:src="@drawable/blue"
android:focusable="true"
android:contentDescription="Main Menu"></ImageView>

20. 文字拡大やズームに対応する
⚫ 高齢者、弱視の方などは文字拡大などで操作する
⚫ 200%の拡大でもUIが操作できることを当面の目標に
⚫ iOS
Dynamic Typeに対応
⚫ Android
文字サイズをscale-independent pixelsで指定
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />

21. 色や位置に依存した情報提供をしない
⚫ フォーム「赤い文字は必須項目です」
⚫ 「右側のボタンを押してください」
⚫ 音声読み上げで利用している場合には、どこのことなのか
わからない。フォーカス可能でラベルのついたUIなどとして
表現する

22. 5. アクセシビリティのテスト
⚫ iOS
XcodeのAccessibility Inspector
https://medium.com/yay-its-erica/ios-
accessibility-the-accessibility-inspector-
voiceover-swift-3-5f8e2bc50b20
⚫ Android
ユーザー補助検証ツール
https://play.google.com/store/apps/details?id
=com.google.android.apps.accessibility.auditor

23. 6. アクセシビリティ対応とマーケット
⚫ 障害のある人は９３６万人(人口の7.4%)(1)
⚫ 今アプリがアクセシブルでないとリーチできていない可能性
⚫ アクセシブルなアプリでは、この人々がユーザーになる可能性が
⚫ Webやアプリのアクセシビリティ対応はユーザー層の拡大になる
(1) 厚生労働省『平成28年生活のしづらさなどに関する調査(全国在宅障害児・者等実態調査) 』
https://www.mhlw.go.jp/toukei/list/seikatsu_chousa_b_h28.html

24. 開発しているアプリをアクセシブルにして
様々な人が利用できるようにしましょう！