誰にとっても使いやすいコンテンツの作成とデザインは、読みやすいフォントを選ぶことだけではありません。フォント ファミリーがアクセシビリティを確保していても、ロービジョンの方、認知障がい、言語障がい、学習障がいのある人々は、フォントのバリエーション、サイズ、間隔、カーニングなどの他の要素により、テキストの処理が困難な場合があります。このモジュールでは コンテンツをよりインクルーシブなものにして より多くのユーザーにリーチするための 設計に関する基本的な考慮事項について確認します
書体
コピーのしやすさに強く影響する主な要因は書体です。選んだ書体やスタイルによって、ページのデザインが変わります。
読字障害、学習障害、注意障害（失読症、注意欠陥多動性障害（ADHD）など）やロービジョンの人にとっては、誰もが利用しやすい書体を使用することでメリットが得られます。
共通の書体を選択する 使いやすいデザインを作成する最も簡単な方法は、共通の書体（たとえば、AOSP、Times New Roman、Callibri、Verdana など）を選択することです。
障がいのある人を対象とした書体調査の多くは、一般的な書体の方が一般的でない書体に比べて読みが速く、理解が深まることがわかっています。こうした一般的な書体は本質的に他の書体ほど使いやすいものではありませんが、障がいのある人はこれらの書体を使った（またはその周辺）経験が豊富なので、読みやすくなります。
一般的な書体を選択するだけでなく、華やかな書体や手書きの書体、大文字しか使用できない書体などは使用しないでください。筆記体のデザイン、ユニークな形、細い線のような芸術的な特徴を持つ特殊な書体は見栄えが良いですが、障がいのある人にとっては一般的な書体よりも読みにくいです。
文字の特性とカーニング
Serif と Sans Serif の書体の方が読みやすいかどうかに関する調査では決定的ではありませんが、特定の数字、文字、組み合わせを使用すると、言語ベースの学習や認知障がいのある人を混乱させる可能性があります。このような障がいのある人にとっては、すべての文字と数字を明確に定義し、固有の性質を持つ必要があるため、文字を数字と混同しないようにする必要があります。
読みやすさに悪影響を与える一般的な例としては、大文字の「I」（インド）、小文字の「l」（lettuce）、数字の「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 万人にとって大きな障壁となります。この種の障がいでは、わかりやすい直線的な経路がなく、見出しが欠落している、要素がグループ化されていないため、自分の居場所を維持し、コピーの流れを追うことが難しくなります。
アクセス可能なレイアウト設計の重要な側面は、重要な要素を互いに区別し、類似した要素をグループ化することです。要素同士が近すぎると、1 つの要素の始まりと終わりの区別が難しくなる場合があります。特に、スタイルが似ている場合はその傾向が顕著になります。
コピーは、概要上の個別の箇条書きの集まりと考えてください。これにより、ページ全体の構造を計画し、必要に応じて見出し、小見出し、リストを使用できます。
スペース
段落、文、単語の間隔も重要です。これにより、読者がコピーに集中し続けることができ、ページ全体の視覚的な理解が深まります。長文コピーは、自分の居場所を維持したり、コピーの流れを追うのが難しいため、障がいのある読者にとって障壁となります。文章を狭くすることで、読者が次の行に進みやすくなる。
コンテンツの配置
障がいのある多くの人々にとってもう一つのフラストレーションは、正当なコピーを読むことです。両端揃えのテキストでは単語間のスペースが不均一であるため、ページの下に「空白の川」が形成され、コピーが読みづらくなります。
また、テキストの両端揃えにより、単語がまとめられたり、不自然に引き伸ばされたりする可能性があるため、読者が単語の境界を見つけるのが難しくなる可能性があります。
幸い、Good Line-Height や Golden Ratio Calculator などのスペースやツールには明確なガイドラインが用意されており、コピーを作成しやすくなっています。これらのガイドラインを取り入れることで、注意欠陥障がい、読解障がい、視覚障がいのあるユーザーは、レイアウトに煩わされることなくコピーに注力できます。
構造とレイアウトに関するベスト プラクティス
構造とレイアウトを検討する際には、次の点を考慮してください。
- 見出し、小見出し、リスト、数字、引用ブロックなどの要素を使用して、ページをセクションに分割します。
- 明確に定義された段落、文章、単語の間隔を使用します。
- 幅が 80 文字（ロゴグラムの場合は 40 文字）を超えない長さのコピーの列を作成します。
- 段落間の両端揃えは避けてください。コピー内に「余白の川」ができます。
バリアフリーのタイポグラフィの要点
ユーザー補助のタイポグラフィは、ユーザーのニーズに関する知識に基づいて、常識的なデザインの選択に要約できます。このモジュールを念頭に置いてコンテンツを設計し、作成してください。多数の人と明確にコミュニケーションをとるうえで大いに役立ちます。
理解度チェック
アクセシビリティの測定に関する知識をテストする
読みやすいコピーにするには、コピーと背景を常に高コントラストにする。
アクセシビリティに最適なフォント