スマホのアクセシビリティ機能お試し大会

Transcript

1. 　 スマホのアクセシビリティ機能お試し大会 Rikiya Ihara @magi1125
2. 2 席替え挙手アンケート • 英語でのコミュニケーションのほうが得意なかた！ ◦ 運営サポート上、特定のテーブルに集まって頂けるとありがたいです • iPhone12以降 / 視線トラッキング対応のiPadをお持ちのかた！ ◦ 各テーブルに2名以上になるとありがたいです • スクリーンリーダーを使ったことがあるかた！ ◦ 各テーブルに1名以上いるとありがたいです
3. 　 3 伊原 力也 Rikiya Ihara @magi1125 モバイルアプリアクセシビリティ入門 iOS＋Androidのデザインと実装 https://webapp-a11y.com
4. 4 前置き 今回は、実際にアクセシビリティ機能を参加者とともに体験しつつ、 意見交換をする場を開催します！ アクセシビリティの一歩目は、利用状況を知ることから始まります。 そして、その手がかりは、実はあなたの手の中にあるのです。 なお、ふだんからアクセシビリティ機能を使っている方もぜひご参加ください！ 「こんな風に使っているよ」を共有頂けると嬉しいです。
5. 5 事前準備 • お持ちのスマホを取り出してください。 画面上に見せてはいけないものが無いか 確認・調整しておいてください • PCやタブレットをお持ちの方は、 この資料を表示できるようにすると便利です。 Connpassの「参加者への情報」か、 この２次元コードから辿れます • 「スクリーンリーダー」のお試しでは、 必要に応じてイヤホン等をご利用ください • 「視線トラッキング」のお試しでは、スマホ/タブレットのスタンドが 必要になります。取り出せる状態にしてください
6. 6 本日のメニュー 1. 画面表示の変更 2. スクリーンリーダー 3. 視線トラッキング • 設定方法の説明→操作デモ→各自お試しタイム　の繰り返しで進行します • お試し中の雑談、歓迎です！ぜひ見せあいながら進めてください • わからないところがあったらお気軽にお声がけください！ • ただ人数が多いので、班の中でもサポートできそうならぜひ！
7. 　 1. 画面表示の変更
8. 8 画面表示の変更 • 文字サイズの変更 • 画面の色を反転 • 画面のズーム
9. 9 文字サイズの変更 • iPhone ◦ 設定 > アクセシビリティ > 画面表示とテキストサイズ > さらに大きな文字 • Android ◦ 設定 > ユーザー補助 > フォントサイズ ◦ 設定 > ユーザー補助 > 表示サイズ
10. 10 画面の色を反転 • iPhone ◦ 設定 > アクセシビリティ > 画面表示とテキストサイズ > 反転(スマート/クラシック) ◦ ショートカットに登録 ▪ 設定 > アクセシビリティ > ショートカット> 反転(スマート/クラシック) • Android ◦ 設定 > ユーザー補助 > 色反転 ◦ ショートカットに登録 ▪ 上記の設定画面で「色反転のショートカット」を選択
11. 11 補足：ショートカットの呼び出し • iPhone ◦ サイドボタンをトリプルクリック ▪ 複数のショートカットがある場合は、一覧から選択 • Android ◦ ユーザー補助機能ボタン(右下に出る) or 音量大と小の両方のボタンを長押し ▪ ショートカットを設定する箇所で、どちらに登録するか選べる ▪ ユーザー補助機能ボタンに複数のショートカットがある場合は、 長押しして切り替え
12. 12 画面のズーム(iPhone) • 設定 > アクセシビリティ > ズーム機能 ▪ ズーム領域は「フルスクリーンズーム」 • ショートカットに登録 ◦ 設定 > アクセシビリティ > ショートカット> ズーム機能 • 操作方法 ◦ iPhone画面で拡大する - Apple サポート (日本)
13. 13 画面のズーム(Android) • 設定 > ユーザー補助 > 拡大 • ショートカットに登録 ◦ 上記の設定画面で「拡大のショートカット」を選択 • 操作方法 ◦ 画面上で拡大操作を使用する - Android のユーザー補助機能 ヘルプ
14. 14 どのような設定で使うかはおまかせします ただし、ふだんの自分の使い方とハッキリ違う形も試すのをオススメします！ • 文字をとても大きく拡大してみる • 画面反転で使ってみる • 画面を大きく拡大して使ってみる • 上記を組み合わせて使ってみる
15. 15 試してみましょう • 会場提供であるLINEヤフーさんのサイトを見てみましょう！ ◦ https://www.yahoo.co.jp/ • ただし、「文字サイズの変更」は、Webサイトには適用されない場合が多いです。 手持ちのアプリで文字が拡大されるものがあるか、探してみましょう！
16. 　 2. スクリーンリーダー
17. 17 チートシートを使います • 私の同僚・共著仲間の@ymrlが作ったチートシートですすめます ◦ iOS VoiceOver / Android TalkBackチートシート • LINEヤフーさんのチートシートには英語版があるので、そちらでもOK ◦ VoiceOverチートシート (iOS / FaceID搭載端末) ◦ TalkBackチートシート
18. iOS VoiceOver / Android TalkBackチートシート 起動と終了 • ホームボタンのないiPhone: サイドボタン3回クリック • ホームボタンのあるiPhone: ホームボタン3回クリック • Android: ⾳量の「+」と「-」ボタンを同時に⻑押し • SiriやGoogle Assistantに「VoiceOver/TalkBackをオン/オフ」 初期設定 • iPhone: 設定 > アクセシビリティ > ショートカットで 「VoiceOver」 にチェック • Android: ユーザー補助設定ツールのインストールを確認 ◦ 設定 > ユーザー補助 > TalkBackのショートカットをオン ◦ 「TalkBackのショートカット」を「⾳量ボタンを⻑押し」に VoiceOver / TalkBackの基本の操作 • 右/左へのスワイプで、戻る / 進む • タップで、その場所を読む • ダブルタップで、操作を確定 VoiceOverの「ローター」ジェスチャー • 2本指で「ねじる」ジェスチャーで、 ローターを起動‧操作 • 1本指の上下スワイプ時の操作を変更 ◦ ⽂字、⾒出し、読み上げ速度など その他のVoiceOverジェスチャー • 画⾯下端/上端からのスワイプで、 ◦ 効果⾳が2回鳴ってから放すと、 ホーム / コントロールセンター ◦ 3回で放すと、アプリ切替 / 通知 • 3本指スワイプで、スクロール • 3本指トリプルタップで、画⾯⾮表⽰ TalkBackの「読み上げコントロール」 • 3本指で上下左右どれかへスワイプ • 3本指でスワイプを繰り返して、 1本指の上下スワイプ時の操作を変更 ◦ ⽂字、⾒出し、読み上げ速度など ひとつ進む 読み上げコントロールで 選択した操作 Android TalkBackの 主なジェスチャー タップでその場所を読む ダブルタップで操作を確定 操作‧設定⽅法は機種‧バージョン‧設定等により異なる場合があります。 このチートシートはCC-BY 4.0でライセンスされています / © 2024 ymrl 3本指スワイプで 読み上げコントロールを 起動‧操作 3本指 ⽂字、⾒出し、 読み上げ速度など ひとつ戻る ホーム TalkBackメニュー 戻る TalkBackメニュー 1本指スワイプでの直⾓ジェスチャー アプリ切替 ⾳声コントロール 通知 画⾯検索 TalkBackの直⾓ジェスチャー 2本指 2本指でゆっくりスクロール 往復スワイプでスクロール 下へ 上へ その他のTalkBackジェスチャー • 2本指スライドで、スクロール • 左→右、右→左の往復で、 ⼀気にスクロール • 3本指タップでTalkBackメニュー ひとつ進む コントロール センター 通知 センター ローターで 選択した操作 ホーム アプリ 切替 2本指でねじって ローターを起動 1本指上下スワイプの 操作を変更 3本指スワイプで スクロール iOS VoiceOver の 主なジェスチャー タップでその場所を読む ダブルタップで操作を確定 3本指スワイプ ⽂字、⾒出し、 読み上げ速度など ひとつ戻る 戻る‧通知を消す 2本指スクラブ Z字を描く 左→上で、アプリ切替 上→左で、ホーム 下→左で、戻る 右→下で、通知
19. iOS VoiceOver チートシート 起動と終了 • ホームボタンのないiPhone: サイドボタン3回クリック • ホームボタンのあるiPhone: ホームボタン3回クリック • 「Hey Siri, VoiceOverをオン」「Hey Siri, VoiceOverをオフ」 初期設定 設定 > アクセシビリティ > ショートカットで「VoiceOver」 にチェック 基本の操作 • 右/左への1本指スワイプで、ひとつ進む / ひとつ戻る • 1本指タップで、その場所を読む • 1本指ダブルタップで、操作を確定（アクティベート） 「ローター」で、1本指の上下スワイプ時の操作を変更 • 2本指で「ねじる」ジェスチャーをくり返して、 ローターを起動‧操作（逆回転も可能） • ⽂字、⾒出し、読み上げ速度などが指定できる ヘルプモードで、ジェスチャーで発⽣する操作を確認 • 4本指ダブルタップで、ヘルプモードを開始 • ジェスチャーをすると発⽣する操作が確認できる • 再度の4本指ダブルタップで、ヘルプモードを終了 操作‧設定⽅法は機種‧バージョン‧設定等により異なる場合があります。 このチートシートはCC-BY 4.0でライセンスされています / © 2024 ymrl 画⾯上端‧下端からのスワイプ • 画⾯下端からのスワイプで“ポッ”の回数を聞いて、 ◦ 2回⽬で放すと、ホーム画⾯ ◦ 3回⽬で放すと、アプリスイッチャー • 画⾯上端からのスワイプで“ポッ”の回数を聞いて、 ◦ 2回⽬で放すと、コントロールセンター ◦ 3回⽬で放すと、通知センター その他のVoiceOverジェスチャー • 2本指ダブルタップで、⾳楽や動画の再⽣‧停⽌ • 3本指ダブルタップで、VoiceOverを消⾳ • 3本指トリプルタップで、画⾯を⾮表⽰ / 表⽰ （スクリーンカーテン） • 2本指4回タップで、VoiceOverクイック設定を開く ひとつ進む コントロール センター 通知 センター ローターで 選択した操作 ホーム アプリ 切替 2本指でねじって ローターを起動 1本指上下スワイプの 操作を変更 3本指スワイプで スクロール iOS VoiceOver の 主なジェスチャー タップでその場所を読む ダブルタップで操作を確定 3本指スワイプ ⽂字、⾒出し、 読み上げ速度など ひとつ戻る 戻る‧通知を消す 2本指スクラブ Z字を描く 画⾯を操作するジェスチャー • 1本指トリプルタップで、⻑押しを実⾏ • 2本指スクラブで、戻る‧通知を消す • 3本指スワイプで、スクロール • 2本指トリプルタップで、項⽬セレクタを開く 項⽬セレクタを閉じるには、2本指スクラブ カスタムのアクション‧使⽤可能なアクション • 1本指上下のスワイプで、アクションを選択 • 1本指ダブルタップで、アクションを確定 読み上げ内容を視覚的に表⽰するには 設定 > アクセシビリティ > VoiceOverで、「キャプションパネル」をオン
20. Android TalkBackチートシート 起動と終了 • ⾳量の「+」と「-」ボタンを同時に⻑押し • 「OK Google, TalkBackをオン」「OK Google, TalkBackをオフ」 初期設定 設定 > ユーザー補助 > TalkBackのショートカットをオン / 「TalkBackのショートカット」を「⾳量ボタンを⻑押し」に設定 1本指の上下スワイプ時の操作を変更 • 3本指で上下左右どれかへスワイプを繰り返して、 1本指の上下スワイプ時の操作を変更 • ⽂字、⾒出し、読み上げ速度などが指定できる ひとつ進む 読み上げコントロールで 選択した操作 Android TalkBackの 主なジェスチャー タップでその場所を読む ダブルタップで操作を確定 3本指スワイプで 読み上げコントロールを 起動‧操作 3本指 ⽂字、⾒出し、 読み上げ速度など ひとつ戻る ホーム TalkBackメニュー 戻る TalkBackメニュー 1本指スワイプでの直⾓ジェスチャー アプリ切替 ⾳声コントロール 通知 画⾯検索 2本指 2本指でゆっくりスクロール 往復スワイプでスクロール 下へ 上へ 基本の操作 • 右/左への1本指スワイプで、ひとつ進む / ひとつ戻る • 1本指タップで、その場所を読む • 1本指ダブルタップで、操作を確定（アクティベート） 画⾯のスクロール • 2本指スワイプで、スクロール（ゆっくり操作！） 直⾓ジェスチャーによるさまざまな操作 TalkBackのジェスチャーの種類 タップ（1〜4本指） 直⾓ジェスチャー（1本指） 往復ジェスチャー（1本指） スワイプ（1〜4本指） 左→上の直⾓ジェスチャーで、アプリ切替 上→左の直⾓ジェスチャーで、ホーム 下→左の直⾓ジェスチャーで、戻る 右→下の直⾓ジェスチャーで、通知 右→上の直⾓ジェスチャーで、⾳声コントロール 左→下の直⾓ジェスチャーで、画⾯検索を起動 上→右 または 下→右の直⾓ジェスチャーで、 TalkBackメニューを開く 下→上 / 上→下の往復ジェスチャーでもOK その他のジェスチャー • 2本指タップで、⾳声を⼀時停⽌‧再開 • 2本指ダブルタップで、メディアの再⽣‧停⽌ • 2本指トリプルタップ→⻑押しで、TalkBackを消⾳ • 4本指ダブルタップで、TalkBackチュートリアル 左→右 右→左の往復ジェスチャーで、スクロール 読み上げ内容を画⾯に視覚的に表⽰するには TalkBack > 設定 > 詳細設定 > デベロッパー向けの設定 で、 「⾳声出⼒を表⽰」をオン 操作‧設定⽅法は機種‧バージョン‧設定等により異なる場合があります。 このチートシートはCC-BY 4.0でライセンスされています / © 2024 ymrl
21. 21 音声を文字で見たい場合は… • iOS ◦ 設定 > アクセシビリティ > VoiceOver > キャプションパネル • Android ◦ 設定 > ユーザー補助 > TalkBack > 設定 > 詳細設定 > デベロッパー向け 設定 > 音声出力を表示
22. 22 お試しの順番 1. (Androidの一部の方は)インストール 2. ショートカットへの登録、読み上げの文字表示の設定 3. 起動と終了の練習（困ったらいったん終了→起動）、音量の調節 4. （iOS)3本指トリプルタップ：スクリーンカーテンのオンオフの練習 5. 項目タップ：タップした箇所の読み上げ 6. ２本指タップ：読み上げの停止・再開 7. 1本指で左右スワイプ：項目切り替え、ダブルタップで実行 8. １本指で上下スワイプ：機能を学ぶ（iOS: ローター、Android 3本指スワイプ) 9. 画面スクロールを試す（iOS: ３本指スワイプ、Android: ２本指スワイプ）
23. 23 試してみましょう • 会場提供であるLINEヤフーさんのサイトを見てみましょう！ ◦ https://www.yahoo.co.jp/ • もし「慣れてきたぜ」という方がいたら… スクリーンカーテンをオンにして操作してみましょう！ ◦ iOS: 3本指トリプルタップ ◦ Android: 上→右 または 下→右の直角ジェスチャーで、 TalkBackメニューを開く > 画面を非表示
25. 　 3. 視線トラッキング
26. 26 視線トラッキング • iPhone/iPadのみ。新しめの機種 × iOS18以降で使えます ◦ 目の動きでiPhoneを制御する ◦ 目の動きでiPadを制御する • デバイスを固定しないと操作が難しいので、 スタンドをお持ちの方はご使用ください • iPhone/iPadユーザーのかたは、 Androidユーザーの方のお試しに協力いただけるとありがたいです！
27. 27 操作デモ • iPhone/iPadを安定した場所に置き、３０ｃｍ離す（iPadは50cm） • 設定 > アクセシビリティ > 視線トラッキング • 調整が始まる ◦ 途中でやめたいときは画面をタップ • 調整が終わると操作可能になる ◦ スクロールなどの操作はAssistiveTouch（画面に出続ける黒丸）から行う • 画面の左上の角を凝視すると、再度調整が始まる
28. 28 試してみましょう • 会場提供であるLINEヤフーさんのサイトを見てみましょう！ ◦ https://www.yahoo.co.jp/
29. 　 まとめ
30. 30 お伝えしたいこと • 試してみることで、イメージが持てる ◦ １週間試した方も。1週間VoiceOver生活 • しかし、それは「当事者の実際の体験ではない」ことも事実 ◦ 目隠ししても、ロービジョン体験メガネをしても、 見えていない/見えにくい人の経験や体験とは異なる • それでも、試してみることから想像がはじまり、そこから対話や理解が始まる。 それ無しで技術的に改善しても「誰のためのアクセシビリティ？」になってしまう • 技術書を書いてみて、アクセシビリティの一歩目は技術よりも対話と理解から 始めるべきだと、改めて思いました。みなさんはどう考えますか？
31. 　 スマホのアクセシビリティ機能お試し大会 Rikiya Ihara @magi1125