ラージコンテンツビューア - すべてのユーザーに読みやすさを保証する

(音楽)

こんにちは サマー･パネージです アクセシビリティチームの マネジャーです Large Content Viewerを紹介します 大きな文字が必要な ユーザ向けの機能です アプリケーションのすべての部分を― 誰もが読めるようにする方法を 説明します

まずはLarge Content Viewerの概要と 重要性からお話しします 次にアプリケーションを支える APIについて 最後に使用時の事例と 対応方法についてご紹介します

最初に 開発の背景です

関連機能のDynamic Typeについて 説明します Dynamic Typeは テキストを拡大する機能です 画面に合わせて 小さくすることも― 大きくすることも可能です デフォルトでは ７段階のサイズから選択できます

アクセシビリティ設定からは― さらに５段階のサイズを追加で 選択できます 人によってテキストサイズの好みが 異なるからではなく― 大きな文字を必要としている人が いるからです

Dynamic Typeによる iOSの振る舞いを見てみましょう これはデフォルトのテキストサイズです

サイズを変更すると このように大きくできます しかし一部のテキストサイズは 変更されません

例えば左下のこのボタン テキストを拡大しないと 見づらいユーザなら― タブバーの情報も 大きくしないと見づらいはずです アイコンも小さいままですが― タブバーは拡大したくありません メインのコンテンツの 邪魔になるからです この画面は連絡先のリストです 大きな文字を使用している場合― 長押しで ボタンの表示を大きくできます

ご覧ください 指をどのボタンに 移動させても機能します タップしたいボタンまで 指を滑らせ― 指を離すと タップした場合と 同じ動作をします これがLarge Content Viewerです 視力が弱い人でも― 小さなタブバーやUIでも操作できます Large Content Viewerの使用には 設定が必要です 標準のUIKitを使用していれば 表示されます アクセシビリティのテキストにのみ 有効です カスタムバーか別のカスタムUIを 使用している場合― 標準UIKit同様の動きには APIがいくつか必要です カスタムUIが 拡大表示されない場合の方法です

Dynamic Typeによる スケーリングが望ましいですが―

スケーリングできないこともあります Large Content Viewerの サポート方法を見てみましょう

標準UIKitを使用していれば すでに表示されていますが― 適切な表示には作業が必要です PDFイメージなら― アセットカタログのPreserve Vector Dataにチェックを入れます これでスムーズに拡大できます

PNGなど ベクターデータではない場合は― デフォルトの状態では ぼやけます 修正には大きなイメージが必要です UIBarItemでLargeContentSizeImage プロパティを使います テキスト配置が希望と違うなど 位置を調整する場合は― LargeContentSizeImageInsetsで 調整します

カスタムUIの場合は どうでしょうか？ iOS 13より前は― Large Content Viewerを 構築する必要がありましたが― 現在は標準UIKitバーと 同じ表示となるAPIが追加されました ですからカスタムタブバーの場合― 表示させるボタンを 指定する必要があります またボタンのタイトルあるいは イメージも必要です 標準UIKitの場合は それらは不要です 最後にジェスチャインタラクションを カスタムタブバーに設定します

新しいUILargeContentViewerItem プロトコルは― Large Content Viewerによる表示に 必要な情報を指定します showsLargeContentViewer プロパティは― タブバーのボタンをマークします どのビューに対しても “true”をセットします largeContentTitleと largeContentImageは― 片方でも両方指定でも構いません

ボタンのPDFイメージを 使用するなら― scalesLargeContentImageプロパティに “true”をセットします UIBarItemで確認したように― ベクターデータのイメージは 保存しておいてください イメージを適切に配置するには largeContentImageInsetsを使います

UIViewはこのプロトコルを実装しており セッターも提供します プロパティを設定するだけで サブクラスの設定や上書きは不要です UIボタンやUIラベルのような UIKitクラスは― デフォルト値を返します

付加情報はこのように埋め込みます 次にジェスチャインタラクションを タブバーに追加します addInteractionメソッドで― ドラッグ＆ドロップをサポートします

Large Content Viewerの インタラクションを見てみます いくつかプロパティがあります 簡単なケースでは インスタンス作成に引数は不要です 他のプロパティの変更も不要です 別のジェスチャリコグナイザを 使用する場合は― カスタマイズが必要です これにより詳細に管理する デリゲートを与えます gestureRecognizerも使用して― 別のジェスチャリコグナイザと 関連づけます Large Content Viewerを 有効にするために― isEnabledでチェックします 変更された時は 通知を受けて処理を行います

デリゲートを利用した カスタマイズ方法もあります

まず 画面から指を離した時の 動作を指定します タップ時と同じ動作が求められます このメソッドを組み込まず 標準のUI管理を利用する場合― touchUpInsideイベントが呼ばれます しかし別のジェスチャリコグナイザを 利用している場合は― このメソッドを実装してください 次は 特定のポイントで アイテムを与えるオプションです デフォルトではビュー階層のイベントで 再帰的に呼び出されます しかしビューを使用していなければ 動作しません このメソッドはポイントで表示する アイテムを返します 最後に 収容するviewControllerを 決定します デフォルトではインタラクションを 追加したビューを含む― viewControllerを選択します デフォルトでうまく動作しない場合は ここで指定します

API設定は以上です では使用例を見てみましょう

まず簡単なケースです カスタムバーを使用し UIKitを取得している場合です UIボタンとUIラベルがあります

標準ビューなので ボタンにラベルを追加するだけです showsLargeContentViewerを使います タイトルやイメージの指定は不要です プロパティのビューから 推測されるためです 最後にジェスチャインタラクションを 追加します プロパティの修正は不要 以上です

他の何かを ボタンに使用する場合― 他のAPIが必要です 各ボタンがMyButtonカスタムクラスの インスタンスの場合―

UILargeContentViewerItem プロパティを上書きします showsLargeContentViewerで “true”を返し― テキストとしてタイトルを返します

ベクターデータを使用している場合― 同じイメージを使用することが可能です scalesLargeContentImageで “true”を返せば― 正しいサイズに拡大できます

最後に 別のジェスチャリコグナイザの 例を見てみましょう Appleのアプリケーション Safariです “戻る”ボタンをタップすると 前のページに戻ります 長押しすると ブラウズ履歴が表示されます Large Content Viewerでも 長押しを使います ではタップと長押しの共存は？

もちろん可能です Large Content Viewerが ボタンの情報を表示できるのです しかし一度読み込むと― 長押しは通常の動作を有効にします この場合 longPressRecognizerで 表示時間を延長します ユーザに読む時間を与え 次の動作に移ります 設定が変更されたら 表示時間のアップデートも必要です アクセシビリティ機能の使用を 開始または停止するなら― 表示時間も アップデートしてください 次に UIGestureRecognizerデリゲートを longPressRecognizerにセットします デリゲートのコールバックでは 既存のlongPressRecognizerと― gestureRecognizerの両方が 認識するようにしてください これで片方が 機能しなくなることはありません

実装されたLarge Content Viewerの 振る舞いを見てみます Large Content Viewerの表示時に 指を離すとページが戻ります もっと長押しすると ブラウズ履歴が表示されます

UIは小さいまま 大きな文字が必要なユーザを― 助けることができるのです ただしスケール不可能なUIにのみ Large Content Viewerは使用しましょう Dynamic Typeで問題なければ APIとして使用しないでください Large Content Viewerは― 他のインタラクションを 使用していても動作します アプリケーションの すばらしい機能を妨げません ありがとうございました