アクセス可能なフォントサイジング、説明

Webコンテンツアクセシビリティガイドライン（WCAG）は、Webコンテンツの最小フォントサイズを義務付けていません。ただし、読みやすさを確保することが重要です。この記事では、アクセス可能なフォントサイジングのベストプラクティス、WCAG要件に焦点を当て、ブラウザのデフォルトを活用します。

読みやすさ：コントラストとキャラクターの多様性

WCAGは、固定サイズでコントラストを優先します。テキストは、最低4.5：1のコントラスト比を満たす必要があります（大きなテキストの場合は3：1）。 WebAimのコントラストチェッカーのようなツールが役立ちます。さまざまなアルファベットの複雑さ（世界中で約300）は、単一の最小サイズが普遍的に適用できないことを意味します。 WCAGは、ポイント（ピクセルではなく）で測定された言語固有の最小大きな印刷サイズに基づいて「大きなテキスト」を定義します。ローマのテキストでは、18ポイント（画面密度に応じて24pxに相当する可能性がある）は「大きい」と見なされます。

本質的に、WCAGは正確なフォントサイズではなく、コントラストを指定します。

幸いなことに、ブラウザのデフォルトスタイルには本質的にアクセスできます。それらを活用しましょう。

固定サイズではなく、割合

ブラウザのデフォルトスタイル（ユーザーエージェントスタイルシート）は、著者のスタイルとユーザースタイルに先行します。多くのユーザーは、デフォルトのブラウザフォントサイズを調整します。また、翻訳、フォントの読み込み障害、ユーザー選択のフォント（Opendyslexicなど）などの要因により、フォントファミリーの完全な制御もありません。

したがって、絶対サイズではなく、割合に焦点を当てます。 CSS相対ユニット（WCAGはemユニットを推奨）を使用して、ユーザーの環境に適切にコンテンツスケールを確保します。 remユニットとemユニットを一貫して使用することを検討してください（ピクセルが望まれる境界線を除く）。

ベースフォントサイズの設定を避けてください

一般的に、次のようにfont-sizeを設定しないでください:root 、 、 または<code>要素。ブラウザのデフォルトのアクセス可能なサイズをベースラインとして機能させます。 WCAG 2.2ワーキングドラフトは、不特定のテキストに主要なブラウザが使用するデフォルトのフォントサイズが合理的なベースラインを提供することを示唆しています。

例外が存在します。複雑な、薄い、または短いXハイトフォントには、十分なコントラストを実現するために、わずかに大きなベースフォントサイズが必要になる場合があります。覚えておいてください：コントラストは、サイズではなく、キーWCAGメトリックです。珍しいフォントは、特にコントラストレベルが低い場合、読みやすさを維持するために大きなサイズを必要とする場合があります。ユーザーは引き続きベースフォントサイズを好みに合わせて調整できます。

プロポーションの維持：ブラウザのデフォルトに基づいて、相対サイズの調整（ .small 、 .largeなど）を定義します。

 ：根 {
  / *ここにフォントサイズを設定しないでください */
}
。小さい {
  font-size：.8rem;
}
。大きい {
  フォントサイズ：2REM;
}

見出し

スクリーンリーダーのアクセシビリティのために、見出し順序（H1、H2、H3など）を維持します。 1remへのフォントサイズをリセットすると、セマンティックな意味から視覚的なスタイリングを切り離すことができます。

ピクセルで作業します

ピクセルベースの設計を相対ユニットに変換するには：

方法1：62.5％ルール

font-size: 62.5%; on :root 1レムを10pxに等しくし、ピクセルからレムへの変換を簡素化します。

方法2： calc()の使用

calc()を使用して、想定される16pxブラウザのデフォルトに基づいてREM値を動的に計算します。

方法3：ピクセルからレムへの関数

プリプロセッサ関数（SASSミキシン、スタイルのコンポーネントポリッシュ）を利用するか、ピクセルからレムへの変換のためのカスタムCSS関数を作成します。

結論

remユニットを使用して比例サイジングを優先し、ブラウザのデフォルトを活用し、ユーザー設定に関する仮定を回避します。このアプローチにより、多様なブラウザ、デバイス、ユーザーの好みにわたるアクセシビリティが保証されます。彼の支援をしてくれたフランコ・コレアに感謝します。

以上がアクセス可能なフォントサイジング、説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。