アクセシブルなコンテンツの作成とデザインは、読みやすいフォントを選択するだけではありません。アクセシブルなフォント ファミリーを使用しても、ロービジョン、認知、言語、学習障がいのあるユーザーは、フォントのバリエーション、サイズ、間隔、カーニングなどの要素によってテキストの処理に苦労する可能性があります。
このモジュールでは、コンテンツをより包括的にして、より多くのユーザーにリーチするための基本的なデザイン上の考慮事項について説明します。
Typeface
コピーのアクセシビリティに大きな影響を与える要因の一つに、書体があります。書体とスタイルの選択によって、ページのデザインが成功するか失敗するかが決まります。
失読症や注意欠陥・多動性障がい（ADHD）などの読字、学習、注意欠陥障がいのあるユーザーや、ロービジョンのユーザーは、アクセシブルな書体を使用することでメリットを得られます。
一般的な書体を選択する
アクセシブルなデザインを作成する最も簡単な方法は、一般的な書体（Arial、Times New Roman、Calibri、Verdana など）を選択することです。
障がいのあるユーザーを対象とした多くの書体に関する調査では、一般的な書体は、一般的でない書体と比較して、読解速度が速く、理解度が高いことが示されています。一般的な書体は、他の書体よりも本質的にアクセシブルであるわけではありませんが、障がいのあるユーザーの中には、これらの書体を使用したり、これらの書体を使用しないようにしたりする経験が多いため、読みやすいと感じるユーザーもいます。
一般的な書体を選択するだけでなく、装飾的な書体や手書きの書体、1 つの文字ケースのみが使用可能な書体（大文字のみなど）は避けるようにしてください。筆記体、奇抜な形、細い線などの芸術的な特徴を持つ特殊な書体は見た目が良いかもしれませんが、一般的な書体よりも読みにくいと感じる障がいのあるユーザーもいます。
文字の特徴とカーニング
セリフ体とサンセリフ体のどちらの書体が読みやすいかについての研究は決定的ではありませんが、特定の数字、文字、または組み合わせは、言語ベースの学習障がいや認知障がいのあるユーザーを混乱させる可能性があります。このような障がいのあるユーザーの場合、すべての文字と数字を明確に定義し、固有の特徴を持たせる必要があります。これにより、文字と数字が混同されることはありません。
読みにくい一般的な文字は、大文字の I（India）、小文字の 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 万人が ADHD を患っています。 このような障がいのあるユーザーは、明確な線形の経路がない、見出しがない、要素がグループ化されていないため、コピーのフローを把握しにくくなります。
アクセシブルなレイアウト デザインの重要な側面は、重要な要素を互いに区別し、類似した要素をグループ化することです。要素が近すぎると、特にスタイルが似ている場合は、要素の開始位置と終了位置を区別するのが難しくなります。
コピーは、アウトライン上の個々の箇条書きの集まりと考えることができます。これにより、ページ全体の構造を計画し、必要に応じて見出し、小見出し、リストを使用できます。
間隔
段落、文、単語の間隔は、読者がコピーに集中するのに役立ち、ページの全体的な視覚的な理解を深めます。コピーの行が長いと、読字障がいのあるユーザーにとって障壁となる可能性があります。読字障がいのあるユーザーは、コピーのフローを把握しにくくなります。
コピーのブロックが狭いと、読者は次の行に進みやすくなります。
コンテンツの配置
多くの障がいのあるユーザーにとって、均等割りのコピーを読むのは難しいことです。均等割りのコピーでは、単語間の間隔が不均一になるため、ページの下に「スペースの川」が形成され、コピーが読みにくくなります。
テキストの均等割り付けにより、単語が不自然にまとまったり、引き伸ばされたりすることがあるため、読者は単語の区切りを見つけにくいと感じる場合があります。
幸いなことに、間隔に関する明確なガイドラインと、コピーをよりアクセシブルにするのに役立つツール（ Good Line-Height や Golden Ratio Calculator など）があります。これらのガイドラインを組み込むことで、注意欠陥障がい、読字障がい、視覚障がいのあるユーザーは、レイアウトではなくコピーに集中できます。
構造とレイアウトに関するおすすめの方法
構造とレイアウトを検討する際は、次の点に注意してください。
- 見出し、小見出し、リスト、数字、引用ブロック、その他の視覚的なグループ化などの要素を使用して、ページをセクションに分割します。
- 明確に定義された段落、文、単語の間隔を使用します。
- コピーの列の幅を 80 文字未満（表意文字の場合は 40 文字）にします。
- 段落の均等割り付けは避けてください。コピー内に「スペースの川」が作成されます。
アクセシブルなタイポグラフィに関する要点
アクセシブルなタイポグラフィは、ユーザーのニーズに関する知識に基づいた常識的なデザイン選択に集約できます。コンテンツをデザインして作成する際にこのモジュールを念頭に置くことで、できるだけ多くのユーザーと明確にコミュニケーションできるようになります。