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

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

note

これは実験的なルールのため、その結果はベータテスト中と見なされています。実験的なルールについての詳細と、それを改善するための方法を学びましょう。

このルールを実行すると、スキャン時間が増加します。

important

このルールはフィードバックを集めるためにオプトインです。試してみて、意見をお聞かせください。

AxeDevToolsオブジェクトを初期化してテストを開始した後、次の設定を使用してルールにオプトインしてください:

axe.configuration.optInToSupportsDynamicType = true

ここでaxeは、ログイン時に初期化されたAxeDevToolsオブジェクトを指します。

確認すること

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

このルールはDequeのベストプラクティスを遵守しています。このルールは、モバイルダッシュボードまたはiOS用に書かれたテストでルールを無視することによってによって無効にできます。

モバイルダッシュボードからルールをオフにする方法。

失敗例 ❌

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をサポートし、ユーザーがデバイスのフォントサイズを変更したときにリサイズする必要があります

ユーザーへの影響

低視力の人々は、サイズを変更できないテキストによって最も影響を受けます。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>

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

動的タイプをサポートすることで、重大な影響低視力のユーザーに対応しています。これはベストプラクティスのルールであるため、モバイルダッシュボードから無効にしたり、個別のテストで抑制したりできます。しかし、アプリ全体で動的タイプをサポートすることを強くおすすめします。このルールを広く無視するのではなく、ルールの無視に関する詳細をご覧ください。

リソース

Deque University コースページ

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

その他のリソース

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