オペレーティング システムのテキスト スケールを尊重する

ウェブ機能: <meta name="text-scale">

概要

視覚障がいのあるユーザーは、オペレーティング システム レベルでテキストのスケーリング（iOS の Dynamic Type や Android / ChromeOS のフォントサイズのスケーリングなど）を設定することがよくあります。デフォルトでは、モバイル ブラウザはこれらの OS レベルのユーザー補助設定を無視して、従来の固定ピクセル ウェブサイトが視覚的に崩れないようにします。

ページを静的なままにしたり、カスタムの脆弱な JavaScript レイアウト計算に依存したりするのではなく、<meta name="text-scale"> タグを使用してネイティブ オペレーティング システムのテキスト スケーリングを有効にします。有効にすると、ブラウザはユーザーの OS 設定に合わせてルート フォントサイズ（1rem）を動的にスケーリングします。これにより、すべての相対的な（rem/em）フォントサイズ、レイアウト、間隔が自動的に適切にスケーリングされます。

実装

1. OS のテキスト スケーリングを有効にする

<meta name="text-scale"> 要素をドキュメントの <head> 内に配置します。これにより、レイアウトが最新で、適応性があり、安全にスケーリングできることを、サポートしているブラウザに通知します。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. 相対的なタイポグラフィと間隔を使用する

フォントサイズは、固定ピクセル（px）ではなく相対単位（rem または em）を使用して定義します。行の高さには単位のない値を使用し、各要素の計算されたフォントサイズに比例してスケーリングされるようにします。

間隔がテキストサイズに関連付けられている場合や、テキストの拡大縮小に合わせて調整する必要がある場合は、マージンとパディングに相対単位を使用します。テキストに依存しない間隔は、拡大縮小によってテキストのクリッピング、重複、コンテンツの損失、使用できないレイアウトが発生しない限り、必要に応じて固定単位を使用できます。

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

body の基本テキストサイズは、デザインで継承されたブラウザのデフォルトとは異なるサイズが必要な場合にのみ設定します。それ以外の場合は、継承させます。見出しなどの特定の要素のサイズを、rem や em などの相対単位で設定します。ルートのフォントサイズを基準としたサイズには rem を使用し、親要素のフォントサイズに依存するサイズには em を使用します。:root または html にカスタム フォントサイズを設定しないでください。

Fluid Typography

流動的なタイポグラフィでは、vw などのビューポート相対単位を使用しても構いません。ただし、フォントサイズには rem や em などのフォント相対コンポーネントも含まれている必要があります。コンテナクエリ単位や clamp() など、流動的なスケーリング手法の詳細については、流動的なスケーリングをご覧ください。

ビューポート単位のみでテキストのサイズを設定しないようにします。

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

代わりに、フォント相対値とビューポート相対スケーリングを組み合わせて、相対的な最小値と最大値を使用します。

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

テキストをデフォルト サイズの 200% 以上にサイズ変更しても、コンテンツや機能が失われないことをテストします。流動的なタイポグラフィの場合、最大フォントサイズを最小フォントサイズの 2.5 倍以下に抑えるのが、経験則として有効です。また、320 CSS ピクセルのビューポート幅（1280 CSS ピクセル幅のビューポートから 400% ズームに相当）でリフローをテストします。コンテンツは、不可欠な場合を除き、2 次元スクロールなしで利用できなければなりません。

3. スケーラブルなレスポンシブ ブレークポイントを使用する

レスポンシブ ブレークポイントは、テキストがデフォルト サイズのままであることを前提としてはなりません。ブレークポイントがテキストの利用可能なスペースに対応することを目的としている場合は、固定ピクセルしきい値ではなく、コンテンツ主導のレイアウト、コンテナクエリ、em ベースのメディアクエリを使用することをおすすめします。

オペレーティング システムのテキスト スケーリングとブラウザのズームを有効にして、レスポンシブ レイアウトをテストします。テキストは判読可能で、コンテンツは重複、クリッピング、水平スクロールなしで表示される必要があります。

4. コンテンツの折り返しと高さの柔軟性を確保する

テキストが拡大されると、切り捨てや重なりを防ぐために、要素に垂直方向と水平方向のスペースが必要になります。コンポーネントの堅牢性を維持するには、厳格な座標を強制するのではなく、コンテンツの周囲に動的に拡張されるようにレイアウトを設計します。

  • テキスト コンテナの拡大を許可する: テキストを含むコンポーネントとコンテナは、拡大されたテキストに合わせて拡大できるようにする必要があります。height や block-size の値を固定したり、max-height や max-block-size の値を制限したりすると、クリッピングやオーバーフローが発生する可能性があるため、避けてください。コンテンツ主導のサイズ設定を優先します。min-height または min-block-size は、最小サイズが必要な場合にのみ使用します。
  • 自然な折り返しを許可する: 文を含むブロックで white-space: nowrap を使用してインライン軸のテキストの折り返しを制限しないでください。テキストが自然に新しい行に折り返されるようにします。
  • 柔軟な Flexbox と Grid のラッピングを使用する（オプションの例）: 複数列のカード ギャラリーでは、repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) のようなリフロー列を使用して、相対幅のしきい値を超えた場合にアイテムが垂直方向に積み重なるようにします。
/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. ルートのフォントサイズをオーバーライドしない

<meta name="text-scale" content="scale"> 要素を使用してオプトインする場合は、スタイルシートでルート font-size を明示的に設定しないでください。これには、:root または html の宣言が含まれ、絶対単位、相対単位、計算値に適用されます。

たとえば、ルートのフォントサイズを固定値でオーバーライドしないでください。

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

<meta name="text-scale" content="scale"> のオプトインと env(preferred-text-scale) を組み合わせて、オペレーティング システムのテキスト スケーリングを手動で適用しないでください。ブラウザはメタ オプトインを通じてスケーリングを適用するため、両方を使用すると、二重にスケーリングされる可能性があります。

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

ルートのフォントサイズはブラウザに任せます。ブラウザは、オペレーティング システムのテキスト スケールを自動的に処理し、ルート フォントサイズを基準としたサイズのコンテンツに適用します。

代替戦略

<meta name="text-scale" content="scale"> がサポートされていないブラウザでは、レイアウトが適切に劣化します。ページは、ブラウザの標準のデフォルト ベース フォントサイズ（通常は 16 ピクセル）でレイアウトが表示されます。ユーザーは、標準の手動ページズームまたはピンチ操作によるズーム オプションを引き続き利用できます。