tvOSアプリにダイナミックタイプを取り入れるための準備

こんにちは。私はIsisといいます。アクセシビリティチームの エンジニアリングマネージャーです。

今年、tvOS 27のアクセシビリティに関して 素晴らしいニュースがあります。 大きなテキストのサポートが利用可能になりました。 プラットフォーム上のすべてのアプリに システム全体のテキストスケーリングをお届けします。 多くの人は異なるテキストサイズを 必要としていたり、好んでいたりします。 アプリをダイナミックにすることで すべての人が快適な体験を得られます。 tvOSアプリのユーザーたちは このアクセシビリティ機能を待ち望んでいました。 アプリでこの機能を最大限に活用する方法を ご紹介します。 さらに、より大きなテキストのサポートを アクセシビリティ栄養ラベルで示せるようになります。 App StoreのtvOS向けの アクセシビリティ栄養ラベルです。 これは、アクセシブルなアプリを特に探している ユーザーにリーチするための優れた方法です。 大きなテキストをサポートするアプリです。

このセッションでは、まずtvOSで 大きなテキストがどのように機能するかと、 どこで設定できるかについてご説明します。 次に、アプリの細かい部分を特定し、 大きなテキストサイズに合わせて 調整が必要な箇所を見ていきます。 最後に、いくつかの例を通じて テキストサイズに応じた レイアウトの適応方法をご紹介します。

概要から始めましょう。 iOSのDynamic Typeに 慣れている方は、 有利なスタートが切れます！ Dynamic TypeはtvOSでも同じように機能します。 UIKitとSwiftUIはユーザーの設定に基づいて テキストサイズを自動的に調整できます。 ユーザーの好みに応じて対応します。 これにより、ユーザーはテキストサイズを 自分でコントロールできます。 ニーズや快適さに合わせて調整できます。 設定アプリから 大きなテキストサイズをオンにできます。 アクセシビリティ、ディスプレイ、テキストサイズの順に 移動します。 「大」から始まる テキストサイズを選択できます。 「大」から「アクセシビリティXXXL」まで 選択できます。 私はメディアアプリを開発しています。 お気に入りの映画を探して 視聴できるアプリです。 このアプリがこれらの大きなテキストサイズに どのように対応するかをご紹介します。 このメディアアプリには、ナビゲーション用の タブバーが上部にあります。 大きなタイトルと いくつかのアクションボタンがあり、 その下のコレクションビューに 映画ポスターのギャラリーがあります。 大きなテキストサイズをオンにすると、 上部のナビゲーションタイトルが かなり大きくなっています。 タブバーの各ラベルも大きくなり、 インターフェース全体のすべてのテキストが 大幅にスケールアップされています。 標準のUIKitとSwiftUIコンポーネントは、 ラベル、ボタン、 ナビゲーションタブバーなど、 自動的に対応します。 アプリでは、特定して更新する作業のみが必要です。 注意が必要なカスタム要素を 特定して更新するだけです。

大きなテキストでアプリを確認する際には、 いくつかの種類の問題を 特定する必要があります。 アプリが大きなテキストサイズで 実行される場合、 テキストのスケーリングを妨げる 固定フォントサイズを 避けるようにしてください。 Dynamic Typeに対応していないインターフェース、 ハードコードされたサイズや制約など、 テキストの切り捨てなどの問題が 発生する可能性があります。 またはUI要素のクリッピングです。 一部の要素が大きくなったときに必要な パディングとスペースのために レイアウトを調整する必要もあるかもしれません。 私のメディアアプリの例をご紹介します。 映画の説明が表示されるシーンです。 上部にタイトルが表示されており、 下部にテキストラベルとコントロールがあります。

テキストを最大サイズに設定すると、 ほとんどのテキストが大きくなりますが… 左側に1つ、スケールされていない テキスト要素があります。 それは「サインアップ情報」と表示されている キャプションです。 サインアップできるコントロールの上にある キャプションです。 映画を購入またはレンタルできます。 このようなキャプションは ハードコードされたテキストサイズを持っている 特定のレイアウト上の理由がある場合があります。 たとえば、もともとコンテナ内に あったかもしれません。 静的なディメンションや 厳格な制約を持つコンテナです。 予測可能なレイアウトを作成するために 魅力的に見えますが、 推奨されません。 このアプローチは柔軟性に欠け、 大きなテキストに適応できません。 代わりに、レイアウトを柔軟にして ハードコードされた値を削除します。 これはメディアアプリの Description Viewを表すコードです。 VStackには「サインアップ情報」の キャプションが含まれており、 ボタンを含むHStackと 映画に関するその他のテキスト情報が 含まれています。 このコードには大きなテキストに対して いくつかの課題があります。 固定フォントサイズが指定されており、 適応されません。 ユーザーがサイズの設定を 変更しても対応できません。

テキストビューには、 300ポイントへの 固定幅制約があります。

テキストが大きくなると、300ポイントでは テキストに対して幅が足りなくなる場合があり、 テキストの切り捨てにつながる可能性があります。 このキャプションが大きなテキストサイズに 適応するようにするには、 ハードコードされたフォントスタイルを セマンティックなテキストスタイルに置き換えます。 この場合、「caption」を使用します。

これらの変更により、テキストサイズは 動的に大きくなるようになりましたが、 コンテンツが切り捨てられています。

これを修正するために、固定幅を 柔軟な制約に置き換えます。 必要に応じてビューが拡張できるようにします。 テキストビューで固定幅を 置き換えます。 maxWidthパラメーターに infinityを設定します。 これにより、SwiftUIはコンテンツに 必要な幅を使用するよう指示されます。 これらの変更により、テキストビューは 大きなテキストで美しくスケールし、 コンテンツを表示するのに 十分なスペースが確保されました。 完璧です！ アプリ内でこのような一般的な問題を見つけるには、 ハードコードされたテキストサイズを検索し、 標準スタイルに移行してください。

アプリ内でハードコードされた 高さと幅の制約を検索し、 コンテンツが拡張できるように 柔軟な制約を使用してください。 UIKitを使用している場合、 アプローチは似ていますが、 追加のステップが1つあります。 ハードコードされたフォントをテキストスタイルに置き換え、 adjustsFontForContentSizeCategoryを trueに設定します。 これにより、設定が変更されたときに UIKitが自動的に更新するよう指示されます。

ハードコードされた値を修正するだけでは 不十分な場合もあります。 大きなテキストに応じて レイアウトを適応させたい場合があります。 デフォルトサイズの元のレイアウトは 維持しながら。

このコレクションビューを見てみましょう。 各映画ポスターの下にタイトルがついた 6枚のポスターが含まれています。 標準のテキストサイズでは、 画像の下のスペースに タイトル全体が快適に収まります。 大きなテキストを有効にすると、 6つのタイトルを横に並べる スペースが足りなくなります。 テキストが大きい場合には このレイアウトを適応させる必要があります。 こちらがビューのSwiftUIコードです。 LazyHStackを使った 水平スクロールビューを表示しています。 コンテナの内部に各セルの ボタンがあります。

このレイアウトを適応させるには、 まずdynamicTypeSizeの 環境キーパスを読み取ります。 次に、セルのcolumnCountパラメーターを 変更します。 containerRelativeFrameモディファイアで。

大きなテキストサイズが有効になっている場合、 6列の代わりに 一度に4列表示するレイアウトにします。

これによりセルの横幅が広くなり 各タイトルの拡張スペースが増えます。 さらに長いテキストに対応するには、 カスタムのマーキー戦略を検討してください。

このアプリでレイアウトを調整するもう一つの 例をご紹介します。 アプリのこの部分には、さまざまなコンテンツの カードが含まれています。 ビーチの動画や キャンプの動画などです。 各コンテンツカードには 画像が含まれています。 タイトルとサブタイトルも含まれています。 大きなテキストにすると、要素間の 視覚的なパディングが足りなくなります。 テキストがそのスペースで 切り捨てられやすくなります。 解決策の一つは、 条件付きレイアウトを提供することです。 大きなサイズがオンになっている場合に 使用するレイアウトです。 SwiftUIで条件付きレイアウトを 実現する方法をご紹介します。 まず、dynamicTypeSizeの 環境値を読み取ります。 アクセシビリティサイズが オンになっているかを検出します。 次に、VStackLayoutまたは HStackLayoutを作成します。 大きなテキストが使用されているかどうかに 応じて選択します。 AnyLayoutを使用すると この2つのタイプを抽象化できます。 新しいレイアウトを通常のスタックと同じように使います。 テキストサイズに応じて水平と垂直を 動的に切り替えます。 テキストサイズに応じて。 UIKitでは、UIStackViewを使用して axisプロパティを更新します。 preferredContentSizeCategory. isAccessibilityCategoryに基づいて。

registerForTraitChangesを呼び出して UITraitPreferredContentSizeCategoryを渡します。 アプリの実行中にサイズ変更に応じて レイアウトを更新します。

アプリのコンテンツカードで 実際の動作をご覧ください。 大きなテキストサイズが有効になると、 レイアウトが垂直スタックに切り替わります。 これにより、タイトルとサブタイトルが セルの全幅に広がり、 画像と幅を共有する必要が なくなります。 このレイアウトにより、セルが縦に伸びて より多くのスペースを提供します。 コンテンツのためのスペースです。

これで、tvOSで大きなテキストサイズを使って アプリをテストする準備が整いました。 システムテキストスタイルを使用して 改善できる箇所を見つけてください。 レイアウトをカスタマイズして テキストの読みやすさを優先させます。 アクションプランをご紹介します。 ハードコードされたフォントの代わりに 標準テキストスタイルを使用してください。

大きなテキストを有効にして 体系的にテストしてください。

最良の体験のために 必要に応じてレイアウトを適応させてください。 そして、より大きなテキストのサポートを示してください。 tvOS向けのアプリの アクセシビリティ栄養ラベルで。

さあ、あなたのtvOSアプリを すべての人にとってアクセシブルにする番です！