SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
CX(顧客体験)の⼟台となる
アクセシビリティの基礎と
スマホアプリでの対応
CX事業本部 持⽥ 徹( @motchie )
⾃⼰紹介
● 持⽥ 徹 CX事業本部
● 普段の業務:
スマホアプリ/Webアプリの受託開発
案件プロジェクトリーダー
AWSなどのAIサービスを活⽤した
ソリューションの提供
● 2001年からアクセシビリティの
研究・執筆・講演
● ウェブアクセシビリティ基盤委員会
WG4(翻訳)作業協⼒者
2
今⽇話すこと
テーマ:
スマホアプリのアクセシビリティが向上すると
ユーザーが増えますよ
1. アクセシビリティとは?
2. なぜアクセシビリティ?
3. アプリデザインとアクセシビリティ
4. スマホアプリのアクセシビリティ向上の実例
5. アクセシビリティ向上とマーケット
3
4
1. アクセシビリティとは?
5アクセシビリティとは
l “Accessibility” = Access + Ability
l ユーザーには年齢や病気などで以下のような特性がある
これらを考慮し、Webアプリ/スマホアプリを、より多くの
ユーザーがより多くの利⽤環境からより多くの場⾯で利⽤
できるようにすること
l ⾒ることができない(全盲の視覚障害)
l ⾒えづらい(弱視、ロービジョン、⽼眼、屋外)
l 聴くことができない(聴覚障害、オフィス、イヤホンがない)
l 聴こえづらい(難聴、加齢による衰え、騒がしい)
l 細かい操作が困難(上肢不⾃由、指や⼿が震える etc.)
l 認知・理解・学習(認知・学習・⾔語障害、ディスレクシア、...)
6作ったものが実際には使えない例
l ⼀⽣懸命開発したアプリですが、
それが利⽤できない⼈や環境が
ある場合に配慮すること
l OSや端末が要件を満たしていても、
使えない⼈がいるって想定できますか︖
l 『狐と鶴のごちそう』
● 「たとえ善意からくる⾏動であっても
思慮が⾜りないと相⼿に受け⼊れ
られず、互いに傷つく。」
● ⾃分が意図せず、お⽫のスープや
壺のお⾁を作っているかもしれません
7
2. なぜアクセシビリティ?
8アクセシビリティに取り組む2つの理由
1. 法律上の要請と訴訟リスク
2. CXやUXの⼟台である
91. 法律上の要請と訴訟リスク
障害者差別解消法(2016年施⾏)
1. 不当な差別的取扱いの禁⽌
国・地⽅⾃治体や事業者が、障害当事者に対して、正当な理由なく
障害を理由として差別することの禁⽌
2.「合理的配慮」の提供
国・地⽅⾃治体や事業者は、障害当事者から、社会の中にある
バリアを取り除くために何らかの対応を必要としているとの
意思が伝えられた場合、負担が重すぎない範囲で対応すること
(事業者は対応に努めること)
10訴訟リスク
7⽉25⽇、視覚障害当事者が
スクリーンリーダーを⽤いても
Webサイトやモバイルアプリ
からピザが注⽂できず、
合理的配慮を求めるADA法に
違反しているとして提訴
10⽉7⽇、最⾼裁判所はドミノ
ピザ側の控訴を棄却
アメリカでは、2018年だけで
同様の訴訟が2200件以上発⽣
h$ps://fortune.com/2019/10/03/dominos-web-accessibility-
disability-blind-access-supreme-court/
112. アクセシビリティはCXやUXの⼟台である
https://active.nikkeibp.co.jp/atclact/active/15/051900050/031
400083/
CX(Customer Experience):
「顧客(=カスタマー)としての
あらゆる体験」を指す⾔葉。
サービス・製品を認識してから
購⼊を検討、購⼊した場合はそ
れを使⽤するという⼀連の流れ
のすべてにおける体験のこと
122. アクセシビリティはCXやUXの⼟台である
EvaluaFon method of UX “The User Experience Honeycomb”
h$ps://bookslope.jp/blog/2012/07/evaluaFonuxhoneycomb.html
User Experience Honeycomb in "User Experience
Design" by Peter Morville
http://semanticstudios.com/user_experience_design/
13つまり…アクセシビリティは
何か特別な⽤途のアプリ開発の
時だけ取り組むこと
ではなく
セキュリティや可⽤性のように、
すべてのアプリケーションで
設計段階から取り組み
テストすべきこと
Accessibility 101: Introduction to disability and accessibility
with Microsoft
https://youtu.be/qM7wFZo5yfI
14
3. アプリデザインと
アクセシビリティ
15⾊の⾒え⽅は⼈それぞれ
l ⼈間の⾊の感じ⽅はみな同じではない
l 遺伝⼦の状況や疾患などによって異なる
l ⾚緑⾊覚が違うタイプ : ⽇本全体で300万⼈以上
l ⽇本⼈男性の20⼈に1⼈
l ⽇本⼈⼥性 500⼈に1⼈
l 40歳代の半分以上は「⽩内障」である
⾊が正確に⾒える⼈は あまり多くはない
16「コントラスト⽐」とは
l 明暗の差がどれだけあるかを表す指標
l 数字が⼤きい → 明暗の差が⼤きい
l ⾼いコントラスト⽐ → ⾊の区別が容易
l 17ptまでの ⼩さなフォント/UIでは最低 4.5:1
→ ⿊を1とすると4.5倍以上の明るさを確保
l Apple HIG “努⼒して 7:1 以上の確保を”
2.6:1
NEW! 4.1:1
17ツールでチェックしましょう
Colour Contrast Analyser
https://developer.paciellogroup.com/resour
ces/contrastanalyser/
l デモお⾒せします
l UIを⽇本語化しておきました!
l リリースを待ちましょう!
18
3. 「⽀援技術」と
iOSのVoiceOverについて
19⽀援技術とは
⽀援技術(Assistive Technology)
PCやスマホなどを使う際に⽀援が必要なユーザーに、
そのニーズに合う機能を提供するソフトウェアや
ハードウェア、デバイスなどの総称
l スクリーン・リーダー(VoiceOver, TalkBack など)
l 画⾯拡⼤、⾊反転、ジョイスティック、トラック
ボール、キーボードガード、...
20例: iOSの⽀援技術
視覚 ⾝体および動作 聴覚 ⼀般
VoiceOver タッチ リアリングデバイス アクセスガイド
ズーム機能 Face IDと注視 RTT/TTY Siri
拡⼤鏡 スイッチコントロール オーディオ/ビジュアル ショートカット
画⾯表⽰とテキス
トサイズ
⾳声コントロール 標準字幕とバリアフリー字幕
動作 サイドボタンまたは
ホームボタン
読み上げコンテン
ツ
Apple TV Remote
バリアフリー⾳声
ガイド
キーボード
21VoiceOverの基礎的なデモ
iOSの⽀援技術である
VoiceOverの簡単なデモ
22
4. スマホアプリの
アクセシビリティ向上の実例
23iOSでのアクセシビリティ向上デモ
1. アプリの⽬的を確認
2. VoiceOverで機能を果たしているか
24
5. アクセシビリティ向上と
マーケット
25アクセシビリティ向上でユーザーが増える
l 障害のある⼈は936万⼈(⼈⼝の7.4%)(1)
l 65歳以上の⾼齢者は3588万⼈で、総⼈⼝の28.4% (2)
l 今アプリがアクセシブルでないとリーチできていない可能性
l アクセシブルなアプリでは、この⼈々がユーザーになる可能性が
l Webやアプリのアクセシビリティ対応はユーザー層の拡⼤になる
(1) 厚⽣労働省『平成28年⽣活のしづらさなどに関する調査
(全国在宅障害児・者等実態調査) 』
(2) 総務省統計局『⾼齢者の⼈⼝』
26
開発するアプリをアクセシブルにして
様々な⼈が利⽤できるようにしましょう!
その⽅がユーザー増えるし!

Más contenido relacionado

Más de Toru MOCHIDA

オープンソースのアクセシビリティ・チェックツール
オープンソースのアクセシビリティ・チェックツールオープンソースのアクセシビリティ・チェックツール
オープンソースのアクセシビリティ・チェックツール
Toru MOCHIDA
 

Más de Toru MOCHIDA (13)

オープンソースのアクセシビリティ・チェックツール
オープンソースのアクセシビリティ・チェックツールオープンソースのアクセシビリティ・チェックツール
オープンソースのアクセシビリティ・チェックツール
 
アクセシビリティの基礎
アクセシビリティの基礎アクセシビリティの基礎
アクセシビリティの基礎
 
電子書籍のアクセシビリティ
電子書籍のアクセシビリティ電子書籍のアクセシビリティ
電子書籍のアクセシビリティ
 
ACRI最新通信ダイジェスト
ACRI最新通信ダイジェストACRI最新通信ダイジェスト
ACRI最新通信ダイジェスト
 
アクセシビリティ概要(Silverlightを囲む会 in 大阪#6)
アクセシビリティ概要(Silverlightを囲む会 in 大阪#6)アクセシビリティ概要(Silverlightを囲む会 in 大阪#6)
アクセシビリティ概要(Silverlightを囲む会 in 大阪#6)
 
WCAG勉強会@関西について
WCAG勉強会@関西についてWCAG勉強会@関西について
WCAG勉強会@関西について
 
WCAG2について
WCAG2についてWCAG2について
WCAG2について
 
アプリケーションのアクセシビリティ~WCAGからARIA、RIAまで~
アプリケーションのアクセシビリティ~WCAGからARIA、RIAまで~アプリケーションのアクセシビリティ~WCAGからARIA、RIAまで~
アプリケーションのアクセシビリティ~WCAGからARIA、RIAまで~
 
最近のウェブアクセシビリティの動向とCMSでの対応について
最近のウェブアクセシビリティの動向とCMSでの対応について最近のウェブアクセシビリティの動向とCMSでの対応について
最近のウェブアクセシビリティの動向とCMSでの対応について
 
アクセシビリティ・イントロダクション
アクセシビリティ・イントロダクションアクセシビリティ・イントロダクション
アクセシビリティ・イントロダクション
 
ウェブアプリケーションのアクセシビリティ入門
ウェブアプリケーションのアクセシビリティ入門ウェブアプリケーションのアクセシビリティ入門
ウェブアプリケーションのアクセシビリティ入門
 
JIS X 8341-3:2010時代のWebアプリケーション開発
JIS X 8341-3:2010時代のWebアプリケーション開発JIS X 8341-3:2010時代のWebアプリケーション開発
JIS X 8341-3:2010時代のWebアプリケーション開発
 
KOFで社会貢献のチャンスを得よう
KOFで社会貢献のチャンスを得ようKOFで社会貢献のチャンスを得よう
KOFで社会貢献のチャンスを得よう
 

CX(顧客体験)の土台となる アクセシビリティ の基礎と スマホアプリ での対応