アクセシビリティラベルによるアプリの評価

こんにちは Accessibilityチームの ソフトウェアエンジニア Jamesです 本日は アプリを評価して アプリのプロダクトページに アクセシビリティラベルを 追加する方法を紹介します こんにちは Lisaですデザイナーであり Accessibilityチームでも働いています デザインについて そして アプリをよりアクセシブルにするために できることについて お話しします このセッションでは アクセシビリティラベルのため アプリを評価する方法を説明します Lisaと私で アクセシビリティに関する 基本原則を紹介し 支援をアピールできる機能について 紹介します その中で アクセシビリティを考慮した デザイン方法や VoiceOverおよび Voice Controlでのテスト方法や アクセシブルなメディアを 配信するコツも紹介します セッションを終える頃には アクセシビリティ ラベルで アクセシビリティ支援を アピールするコツがわかるでしょう Appleでは 最高のテクノロジーは すべての人に役立つと考えています アクセシビリティを備えた アプリを設計することで より多くの人たちのもとに届けられます VoiceOverなど 支援技術のサポートを 組み込むことによって アプリは 格段に アクセスしやすくなります App Storeで使われる アクセシビリティラベルは アプリの支援機能をアピールするものです ユーザーが必要とする機能にアプリが 対応しているか 伝えるのに役立ちます アプリがアクセシビリティ機能に 対応していることを示すには アプリの基本的なタスクすべてを ユーザーが実行できなくてはなりません 最初に 基本的なタスクを定義しましょう アプリというのは ダウンロードのきっかけとなった機能と そもそもアプリを使用する上で 不可欠な機能を備えています 初回起動時の体験、ログイン、購入や 設定などが これに該当します ユーザーがアプリでできることを定義します アプリの基本タスクを特定したら アクセシビリティラベルで 利用できる機能について アプリの評価を行います 基本タスクを支援機能に照らして 一つずつ評価するための 戦略を立てます この戦略により アプリで 対応できている機能と そうでない機能を特定しやすくなります すべての対応デバイスで テストを実施するようにしてください iPhone、iPad、Mac製品と Apple Watchなどが該当するでしょう アプリの機能に関連しない支援機能の サポートは 明示しません アプリの使い道について 正確に ユーザーに伝えることが大前提です 正確性を期すため アクセシビリティラベルの ドキュメントをご確認ください 評価基準は ある支援機能に 対応していると認められるために アプリが提供するべきユーザー体験の 標準化を目指して 設定されています こうした基準により App Store全体で アプリのレスポンスの一貫性が保たれます 条件が整えば アクセシビリティラベルを 追加できます App Store Connectで アプリの プロダクトページに追加します アプリが対応している すべてのアクセシビリティ機能が プロダクトページで確認できます アクセシビリティラベルの 柱となるのが アクセシビリティに関する 基本原則です 支援機能を評価する際に役立ちます ところでJames そろそろ私たちが手がけるアプリ Landmarksの出番かもしれませんね まったくですね 何から始めればよいか 教えてもらえますか？ アクセシビリティはデザインから始まります デバイスの操作のしかたに関わりなく 誰もが楽しめるインターフェイスを デザインしたい Jamesが言ったように アクセシビリティ機能をよく理解し Voice ControlやLarger Textなどの 支援機能を有効にして ユーザーがアプリを使うあいだ 何が見え 何が聞こえているかに 配慮することは とても重要です そして できる限り 障がい者コミュニティとつながることです アクセシビリティ機能を 使用するユーザーによるテストは アプリのアクセシビリティについて把握する 最も効果的な方法の一つです たとえば 私の場合 希少なタイプの黄斑変性症で 法律上は目が見えないという扱いです 中心視野に影響する症状で すべてがぼやけて見えます わかりやすく言うと 私がお気に入りのハイキング先に 出かけたとしましょう 木々や岩、前方にのびる道のような 大きなものは見えるのですが 標識を読む場合などは かなり近づかないと細部が見えません iPhoneを使う時は 読書、仕事、個人的な用事など 万事にわたって テキストサイズを最大にしています 障がい者コミュニティでは 私たちには「私たちのことを 私たち抜きに 決めないで」という強い思いがあります 障がいのある人たちの生活に 影響を及ぼす決定を行うなら 当事者の完全参加は必須でしょう アプリのアクセシビリティを 確保するにあたっても 直接影響を受ける人たちが 参加する以上の方法はありません 体験者として言うと アプリが 視覚の不自由な人を 支援するよう設計されていると 大切な利用者として 受け入れられている実感が得られます アクセシビリティラベルは だからこそ 重要なのです 最初の機能セットに 取り掛かりましょう では始めましょう 最初の機能セットは アクセシブルなデザインを適用する 絶好のチャンスになります まずは色から 色はコミュニケーションを強化し 情報理解を助けます 前景色と背景色のコントラストは 十分つけておく必要があります テキストが読みやすくなり ユーザーが探しているものも 見つかりやすくなります コントラストの高いカラースキームを使用して アプリを設計することが大切です デフォルト表示で 最低限のコントラストを 実現できていない場合は の設定をオンにして 十分なコントラストが得られるか確認します このアプリは意図的に 高コントラスト色を 使用してデザインしたのですが 一部の色で 最低コントラストに 達していないと判明しました そこで 設定に 利用できる 代替色に変更しました ライトとダーク 両方の外観で 同じ対応が必要になります Landmarkアプリの基本タスクで コントラストを入念にテストした結果 他に問題は見つかりませんでした アクセシビリティラベルで コントラストは十分と 記載するよう検討します 次は ダークインターフェイスです 光に敏感であるとか 暗めの背景を好むという理由で ダークモードを使うユーザーも沢山います 画面上に 大きめの 白や明るい領域があると 不快に感じたり 肉体的に 痛みを感じるケースさえあります 私の目は 光にとても敏感で 暗めのインターフェイスの方が 文字は読みやすくなります 皆さんのアプリが ダークインターフェイス未対応である場合は 必ず ダークモードに 対応できるようにしてください Appleでは ダークモードに対応した アプリを設計していますが 念には念を入れて 基本的なタスクを確認します 反転（スマート）をオンにした状態も 確認します 反転（スマート）は インターフェイスの 色を反転させる アクセシビリティ機能です どのメディアの色も 反転しないようにする必要があります アプリが暗い背景にも 対応できることを確認したら アクセシビリティラベルに ダークインターフェイスを追加できます テキストを読むために 文字サイズの拡大を 必要とする人もいます アプリをデザインする際は テキストサイズを 最低でも200%は 拡大できるようにしましょう 理想的には もっと大きくてもいいですね 自分の場合 310%は必要です できれば 200%より大きい テキストサイズに対応しましょう 文字サイズの拡大にも対応できる レイアウトを デザインすることも重要です 文字の重複や 過度の切り詰めが 生じないようにしましょう 大きなテキストサイズにも対応できるよう スペースや行数を確保します サイズを拡大できない コントロールについては 別のデザインオプションがないか ドキュメントで確認できます アプリでLarger Textに対応する ベストな方法の一つが ダイナミックタイプの採用です 詳しくはWWDC24のビデオ 「Get Started with Dynamic Type」で 紹介しています iOS向けアプリの基本タスク全体で テキストサイズを200%以上 拡大可能にしている場合は アクセシビリティラベルに Larger Textを追加できます アプリをテストしてみましょうか いいですね 大きなテキストは 必要とする 人にとって どういう働きをするのでしょう 私たちは 一緒に働いてきました あなたが 大きなテキストを 利用していると知っています 質問してもいいですか？ もちろん 問題が見つかったら記録しますね アクセシビリティ機能で テキストサイズを大きくしてあります このiPhoneでは テキストサイズが 235%に設定されています Landmarksアプリで デフォルトのサイズよりも テキストが大きくなっています Landmarksの売りの一つに 観光名所をグループ化して コレクションにまとめる機能があります ハイキング用のコレクション作成を 手伝ってもらいました ところでAccessibilityチームの コレクションを更新するのはどう？ いいですね 次のハイキングの候補地が 見つけられるかも 完璧だね さっそく コレクションを見てみましょう まず ボタンをタップして ボタンをタップします ええと 「2023 Trip」コレクションは 位置が少しズレているね 確実にバグだけど どう思う？ 美しくはないけれど コレクション名は読めますね Larger Text対応と表示する 妨げにはならないでしょう ただ レイアウト修正用に メモは必要ですね メモしておきます 細かく見ていきましょう

ここは説明が切れていますね 本来ならテキストを折り返して 複数行に表示するべきでしょう バグリストに追加しよう コレクションを編集します

ちょっと待って テキストフィールドの説明が 拡大されないのはどうして？ スクロールできるか確認します 大きいテキストサイズ向けに 説明フィールドを拡大することは できないようですね スクロールはできるけれど ちょっと手間かな では ここまでの情報から 感想をもらえますか？ 正直なところ バグのせいで コレクションの情報が 得づらくなっていますね Larger Text対応と掲示するなら バグの修正が必要でしょう そうですね 残りの基本タスクをテストしてから デベロッパドキュメントで バグの解決策を探しましょう テキストフィールドを大きくすれば 大きいテキストに対応できるし テキストを切り捨てるかわりに 次の行に折り返すこともできます さしあたり現時点では LandmarksがLarger Textを サポートしているとは言えませんね 問題を修正して 他の基本タスクをテストできたら App Store Connectに戻って サポートの表示ができるでしょう 次は 色の話をしましょう 色を使ってデザインするときに 重要なポイントがあります すなわち 色の知覚のしかたは 人それぞれだということです 多くのアプリが 色で情報を伝えています たとえば 成功や失敗などのステータスを 赤や緑の色を使って 伝えているアプリがあります 色覚に異常のある人は この情報を 見逃してしまう可能性があります デザインする際は 色のほかにも 図形やアイコンやテキストを使用して 重要な情報が伝わるようにしましょう アプリの色使いを カスタマイズ可能にするのもよいでしょう Appleでは以前から ボタンなど 重要な要素が目につきやすいよう 色とアイコンに配慮して アプリをデザインしています こうした要素のデザインでは 色だけに頼ってはいけません 評価基準を確実に満たすため 色の使いかたに注目しながら 基本タスクを確認しましょう Landmarksアプリでは 色以外の情報伝達手段も 使っていることが確認できているので Differentiate Without Color Aloneを ラベルに 追加してよいでしょう 次はモーションですね モーションはアプリ体験を豊かにできる反面 一部の特定の動きは 重度のめまいや吐き気を起こす トリガになる点に 注意が必要です これが原因で アプリの使用に 至らない可能性があります トリガになるのは たとえば ズームやスライドトランジション フラッシュや点滅 自動再生アニメーション 視差エフェクトなどです これを避けるには 設定で 視差効果を減らす機能をオンにします この設定をサポートするには 基本タスクを実行して 既知のトリガに該当する アニメーションがないか探します 問題のあるアニメーションを削除するかわりに 変更を加えるというやり方もあります 既知のトリガがいずれも アプリに含まれていなければ Reduced Motion対応と 表示することができます アプリを評価する際は モーションに細心の注意を払って 基本タスクを実行しましょう 問題がある または注意を要する アニメーションの取り扱いについては ドキュメントで確認しましょう トリガになるモーションの削除が 確認されたら アクセシビリティラベルに Reduced Motionを追加できます デザインの他にも 対応APIを使用して アクセシブルなアプリを構築すれば 支援技術を頼りにしているユーザーにも 皆さんのアプリを 楽しんでもらえます ここからは これらテクノロジーのうち Voice ControlとVoiceOverの 2つに注目してみます Voice Controlは Appleの支援技術の一つで 音声でのデバイス制御を可能にします Voice Controlでは 音声コマンドを使って タップやスワイプその他を実行できます アプリの中で タッチ操作に 反応する箇所を Voice Controlで 操作できるか もれなく確認することが重要です ボタンや 検索フィールドなどです Voice Controlは ビューのアクセシビリティ要素について アプリからのメタデータを利用しています たとえば ボタンの アクセシビリティラベル修飾子は ボタンの名前を指定します 名前を読み上げると Voice Controlがタップしてくれます 音声コントロールサポートアプリの 評価方法に注目しましょう ただし詳細については デベロッパドキュメントをご覧ください そういえば 音声コントロールで 観光名所を探す機能は 確実に需要があるでしょうね アプリをテストしてみましょう そうですね ユーザーが音声コマンドだけで 基本タスクを実行できるか 確認してみましょう 音声コントロールをオンにして Landmarksアプリを開きます 「名前を表示」と発話して アイテムに説明的で正確な ラベルがあるか確認します 音声コントロールを使用して 基本タスクを実行します 操作が可能なら コマンドを使用して スクロールやドラッグや その他の操作を実行します 音声コントロールコマンドだけで 操作できることが大前提で タッチやカーソルを使う必要がまったくなく 音声コマンドだけで操作する ユーザーでも アプリの機能を 利用できることが重要です 音声コントロールコマンドで アプリを使用できると確認されれば アクセシビリティラベルに Voice Controlを追加できます 次はVoiceOverです ここで朗報です Voice Controlで実行した APIでの作業は VoiceOverでも有効です VoiceOverは Appleの支援技術の一つで ユーザーは画面をまったく見なくても インターフェイスをナビゲートできます ジェスチャや キーボードコマンドを使用して インターフェイス内で VoiceOverフォーカスを移動できます フォーカスをボタンに移動させると VoiceOverがボタンの名前を読み上げます 同様に フォーカスをテキストに移動させると VoiceOverがこれを読み上げます 別のジェスチャや キーボードコマンドを使うと VoiceOverが その項目をアクティブ化します VoiceOverで Landmarksの 評価を手伝ってもらえませんか？ 支援技術の仕組みは知っていますが VoiceOverをどう使うのか とても興味があります VoiceOverは 画面の詳細が 見えないときに よく使っています なるほど 作業中に 質問をしてもいいですか？ - もちろんです - ありがとう

大まかなところでは 基本タスクを VoiceOverコマンドで実行できるか 確認していきます まず アクセシビリティのショートカットで VoiceOverをオンにします

「VoiceOverオン、Landmarks、 サイドバーを切り替え、ボタン」 VoiceOverが 「VoiceOverオン」と言った後 最初のボタンの名前を言いました ここからが いよいよ本番です VoiceOverでは アプリの構造を どのように把握するのでしょうか？ 右にスワイプして VoiceOverで ボタンを一つずつフォーカスしてみます

「検索、検索フィールド」 「バッジを表示、ボタン」 「注目の観光名所、富士山、ボタン」 「利用可能なアクション」 ボタンにフォーカスを移動させると 名前と要素のタイプが聞こえてきます これで 選択中の項目と 操作内容が分かります アプリのレイアウトを把握するため 画面上で指をドラッグしてみます 「サハラ砂漠、ボタン」 「セレンゲティ、ボタン」 「サハラ砂漠、ボタン」 これで サハラ砂漠がセレンゲティの 左側にあることがわかります その逆も然りです VoiceOverによる操作の違いを 十分考慮することが ポイントになりそうです 通常ならタッチ操作で フォーカスを移動させます VoiceOverで Accessibilityチーム コレクションに追加してみましょう 通常は 左側に サイドバーがあります VoiceOverを使って検索し アクティブ化します

「アフリカ」 「エベレスト、ボタン」 「武陵源、ボタン」 「富士山、ボタン」 「アジア」 「注目の観光名所、富士山、ボタン」 「バッジを表示、ボタン」 「検索、検索フィールド」 「サイドバーを切り替え、ボタン」 「サイドバーを切り替え、ボタン」 ボタンが見つかるまで 右にスワイプします 「サイドバー、Landmarks、ボタン」 「地図、ボタン」 「Collections、ボタン」 見つかりました ダブルタップしてアクティブにします 「選択、Collections」 VoiceOverはボタンが 有効なことを確認して Collectionsビューを表示します Accessibilityチームのコレクションを 探して 開いてみましょう まず サイドバーを閉じます 「地図、ボタン」 「Landmarks、ボタン」 「サイドバーを切り替え、ボタン」 「サイドバーを切り替え」 「検索、検索フィールド」

「バッジを表示、ボタン」 「お気に入り」 「サハラ砂漠、ボタン」 「サウスシェトランド諸島、ボタン」 「ロッキー山脈、ボタン」 「ウユニ塩湖、ボタン」 「マイコレクション」 「Accessibilityチーム、3つの項目、ボタン」 開いてみましょう 「Accessibilityチーム」 あらかじめ追加しておいた観光名所を 確認しましょう 「Accessibilityチーム ハイキング先候補」 「グランドキャニオン、ボタン」 「ナイアガラの滝、ボタン」 「ジョシュアツリー、ボタン」 「ジョシュアツリー、ボタン」 「利用可能なアクション」 ジョシュアツリーが最後の項目ですね いいリストです では ミュアウッズを コレクションに追加してみます 編集ボタンを探します 「ナイアガラの滝、ボタン」 「グランドキャニオン、ボタン」 「Accessibilityチーム ハイキング先候補」 「Accessibilityチーム」 「検索、検索フィールド」 「編集、ボタン」 「編集」 「選択済み、選択済み、ボタン」 「検索、検索する」 「名称」 「Accessibilityチーム」 「説明」 「Accessibilityチーム ハイキング先候補」 「Landmarks」 「選択、ボタン」 「観光名所の見出しを選択」 「選択、アジアを選択、見出し」 「富士山」 リストをすばやく スクロールさせるには 3本指で上にスワイプします 「5ページ中2ページ目」 「5ページ中3ページ目」 ミュアウッズを コレクションに追加します 「キルキュフェットル山」 「北アメリカ、見出し」 「選択、グランドキャニオン」 「選択、ナイアガラの滝」 「選択、ジョシュアツリー」” 「ロッキー山脈」 「モニュメントバレー」 「ミュアウッズ」 見つかりました コレクションに追加しましょう 「選択、ミュアウッズ」 ありがとう 色々ヒントが得られました VoiceOverユーザーの Landmarks利用法に関する コンテキスト情報が増えました 自分はこうしたジェスチャに 不慣れなのですが 何かコツはありますか？ チュートリアルも設定操作も インタラクティブで VoiceOverの使い方を 教えてくれます VoiceOverを頼りにしているユーザーと 実際に話をして 日々の使用から浮かんできた さまざまなフィードバックを得ることです 基本タスクに ハードルが隠れていないか フィードバックを得るまでは なかなか分からないものです このあと 内部テスターからの フィードバックも収集して 他の基本タスクもVoiceOverで操作して 評価を終える予定です 他に問題がなければ サポートの表示を出します ここまで アプリのユーザーを 支援するための デザイン上の判断や 支援技術について紹介してきました メディアのアクセシビリティについては アクセシビリティラベルを介して 必要とする人たちに伝えることができます キャプションは メディアの再生中に 会話その他のオーディオコンテンツを 説明するテキストを表示する機能です キャプションによって 耳の不自由な方は 発話、非言語コミュニケーション、音楽や 効果音などの重要な情報を 得ることができます ビデオやオーディオコンテンツの キャプションに 対応するようにしましょう アプリがキャプション機能に 対応することを確認できれば アクセシビリティラベルに キャプションを追加できます Landmarksアプリでのキャプションテスト中 私たちは興味深いポイントを 確認できました 基本タスクの実行後に 私たちのアプリには 動画や音声のみの コンテンツがなかったのです そのため Landmarksのキャプション対応に 触れる必要はないと判断しました 問題ありません アプリに対して ユーザーが期待する機能を 正確に反映できています Audio Descriptions機能は メディアの主音声の 自然な切れ目を利用して ビジュアルコンテンツを説明する情報を 視聴者に提供します ユーザーが 音声ガイドを含むコンテンツを 見つけられるようにしましょう ビデオストリーミングサービスアプリの 多くに ADアイコンが添えられています アプリ内の音声ガイドを見つけて オンにしてもらえたなら サポートする姿勢を示すことができます アプリがAudio Descriptionsに 対応することを確認できたら アクセシビリティラベルに この機能を追加できます キャプションと同様 Landmarksが提供する コンテンツは音声ガイドが不要であるため Audio Descriptionsへの 対応については 表示しません アプリのアクセシビリティを 広くアピールする準備ができました App Store Connectの プロダクトページに アクセシビリティラベルで 機能をアピールしましょう 皆さんのWebサイトへのリンクを追加して アクセシビリティに関する追加情報を 提供するのもよいでしょう Landmarksの場合はどうなるか 確認してみましょう Landmarksアプリの機能ごとに 基本タスクの評価を行って このアプリについて 多くのことを学びました Sufficient ContrastやDark Interface Differentiate Without Color Alone Reduced MotionやVoice Control そしてVoiceOverのサポート要件を 満たしていることが分かりました Larger Textに問題が見つかりましたが アクセシビリティラベルに 追加する前に 修正することに決めました クローズドキャプションと 音声ガイドについては アプリには関係ないので 追加しません App Store Connectの プロダクトページに移動します アクセシビリティラベルの サポート済み機能を選択しました Appleの アクセシビリティ Webサイトへのリンクも追加しました 公開準備も整いました Appleのアプリを採用して アクセシビリティラベルを 使っていただける時が 待ちきれません アプリをアクセシブルにするため 皆さんが成し遂げた 素晴らしい成果を 共有しやすくなったことを 嬉しく思います デベロッパドキュメントを確認して 今すぐアプリの評価を開始できます アクセシビリティ機能を必要とする人たちの 協力を得ることを 忘れないでください VoiceOverやVoice Controlなどの 使い方を じっくり学びましょう 障がい者コミュニティに属するユーザーも 皆さんのアプリが楽しめることが すぐに分かる仕組みができました アプリのアクセシビリティを 存分にアピールしましょう アプリデザインのなるべく早い段階で アクセシビリティについて検討しましょう アプリの基本タスクを操作して アクセシビリティ機能を一つずつテストし サポート表示をするべき機能はどれか 判断しましょう 準備ができたら プロダクトページの アクセシビリティラベルで アクセシビリティ対応アプリと アピールしましょう 評価基準についての詳細と アプリのアクセシビリティ体験を 向上させる方法については アクセシビリティラベルの ドキュメントをご覧ください 本日はご視聴ありがとうございました Landmarksアプリの 良さがわかったところで Accessibilityチームでハイキングに 行くのはどうかな？ 楽しそうね！