タイポグラフィ

誰もが利用できるコンテンツを作成、設計するには、読みやすいフォントを選択するだけでは不十分です。利用可能なフォント ファミリーを使用している場合でも、ロービジョン、認知障がい、言語障がい、学習障がいのあるユーザーは、フォントのバリエーション、サイズ、間隔、ケーニングなどの他の要素が原因でテキストを処理するのが難しい場合があります。

このモジュールでは、コンテンツの包括性を高め、より多くのユーザーにリーチするための基本的な設計上の考慮事項について説明します。

Typeface

コピーのユーザー補助に大きく影響する主な要因は、書体です。書体とスタイルの選択は、ページのデザインを左右する重要な要素です。

読書、学習、注意障害（失読症、注意欠陥 / 多動性障害（ADHD）など）のある人や、ロービジョンの人にとって、ユーザー補助フォントを使用すると便利です。

一般的な書体を選択する 利用しやすいデザインを最も簡単に作成するには、一般的な書体（Arial、Times New Roman、Calibri、Verdana など）を選択します。

障がいのある人を対象とした多くの書体に関する調査では、一般的な書体の方が、一般的でない書体と比較して読み取り速度が速く、理解度も深くなることが示されています。一般的な書体は他の書体よりも本質的にユーザー補助に優れているわけではありませんが、障がいのある一部の人々は、これらの書体を使用（または回避）する経験が豊富であるため、読みやすく感じます。

一般的な書体を選択するだけでなく、装飾的な書体や手書きの書体、使用できる文字ケースが 1 つしかない書体（大文字のみなど）は避けてください。手書き風のデザイン、風変わりな形、細い線などの芸術的な特徴を持つ特殊な書体は見栄えは良いかもしれませんが、障がいのある一部の人にとっては、一般的な書体よりも読みづらいものです。

文字の特徴とケーニング

セリフ体とサンセリフ体のどちらが読みやすいかに関する研究では、結論は出ていませんが、特定の数字、文字、組み合わせは、言語ベースの学習障がいや認知障がいのある人を混乱させる可能性があります。このような障がいのあるユーザーの場合、すべての文字と数字を明確に定義し、独自の特徴を持たせて、文字と数字が混同しないようにする必要があります。

読みやすさを損なう一般的な文字は、大文字の「I」（インド）、小文字の「l」（レタス）、数字の「1」です。同様に、b/d、p/q、f/t、i/j、m/w、n/u などの文字ペアは、一部のリーダーで左右または上下に反転することがあります。

文字間隔や文字詰めがきつすぎると、コピーの読みやすさも低下します。特に問題のある文字ペア（r/n）間のケーニングに注意してください。そうでない場合、「yarn」が「yam」に、「stern」が「stem」に置き換えられ、コピーの意味が完全に変わってしまう可能性があります。

Google Fonts などのオープンソースの書体コレクションは、次回のデザインに最も包括的な書体を選択するのに役立ちます。Adobe 製品を使用している場合は、フォント ファウンドリ パートナーのユーザー補助対応フォント ファミリーをデザインに直接埋め込むことができます。これには、一部の Google Fonts も含まれます。

次に使用する書体を選ぶ際は、次の点に特に注意してください。

• 可能な限り一般的なフォントを使用します。
• 手の込んだフォントや手書きフォント、大文字と小文字が 1 つしかないフォントは使用しないでください。
• 大文字の I、小文字の l、1 に特に注意しながら、独特の特徴を持つ書体を選択します。
• 特定の文字の組み合わせを確認して、互いに正確な鏡像ではないことを確認します。
• 特に r と n の文字ペア間のケーニングを確認します。

フォントサイズとタイポグラフィのスタイル

多くの場合、ユーザーは、ユーザー補助対応のフォント ファミリーを選択すれば、インクルーシブなコンテンツを作成できると考えています。しかし、フォントサイズやページ上のテキストのスタイルも考慮することが重要です。

たとえば、ロービジョンや色覚異常のユーザーは、コピーが小さすぎると、AT（ブラウザのズームなど）を使用してコピーを読み取ることができない場合があります。失読症や読字障害などの障がいをお持ちのユーザーは、斜体テキストを読むのが難しい場合があります。スクリーン リーダーは、太字や斜体などのスタイル設定方法を無視することが多く、これらのスタイルの意図は盲目または弱視のユーザーに伝わりません。

h2 {font-size: 16px;}

h2 {font-size: 1rem;}

すべてのユーザーのニーズを予測することはできないため、ウェブサイトやウェブ アプリケーションにフォントを追加する際は、次のガイドラインを必ず考慮してください。

• ベースのフォントサイズは、サイズ変更を可能にするために、相対値（%、rem、em）で定義する必要があります。
• 色、太字、大文字、斜体などの書体のバリエーションを制限して、読みやすさを高めます。代わりに、アスタリスク、ダッシュ、単語のハイライト表示など、コピー内の単語を強調する方法を使用してください。
• 可能な限り、画像にテキストではなくマークアップを使用します。スクリーン リーダーは、追加のコードが追加されていない限り、画像に埋め込まれたテキストを読み取ることができません。また、視覚障がいのあるユーザーが拡大すると、埋め込まれたテキストがモザイク状になることもあります。

構造とレイアウト

アクセス可能なタイポグラフィでは、書体、フォントサイズ、タイポグラフィのスタイルが重要ですが、ページ上のコピーの構造とレイアウトも、ユーザーの理解にとって同様に重要です。

複雑なレイアウトは、ロービジョンや読字障がいのある人、米国の ADHD 患者 610 万人にとって大きな障壁となる可能性があります。このような障がいのあるユーザーは、明確なリニア パスが設定されていない、見出しがない、要素がグループ化されていないため、コピーの流れを把握しづらく、読み進めるのが難しくなります。

ユーザー補助対応のレイアウト設計において重要なのは、重要な要素を区別し、類似する要素をグループ化することである。要素が近すぎると、特にスタイルが似ている場合は、要素の開始と終了を判断するのが難しくなります。

コピーは、アウトラインの個々の箇条書きの集まりと考えてください。これにより、ページ全体の構造を計画し、必要に応じて見出し、副見出し、リストを使用できます。

間隔

段落、文、単語のスペースは、読者がコピーに集中し続けるのを助け、ページの全体的な視覚的な理解を高めます。長い行のテキストは、障がいのある読者にとって、行の位置を把握し、文章の流れを追うのが難しくなるため、障壁となる可能性があります。

コピーのブロックを狭くすると、読者は次の行に進みやすくなります。

コンテンツの配置

多くの障がいのある人にとって、読みやすくするために文字を左右に揃えたコピーを読むのもストレスになります。両端揃えのコピーで単語間のスペースが均一でないと、ページの下部に「スペースの川」が形成され、コピーが読みにくくなります。

テキストの両端を揃えると、単語が不自然にまとまったり、引き伸ばされたりすることもあります。そのため、読者は単語の境界を見つけにくくなります。

幸い、コピーの読みやすさを高めるための明確なガイドラインとツール（適切な行間や黄金比計算ツールなど）があります。これらのガイドラインを組み込むと、注意欠陥障害、読書障害、視覚障がいのあるユーザーがコピーに集中し、レイアウトに集中しすぎないようにすることができます。

構造とレイアウトに関するおすすめの方法

構造とレイアウトを検討する際は、次の点に注意してください。

• 見出し、小見出し、リスト、番号、引用ブロックなどの要素を使用して、ページをセクションに分割します。
• 段落、文、単語のスペースを明確に定義します。
• コピーの列の幅は 80 文字未満（ロゴグラムの場合は 40 文字）にします。
• 段落を両端揃えにすると、コピー内に「スペースの川」が形成されるため、避けてください。

ユーザー補助対応のタイポグラフィに関する要点

ユーザーのニーズに関する知識に基づいて、常識的なデザイン選択を行うことが、ユーザー補助型タイポグラフィの要点です。コンテンツの設計と構築の際にこのモジュールを念頭に置くことで、多くのユーザーに明確に伝えることができます。

理解度を確認する

ユーザー補助の測定に関する知識をテストする