誰もが利用できるコンテンツを作成、設計するには、読みやすいフォントを選択するだけでは不十分です。利用可能なフォント ファミリーを使用している場合でも、ロービジョン、認知障がい、言語障がい、学習障がいのあるユーザーは、フォントのバリエーション、サイズ、間隔、ケーニングなどの他の要素が原因でテキストを処理するのが難しい場合があります。
このモジュールでは、コンテンツの包括性を高め、より多くのユーザーにリーチするための基本的な設計上の考慮事項について説明します。
Typeface
コピーのアクセシビリティに大きく影響する要素は、書体です。書体とスタイルの選択は、ページのデザインを左右する重要な要素です。
失読症や注意欠陥多動性障害（ADHD）などの読解力、学習、注意障害を持つ人やロービジョンの人は、誰でも使いやすい書体を使うことで恩恵を受けることができます。
一般的な書体を選択する ユーザー補助に対応したデザインを最も簡単に作成するには、一般的な書体（Arial、Times New Roman、Calibri、Verdana など）を選択します。
障がいを持つ人を対象とした多くの書体研究によると、一般的な書体は、一般的でない書体よりも読みやすく、読解力を高めることがわかっています。一般的な書体は他の書体よりも本質的にユーザー補助に優れているわけではありませんが、障がいのある一部の人々は、これらの書体を使用（または回避）する経験が豊富であるため、読みやすく感じることがあります。
一般的な書体を選択するだけでなく、装飾的な書体や手書きの書体、使用できる文字ケースが 1 つしかない書体（大文字のみなど）は避けてください。手書き風のデザイン、風変わりな形、細い線などの芸術的な特徴を持つ特殊な書体は見栄えは良いかもしれませんが、障がいのある一部の人にとっては、一般的な書体よりも読みづらいものです。
文字の特性とカーニング
Serif と Sans Serif の書体は読みやすいかという調査では結論は出ていませんが、特定の数字、文字、組み合わせは、言語ベースの学習や認知障がいのある人を混乱させる可能性があります。このような障がいのあるユーザーの場合、すべての文字と数字を明確に定義し、独自の特徴を持たせて、文字と数字が混同しないようにする必要があります。
読みやすさを損なう一般的な文字は、大文字の「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 文字）にします。
- 段落を両端揃えにしないでください。コピー内に「川の流れ」が生まれます。
ユーザー補助対応のタイポグラフィに関する要点
ユーザーのニーズに関する知識に基づいて、常識的なデザイン選択を行うことが、ユーザー補助型タイポグラフィの要点です。コンテンツの設計と構築の際にこのモジュールを念頭に置くことで、多くのユーザーに明確に伝えることができます。
理解度を確認する
ユーザー補助の測定に関する知識をテストする
読みやすいコピーにするには、コピーと背景の間に常に高いコントラストを使用する必要があります。
ユーザー補助に最適なフォントは何ですか？