ダイナミックタイプをサポート

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

テキスト要素がユーザーの好みのフォントサイズに拡大するようにする

Not for use with personal data

確認すること

テキスト要素は、Dynamic Type をサポートし、ユーザーのデバイス全体のフォントサイズの好みに合わせてリサイズできるための必要なプロパティを備えているべきです。

note

Supports Dynamic Typeルールは現在デフォルトで実行され、optInToSupportsDynamicTypeプロパティは非推奨となっています。以前このルールにオプトインしていた場合は、コードからプロパティを削除してください。

失敗例 ❌

A screen with body text displayed at the default font size. A callout indicates Dynamic Type is set to the largest size, but the text remains unchanged.

テキスト要素は、ユーザーのDynamic Type設定に対応しない固定フォントを使用しています

Dynamic Type設定を最大サイズに変更した後、テキストは remains unchanged — ユーザーの好みを反映して大きくなりません

通過例 ✅

A screen with body text that has scaled up after increasing the Dynamic Type setting to the largest size.

テキスト要素は、ユーザーのDynamic Type設定に対応する拡張可能なフォントを使用しています

Dynamic Type設定を最大サイズに変更した後、テキストは scales up accordingly ユーザーのデバイスの好みに合わせて変わります

一目でわかる

このルールは、より大きなテキストを必要とする低視力のユーザーにとって、重大な影響があります
テキスト要素はDynamic Typeをサポートし、ユーザーがデバイスのフォントサイズを変更したときにリサイズする必要があります
このルールはAppleのXCUIアクセシビリティ監査APIで実行され、iOS 17.0以降が必要です。
Supports Dynamic Typeはターゲットを絞ったテスト中にのみ実行され、Auto Scanでは結果が生成されません。

ユーザーへの影響

低視力の人々は、サイズを変更できないテキストによって最も影響を受けます。Dynamic Typeはユーザーがデバイス全体で好みのフォントサイズを設定できるiOSの機能であり、アプリはその好みを尊重することが期待されています。テキスト要素がDynamic Typeをサポートしていない場合、より大きなテキストを必要とするユーザーは、設定に関わらずスケールしないコンテンツを読むのに苦労しなければなりません。

Dynamic Typeサポートの確認

テキストを含む画面に移動し、現在のフォントサイズとそのレイアウトを観察してください。
ダイナミックタイプ設定を変更してフォントサイズを大きくしてください:
- シミュレーターを使用している場合:
  1. アクセシビリティインスペクターを開く
  2. インスペクターの左上隅からデバイスをMacからiOSシミュレーターに変更します
  3. インスペクターの右上隅にある設定ボタンを選択
  4. フォントサイズの下で、スライダーを大きな設定に移動します
- iOS 13.0+デバイスを使用している場合:
  1. 設定を開く
  2. アクセシビリティを選択
  3. ディスプレイとテキストのサイズを選択
  4. より大きなテキストを選択
  5. ページの下部にあるスライダーを大きな設定に移動します
アプリに戻り、同じ画面で次のことを確認します。
- アクセス不可: Dynamic Type設定を更新した後、テキストのサイズが変わらなかった
- アクセス可能: テキストのサイズが変わった

問題の修正

Dynamic Typeをサポートする問題を解決するには、ユーザーのDynamic Type設定に対応する拡張可能なフォントを使用するようにテキスト要素を設定します。

UIKit

ユーザーがDynamic Type設定を変更したときに更新されるように、あらゆるテキスト要素にadjustsFontForContentSizeCategory = trueを設定します。システムフォントにはUIFont.preferredFont(forTextStyle:)を、テキストスタイル相対にカスタムフォントを拡大するにはUIFontMetricsを使用します:

// System font — scales automatically to the user's Dynamic Type setting
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom font — scaled relative to a text style using UIFontMetrics
let customFont = UIFont(name: "Georgia", size: 17)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

SwiftUI

iOS 14以降では、Dynamic Typeをサポートする方法は二つあります:

カスタムフォントを使用する場合、フォントがテキスト要素のフォントスタイルに相対的に拡大することを確実にするために.fontプロパティを.custom(_:size:relativeTo:)に設定します。
サイズによるデフォルトフォントを使用すると、テキストは自動的に拡大されます。ただし、フォントスタイルが設定されていない場合、テキスト要素はそのスタイルに応じて拡大されません。例えば、タイトルとして機能するテキストは本文として機能するテキストとは異なる拡大をします。最良の体験のために、要素の期待される動作に合わせてフォントスタイルを指定してください。.font(.system(.largeTitle, design: .rounded))のような修飾子を使用することにより、ページ上で最大のテキストとなり、適切なタイトルとして機能することを期待できます。

React Native

ユーザーのデバイス設定に合わせてスケールするよう、すべてのText要素にallowFontScaling={true}を設定します:

<Text style={{ color: 'black', fontSize: 18 }} allowFontScaling={true}> This text allows font scaling. </Text>

このルールを無視してもいいですか？

Supports Dynamic Typeは弱視のユーザーに重大な影響を提供しており、見つかったすべての問題を是正することを強くお勧めします。例外的にこのルールを無視することが許容される場合もありますが、それは例えば、テキストがロゴやブランドのワードマークとして機能する場合であり、プレゼンテーション自体が重要で、サイズ変更が期待されない場合です。ルールの無視についてさらに詳しく学んでください。

リソース

Deque University コースページ

注意: Deque University のリソースへの完全なアクセスには、サブスクリプションが必要です。

その他のリソース

Webコンテンツアクセシビリティガイドライン (WCAG) 2.1, W3C 勧告
- 達成基準 1.4.4 - テキストのリサイズ
Apple デベロッパードキュメント
- フォントの自動拡大
- SwiftUI での動的タイプ