Accessibility.jp無料セミナー
2022年1月19日(水)講師：飯塚慎司株式会社インフォ・クリエイツ1本勉強会のねらい日本ではアクセシビリティの対象は未だWebが中心です。アプリはと言えば、10年前のWebの状態よりさらに酷い状態です。障害のある方は、支援技術で利用できるアプリを探して、皆で情報交換をしながら、なんとか利用しています。この状況を改善するには、まず、知ることが必要だと思います。ですから、今日の勉強会を企画しました。今後、皆さまとも情報交換していきながら、モバイルアプリのアクセシビリティがもっと理解されるようになることを願っています。
https://accessibility.jp/resources/seminarlog/
Copyright InfoCreate Co., Ltd.All Rights Reserved.
1.用語の確認2.  Android OSとiOSのアクセシビリティ3.守るべき規格4.規格を守れないと5.モバイルアプリで見かけることの多い問題6.おまけ7.最後に
Copyright InfoCreate Co., Ltd.All Rights Reserved.
最初に用語の確認| �
InfoCreateスマートフォンやタブレットなど持ち運び容易な情報機器のことモバイル端末にはNote PCも含みますが、今日の話のほとんどは携帯端末、タブレット端末が対象です。
Copyright InfoCreate Co., Ltd.All Rights Reserved.
IC
Google検索結果から見ると、 Mobile Accessibilityガイドラインやチェックリストなど技術の説明に用いられるhttps://www.w3.org › WAI › mobile  ▼このページを訳すMobile Accessibility at W3C | Web Accessibility Initiative (WAI) "Mobile accessibility" refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other ... More than "Mobile" · W3C WAI Addresses Mobile... https://ionicframework.com › native ▼このページを訳すMobile Accessibility - Ionic Framework日本語... This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader ... https://ionicframework.com › native  •このページを訳すMobile Accessibility | Ionic Documentation This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader ... https://developer.mozilla.org › en-US ▼このページを訳すMobile accessibility checklist - MDN Web Docs 2021/10/13 — This document provides a concise checklist of accessibility requirements for mobile app developers. It is intended to continuously evolve as ... Smartphone Accessibilityデバイスの機能を説明するのに用いられるhttps://www.aarp.org › info-2020 › s... ▼このページを訳すYour Guide to Smartphone Accessibility Settings - AARP 2021/12/01 — On an iPhone, tap Settings | Accessibility and select among many accessibility choices. On an Android phone such as the Google Pixel 6, tap ... https://www.uswitch.com › Guides ·このページを訳すSmartphone accessibility: a comprehensive guide - Uswitch.com Getting the most out of your phone if you have a physical disability · Choose a durable phone · Invest in a decent case and screen protector · Use ... 2020/09/18 https://www.rd.com › ... › Smartphone ▽このページを訳す25 Smartphone Accessibility Settings You Need to Know ... 2021/07/20 — iPhone accessibility settings · VoiceOver · Zoom · Magnifier · Text Size Text Color and Readability · Subtitles and Captions · Headphone ... https://www.scope.org.uk › phone-ac… ▼このページを訳すPhone accessibility settings | Disability charity Scope UK 2020/11/04 — Smartphone accessibility features · Control the phone with your voice (voice activation) · Warning · Check your messages for autocorrect · Have the ... Smartphone accessibility... · Finding phone accessibility... · Smartphone tips
●ネイティブアプリ
Xcode、Android Studio、Eclipse、Visual Stuidoなど統合環境(IDE)でOS別に開発する。 Java、Swift、C#などの言語を用い何でも出来る。利用者はインストールして使用する。 ● WebアプリOSによらず、ブラウザ上で動作するアプリ。 HTMLやJavaScriptで記述するが、ネイティブアプリのように何でも出来るわけではない。 ●ハイブリッドアプリネイティブアプリが、OS内蔵のブラウザを利用し、一部の機能をWebアプリとして提供する。例えば「利用規約」はWebアプリで表示するようにした方が楽。
Copyright InfoCreate Co., Ltd.All Rights Reserved.
7
| 🌸
IntoCreate
Copyright InfoCreate Co., Ltd.All Rights Reserved.

●ユーザー補助
スクリーンリーダー
TalkBack ■ OFF /画面上の項目を読み上げます選択して読み上げOFF /選択したテキストを読み上げます( 9 )テキスト読み上げの出力表示
フォントサイズ
色反転のOFF大きなマウスポインタ
操作のコントロール
スイッチアクセス( 5%) OFF /スイッチを使ってデバイスを操作ユーザー補助機能メニュー (…) OFF /大きなメニューでスマートフォンを管理自動クリック（静止時間） OFF電源ボタンで通話を終了画面の自動回転押し続ける時間短め操作までの時間（ユーザー補助タイムアウト)デフォルトバイブレーションと触覚フィードバックの強さ着信音: OFF、通知: ON、タップ: ON ( Dシステムナビゲーションジェスチャーナビゲーション
音声と画面上のテキスト
自動字幕起こしメディアの自動字幕起こしモノラル音声音声再生時のチャンネルを統一　合しますオーディオバランス左有C OFF字幕の設定試験運用機能高コントラストテキスト（D
Copyright InfoCreate Co., Ltd.All Rights Reserved.

( D

●アクセシビリティ(iPhoneの例)
視覚サポート
オフ>
> →読み上げコンテンツ> ◎　バリアフリー音声ガイド　オン　>カラー以外で区別カラーのみに依存するインターフェイス項目を簡ぎ換えて、ほかの方法で情報を伝えます。身体機能及び操作
>
オフ>
→ Apple TVリモコン>聴覚サポヒアリングデバイス»サウンド認識オフ>オーディオ/ビジュアル>標準字幕とバリアフリー字幕>もしアクセスガイドオン> Siri >確認>ショートカットAppごとの設定> inforeate
●見栄えから判断するのは難しい●簡単なのはVoiceOverのローター機能で確認すること�ブラウザ(Safari) 、アプリローターはブラウザ用ローターはアプリ用フッターではローターはアプリ用コンテンツではローターはブラウザ用ウエブネイティブハイブリッド
Copyright InfoCreate Co., Ltd.All Rights Reserved.

■ 12:30 VoiceOverローター文字Web and apps Web点字自動前進スピード画面認識画像を説明ダイレクトタッチナビゲーションスタイルll III点字表!!!アクティビティIIIなぞり入力!!!
Copyright InfoCreate Co., Ltd.All Rights Reserved.
12守るべき規格| �
InfoCreate規格- W3C WS W3C W3C WAIはWCAG、UAAG、ATAG、WAI-ARIAで対応済みと表明https://www.w3.org/WAI/standards-guidelines/mobile/但し、達成方法はHTML、CSS、スクリプトなどWeb系の情報のみ提供、 iOSやAndroid OSのプログラミングに対すものは提供無し。

Copyright InfoCreate Co., Ltd.All Rights Reserved.
14
Mobile accessibility checklist mobile appのためと有るが、WCAG 2.1同様にWebアプリが対象であり、次の7項目の観点で整理したチェックリスト。 • Color • Visibility • Focus • Text equivalents • Handling state • Orientation General guidelines .
Copyright InfoCreate Co., Ltd.All Rights Reserved.

B B C iOSとAndroidにおける達成方法を含む。しかし、WCAG2.1の一部の達成基準を含まない。 https://www.bbc.co.uk/accessibility/forproducts Principles: ● Use platform and web standards as intended ● Use standard interface controls where possible ● Support platform accessibility Audio and video Autoplay Metadata Volume control Audio conflict Design Colour contrast Colour and meaning Styling and readability Touch target size Spacing Content resizing Actionable elements Visible focus Consistency Choice Adjustability Flicker Editorial Consistent labelling Indicating language Instructions
Focusable elements
Appropriate triggers Alternative input methods Forms Labelling form controls Input Format Form Layout Grouping form elements Images Images of text Background images
Descriptive links Links to alternative formats Combining repeated linksプラットフォームとWeb標準に忠実に従う可能な限り標準インターフェースを使用するプラットフォームのアクセシビリティをサポートするNotifications Inclusive notifications Standard operating system notifications Error messages and correction Feedback and assistance Scripts and dynamic content Progressive functionality Controlling media Page refreshes Timeouts Input control Structure Unique page/screen titles Headings Containers and landmarks Grouped elements Text equivalents Alternatives for non-text content Decorative content Tooltips and supplementary information Roles, traits and properties Visual formatting
Copyright InfoCreate Co., Ltd.All Rights Reserved.
Infofreate iOS (Apple)基本はHuman Interface Guidelinesに従うこと。加えて、UIKitを活用すれば、アクセシビリティに十分に対応できる。
● Accessibility
https://developer.apple.com/jp/accessibility/jos/ – Human Interface Guidelines – Accessibility /デザインに関するガイドライン使いやすく、誰もが利用できるAppをデザインする方法https://developer.apple.com/design/human-interface- guidelines/accessibility/overview/introduction/ – Accessibility for UIKit / UIKitのアクセシビリティアクセシビリティに対応するためのAPIリファレンス、ドキュメント、サンプルコードhttps://developer.apple.com/documentation/uikit/accessibility for uikit –  Media Accessibility /メディアのアクセシビリティメディアのクローズドキャプションデータを表示するためのフレームワークhttps://developer.apple.com/documentation/mediaaccessibility/
Copyright InfoCreate Co., Ltd.All Rights Reserved.
17
Android iOS同様、アクセシビリティ対応に必要な情報は一通り提供されている。 ●ユーザーが利用しやすいアプリを作成するhttps://developer.android.com/guide/topics/ui/accessibility?hl=ja l設計ユーザー補助のニーズに応えるようアプリを設計するhttps://material.jo/design/usability/accessibility.html –開発ユーザー補助に関するおすすめの方法に沿ってアプリを開発するhttps://developer.android.com/guide/topics/ui/accessibility/apps?hl=ja –テストアプリの改善点を特定するhttps://play.google.com/store/apps/details?id=com.google.android.apps.acce ssibility.auditor&hl=ja –テストEspressoテストにユーザー補助機能チェックを組み込むhttps://developer.android.com/training/testing/espresso/accessibility- checking?hl=ja
Copyright InfoCreate Co., Ltd.All Rights Reserved.

●達成方法を含むガイドラインを提供しているところは見つけられない●いずれの企業もグラフィカルで分かり易い解説を提供している例1. THE PACIELLO  GROUP Mobile Accessibility Testing Guide for Android and iOS 31ページ図も多く分かり易いが、達成方法は含まないhttps://www.tpgi.com/mobile-accessibility-testing- guide-for-android-and-ios-free/例2. Usable Net WCAG2.0ベースのものはすぐにダウンロードできる。グラファイカルでとても分かりやすい。(いくつかある) https://blog.usablenet.com/how-to-apply-wcag-to- mobile
Copyright InfoCreate Co., Ltd.All Rights Reserved.

● Web同様に検査では達成方法集に類するものが必要であり、 BBC Mobile Accessibility Guidelineを元に改修と追加を行いWCAG2.1をカバーするガイドラインを作成。 ● 11のカテゴリー、63の達成項目（141ページ）に整理●達成項目ごとに次の項目を含む－解説–対象デバイス・ iOS (コーディング例を含む) •  Android (コーディング例を含む) ・HTML（コーディング例を含む） －検査手順と判定•検査手順（3～10ステッフの検査手順） • 判定（1～5項目程度の判定項目） ●検査はWebアクセシビリティ検査で使用しているプラットフォームを活用
Copyright InfoCreate Co., Ltd.All Rights Reserved
規格を守れないと| �
InfoCreate UsableNet社「2021 YEAR END REPORT」より| 🌸
IntoCreate
Copyright InfoCreate Co., Ltd.All Rights Reserved.
モバイルアプリで見かけることの多い問題
| 🌸
IntoCreate
大抵のアプリでWCAG2.1の殆どの達成基準で問題は検出されますが、特に、次の10項目では問題が良く見つかります。

Copyright InfoCreate Co., Ltd.All Rights Reserved

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1.接種証明書2.ドラッグボタン3.新型コロナワクチン4.接種証明書アプリ5. 6.疑問符サークルフィルボタン追加ボタン7.新型コロナウイルス感染症予防接種証明書8.氏名飯塚慎司9. 10.接種回数11.最終接種日12. 2回13. 2021年7月30日14. 2021年12月21日発行15.東京都新宿区長
Copyright InfoCreate Co., Ltd.All Rights Reserved

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1.接種証明書ドラッグボタン正：メニューボタン2. 3.新型コロナワクチン4. 5. 6.接口正：発行手順を説明するボタン疑問符サークルフィルボタン追加ボタン新正：接種証明書を発行・追加するボタン氏名8.飯塚慎言9. 10.接種回数11.最終接種日12. 2回13. 2021年7月30日14. 2021年12月21日発行15.東京都新宿区長Good!実行可能な箇所は「ボタン」と読まれる
Copyright InfoCreate Co., Ltd.All Rights Reserved.

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1.接種証明書ドラッグボタン2: 3.新型コロナワクチン4.接種証明書アプリ5. 6.疑問符サークルフィルボタン追加ボタン毎の後にあるべき新型コロナウイルス感染症予防接種証明書7.氏名8.飯塚慎言9. 10.接種回数11.最終接種日適切な順序10.接種回数11. 2回12. 2回12.最終接種日13. 2021年7月30日13. 2021年7月30日14. 2021年12月21日発行15.東京都新宿区長(1) (タイト
Copyright InfoCreate Co., Ltd.All Rights Reserved.

iPhoneの設定画面Androidの設定画面ディスプレイ壁紙、スリープ、フォントサイズストレージ使用済み33% -空き容量43,09 GBプライバシー権限、アカウントアクティビティ、個人データー
Copyright InfoCreate Co., Ltd.All Rights Reserved.

横向きにしてみると・・・ iPhoneの設定画面Androidの設定画面補足iPhone横向き固定メホーム画面  × Android司主|南五iPad横向き固定 ○ホーム画面Copyright InfoCreate Co., Ltd.All Rights Reserved.
VoiceOverでは立ち上げてから操作毎に次のように読み上げます1. 戻るボタンキャンセルボタン2. 3. 次へ進む無効ボタン4. 1 5.その他イメージ6. 2その他イメージ7. 8. 3暗証番号の入力9. 10.マイナンバーカードの券面・・・・ 11.セキュリティ保護されたテキストフィールド12. (無音) 13. (無音) 14. (無音) 15.(無音) 3
Copyright InfoCreate Co., Ltd.All Rights Reserved

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1. 戻るボタンキャンセルボタン2. 3. 4.次へ進む無効ボイこれではどのステップにいるか分かりません。次1のように代替テキストはその他イメージ設定したほうが良いでしよう。 5. 6. 2その他イメージ7. 8. m
11.セキュリティ保護さ12.
13. (無音) (無音) 14. 15. (無音) 4. 3ステップ中1番5～8. (装飾画像扱い)例えば、ステップ２にいるときは、「ステップ中２番」と読むようにます。キャンセル(4) (5) (6) (7) (8)暗証番号の入力マイナンバーカードの券面事項入力補数字４桁）を入力してください。設定した４桁の数字です。３回ロックされるのでご注意くだaccessibilityLabel属性か、 XcodeのIdentity Inspector内のAccessibilityパネルでラベルを追加する
Copyright InfoCreate Co., Ltd.All Rights Reserved

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1. 戻るボタンキャンセルボタン2.次へ進む無効ボタン3. 4. 1その他イメージ5. 6. 2
4つの無音、なんとなく何をすれば良いか分かりますが、例えば次のように順番を伝えましょう
(1) <マイナンバーカードの券面事項入力補助用の号(数字４桁)を入力してください。 3) [myTextField.setAccessibilityLabel:@"1つ目"];
Copyright InfoCreate Co., Ltd.All Rights Reserved.

コントラスト比が足りていない場合、見えていないのと同じと考えましょう。アクティブユーザーインターフェースは背景に対し3:1以上のコントラスト比が求められます(WCAG 2.1)テキストは背景に対し4.5:1以上のコントラスト比が求められます(WCAG 2.0)非アクティブなボタンはコントラスト比要件の対象外です。問題はありません。こう見えているのと同じ!キャンセル暗証番号の入力マイナンバーカードの券面事項入力補助用の暗証番号（数字４桁）を入力してください。 Copyright InfoCreate Co., Ltd.All Rights Reserved.
iPhoneの設定画面Androidの設定画面大きい文字設定にするとどうなるか？
Copyright InfoCreate Co., Ltd.All Rights Reserved.

iPhoneの設定画面oneアプリの場合、寒わらないAndroidの設定画面Dynamic Typeを使用するCopyright InfoCreate Co., Ltd.All Rights Reserved.
く用途の選択接種証明書の用途を選択してください。両方のオプションを同時に選択することができます。選択された各オプションにつき、１枚の証明書が作成されます。必要なもの・請求者本人のマイナンバーカード（券面事項入力補助用暗証番号(4桁)の入力が必要です)
Copyright InfoCreate Co., Ltd.All Rights Reserved.
InfoCreate
くキヤンセル用途の選択接種証明書の用途を選択してください。両方のオプションを同時に選択することができます。選択された各オプションにつき、１枚の証明書が作成されます。日本国内用必要なもの・請求者本人のマイナンバーカード（券面事項入力補助用暗証番号(4桁)の入力が必要です)海外用必要なもの次へ進むトグルボタンはOnとOffのどちらもコントラストが足りません。 (3:1を満たさない)グレーの背景が、グルーピングの役目を持ち、それが無いとコンテンツを正しく理解できない場合は、不適合になります。 (この画面については問題は無いようですが、常に注意が必要です）キャンセル用途の選択接種証明書の用途を選択してください。両方のオプションを同時に選択することができます。選択された各オプションにつき、 ]枚の証明書が作成されまt.日本国内用必要なもの・請求者本人のマイナンバーカード（券面事項入力補助用暗証番号(4桁)の入力が必要です)海外品必要なもの次へ進むCopyright InfoCreate Co., Ltd.All Rights Reserved.
VoiceOverでは立ち上げてから操作毎に次のように読み上げます1. Covid-19コンタクトアップアイコンサムバーガーボタン2.使い方ボタン3. 4.動作中5.詳しい説明ボタン6. 2022年1月15日17時12分利用開始から571日7. 8. 9.陽性者との接触結果を確認ボタン陽性と診断されたら10.周りの人達を守るために匿名での陽性登録へのご協力をお願いいたします。 11.陽性情報の登録ボタン12.アプリを周りの人に知らせる① (タイトル)
nt InfoCreate Co., Ltd.All Rights Rese

VoiceOverでは立ち上げてから操作毎に次のように読み上げます1. [Covid-19コンタクトアップ① (タイトル)タイトルであり「接触確認アプリ」が適当2.アイコンサムバーガーボタン使い方ボタン3. 「メニューボタン」が適当4.動作中5.詳しい説明ボタン|ここが読み飛ばされます6. 2022年1月15日17時12分7.利用開始かららワ10陽性者║上下に行ったり来たりを繰り返すと、操作8'の出来ないエリアが生まれ、閉じ込め状陽性と9.態が発生します。 10.周りの! (⑦から⑥に移動しようとしても、⑧に移^(), 11.陽性情動してしまい、永遠に続くなど) 12.アプリを周りの人に知らせる(12) [△アプリを周りの人に5
: InfoCreate Co., Ltd.All Rights Rese
6-2.閉じ込めの問題は他のページでも発生します例えば、「使い方」のページでは、右図のように①から順番に読み上げるのが正しい順序です。しかし、このページの場合は、③と④のみを読み上げを繰り返します。直接タッチして⑤を選択しても、今度は、⑤と⑥を行ったり来たりします。他のページでも似たような閉じ込めが発生します。利用者にとっては大きな問題です。話番号などの個人情スマートフォンの位置情報を使うことになく、記録されることもありません。 5)記録される接触の条件
メニュー画面は右へのフリックで表示されます。もし、これが唯一の方法の場合は、WCAG2.1 2.5.1ポインタのジェスチャの達成基準にひっかかりますが、このページの場合は、メニュー部をシングルタップすることで操作できますので問題はありません。右へのフリックでメニューが開くこれが唯一の方法ならばNG!左上メニューのシングルポイントでも開く問題無し!
Copyright InfoCreate Co., Ltd.All Rights Reserved.

「呼吸をしていない。息がない。リンク」と読み上げます。正しい？ 「医療情報ネットへリンク」と読み上げます。正しい？
Copyright InfoCreate Co., Ltd.All Rights Reserved.

全国版救急受診アプリQ助 (Webアプリ) 「呼吸をしていない。息がない。リンク」と読み上げます。正しい？ →同じアプリ内での移動なので、これで問題はありません。 ज 「医療情報ネットへ」と読み上げます。正しい？ →外部ブラウザを立ち上げるので、そのことを伝える必要があります。 Q助は、ダイアログで知らせてくれます。それでも良いでしょう。（次頁） (前のページの続き)次の2つのケースでは、飛び先を補足するようにしてください。 1.アプリ外部のブラウザなど他のアプリで開く場合「(テキスト本文) + (アプリ名)を開く」例.『医療情報ネットへブラウザを開く』注意: OS内蔵ブラウザで開く場合は容易に戻れるので必要ありません2. OSの設定画面を開く場合「(テキスト本文) + OS設定を開く」
1知覚可能1.1テキストによる代替11000非テキストコンテンツA 1.2時間依存メディア1.2.1 音声のみ及び映像のみ(収録済) A 1.2.2キャプション(収録済) A 1.2.3 音声解説、又はメディアに対する代替(収録済) A 1.2.4 キャプション(ライブ) /AA 1.2.5 音声解説(収録済) AA 1.3適用の年1.3.1情報及び関係性1.3.2 意味のある順序A 1.3.3感覚的な特徴A [1.3.4]表示の向き↑ 1.3.5入力目的の特定† AVA 1.4海州可能1.4.1色の使用A
男性の A
AA
AA
AA 1.4.11非テキストのコントラスト↑ AA 1.4.12テキストの間隔1 1.4.13ホパー又はフォーカスで表示されるコンテンツ†  AA
２操作可能2.1キーボード標作可能2.1.1キーポード2.1.2キーポードトラップなし外行券  A 2.1.4 文字キーのショートカット† A 2.2十分な時間2.2.1タイミング調整可能A 3.2.1、フォーカス時A外部分  A A
AA 3.2.4一貫した諏別性AA 3.3入力支持3.3.1 エラーの特定A 3.3.2ラベル又は説明A 3.3.3 エラー修正の提案AA 3.3.4 エラー回避(法的、金融、データ) AA AA
AVA
AA 4 堅牢(robust) 4.1日換車4.1.1構文解析A A A 4.1.2 名前(name)・役割(role)及び値(value) 4.1.3ステータスメッセージ↑ AA [出典] Web Content Accessibilty Guidelines 2.1 (https://walc.jp/docs/WCAG21/）【製作】有限会社時代工房(@jdaikobo) withもんど(@momdo_) 【チェックツールの例】A11yc (https://a11yc.com/check/) 2019年9月版Copyright InfoCreate Co., Ltd.All Rights Reserved. ３理解可能3.1 きみやすを3.1.1ページの営惡A 3.1.2一部分の島島AA 3.2予測可能を3.2.2入力時2.4.4リンクの目的(コンテキスト内) A 2.4.5 複数の手段2.5入力モダリティリ2.5.1ポインタのジェスチャ† A 2.5.2ポインタのキャンセル† 2.5.3 名前(name)のラベル† 2.5.4動きによる起動↑ A Id InfoCreate 2.3発作と単体的民族2.3.1 ３回の閃光、又は閾値以下2.4ナビゲーション可能2.4.1ブロックスキップ2.4.2ページタイトルA A 2.4.3フォーカス順序2.2.2 一時停止、停止、非表示98年  A A A AAおまけ| �
InfoCreate ●ユーザー補助検証ツールhttps://play.google.com/store/apps/details?id=com.goog le.android.apps.accessibility.auditor&%3Bhl=ja&hl=ja
Copyright InfoCreate Co., Ltd.All Rights Reserved.
最後に| �
InfoCreate利用者は声をあげるべき制作者は無関心はやめるべき責任者は自ら責任を果たすべき
Copyright InfoCreate Co., Ltd.All Rights Reserved.
| �
InfoCreate以上