Choosing Right Font and its Presentation: ADAアクセシブルWebサイトへの鍵

Webは、どんな障害があっても、誰もが平等に参加し、情報にアクセスし、提示し、取得する権利を持つ公共の場であります。 障害を持つアメリカ人法 (ADA) は、障害を持つ個人の機会均等を確保するために制定されました。 当時、インターネットはまだ黎明期でしたが、現実には、デジタル サービスやオンライン コンテンツなど、すべての仮想の場所に適用されています。

法的および道徳的な義務を果たすために、すべての組織や企業は、障害者がアクセスできる Web サイトやオンライン チャンネルにすることが要求されています。 アクセシブルなWebサイトを設計するための重要な柱の1つは、そのテキストコンテンツの読みやすさと可読性にあります。 これは、アクセシブルなフォントを使用して初めて達成できることです。

このガイドでは、アクセシブルなフォントとは何か、Web サイトに使用する最適なフォントは何かといった質問に読者が答えられるように構成されています。 ADA承認フォントの詳細とその特徴については、こちらをお読みください。 また、視覚障害者、失読症、および読字障害を持つ人が Web サイトにアクセスできるようにするために必要な機能の一部も取り上げます。

フォント ファミリの概要

フォントおよびさまざまなフォント ファミリは、デジタル タイポグラフィーにおいて重要な位置を占めています。 フォント ファミリーは、デザイン スタイルに関連する同様の特性や属性を共有する、異なるフォントのセットで構成されています。 その特性を理解することで、WebデザイナーはWebサイトに最も利用しやすいフォントを選択することができます。

• Serif: Serif フォントは、文字や記号のストロークの終わりに装飾や飾り付けがあります。 Sans-Serifフォントはよりシンプルで、文字や記号の各ストロークの末尾に拡張ラインや特徴がない。 等幅フォント：等幅フォントは、各文字または記号の幅が同じである。 また、固定幅または非比例フォントと呼ばれています。 カーシブフォントは、手書き文字に似た流れるような書き方です。

Units of measurement

There are various units for defining font sizes:

• Ems (em).XXX (XXX)。 この単位は、HTML ページ内の親要素のサイズに相対するフォントサイズを定義します。 例えば、HTML の親要素が 14 px である場合、2 em で 28 px になります。
• Rems (root ems): rem単位を使用する場合、すべてのフォントは、HTMLのルート要素のフォントサイズに対して相対的に定義されます。 したがって、HTML内のすべてのテキストは、1つの基本フォントに相対的に指定され、テキストがWebページのHTML階層内のどこに配置されるかに依存しません。 これは絶対的な測定単位で、ベース要素に対する測定に基づいていません。
• ポイント (pt): ポイントもまた、絶対的な測定単位です。 WCAGはCSS3の値を使用しており、1ptは1.333pxです。 したがって、14pt と 18pt はそれぞれ 18.5px と 24px に変換されます。

何がフォントをアクセス不能にするのでしょうか。

ADA 準拠のフォント リストから除外されるアクセシブルでないフォントとは、以下のようなものです。

• テキストを読みにくくする
• 異なる文字やキャラクターの形を区別しにくくする
• ユーザーが読む速度を遅くする
• 重なった文字またはキャラクターによって、ある文字から別の文字を識別しづらくする。

装飾が施されたフォントは読みづらくなる。 ストロークの末尾に装飾があるフォントはすべて、一部のユーザーにとって読みにくくなる可能性があります。 筆記体や手書き風のフォントもテキストを読みにくくするので、Web サイトに使用するフォントとしては最適ではありません。

アクセシブル フォントとは何でしょうか。

Webサイトを設計する際、最も重要な点の1つは、適切なフォントの選択とその表現方法です。 大半の Web サイトでは、多くのテキスト コンテンツが必要であり、知覚可能で閲覧可能である必要があります。

どの標準フォントがアクセシブルですか？

残念ながら、Web で最も読みやすいフォントや、使用すべき書体は専門家によって意見が分かれており、ユーザーによって要求が異なるからです。 たとえば、視力の低いユーザーは、より大きなテキストを必要とします。 視野は狭いが視力は高い人は、文字サイズを小さくしながら視野に収まるような文字数を必要とします。

ユーザーが独自のフォントを選択できるように、Web デザイナーが柔軟性を提供することが最善です。 Web ページがデフォルトの Web ブラウザーのフォントを使用する場合、読者は Web ページを読み込むたびに異なるフォントに切り替える必要はありません。

固定した ADA フォントサイズの要件はありませんが、アクセス可能な ADA 準拠のフォントは、筆記体や手書き体とは異なり、明確、清潔、および識別可能です。 サンセリフ体のフォントは、セリフ体のフォントよりも読みやすく、よりアクセシブルであることが一般的に認められています。 ADA 準拠のフォント リストには、Arial、Calibri、Century Gothic、Helvetica、Tahoma、および Verdana が含まれますが、これらに限定されません。

The importance of accessible fonts

ウェブ上の情報のほとんどはテキスト コンテンツによって伝達および普及されています。 テキストを表示する方法の 1 つは、テキストの .png または .bmp 画像を使用することです。 しかし、これは多くの理由から実行可能なオプションではありません。 例えば、画像を拡大縮小すると、可読性が低下する。 また、画像内のテキストは、スクリーン・リーダーで読み上げることができません。

アクセシブルなフォントを使用したアクセシブルなウェブサイトのデザインは、もはや単なる推奨事項やオプション機能ではありません。 Web サイトがアクセシビリティの原則に違反した場合、そのホスト企業や事業者は、重い罰則、罰金、または訴訟に直面するリスクを負うことになるからです。 この罰金は、最初の違反で 75,000 ドル、その後の違反でそれ以上となる可能性があります。

National Health Interview Survey (NHIS) のデータによると、視覚障害を持つ成人は推定 3,220 万人います。 これには目の見えない人だけでなく、眼鏡をかけているにもかかわらず視力が低い人も含まれます。 CDCは、この数は、加齢や病気による視覚障害のために急速に増加していると予測しています。

Webサイトをデザインする場合、このような少数派の人々に対応する企業やビジネスは、当然、より多くの人々を享受することになります。 Web サイトのテキストが読みにくいと、読者層が狭くなり、ページへのアクセス数が制限されることは周知の事実です。 したがって、ADAが承認したフォントをウェブサイトに追加することは、ビジネスを成功させるために不可欠な側面なのです。

Specialist fonts

The British Dyslexia Association (BDA) points to be mind when designing websites and selecting accessible fonts for individuals with dyslexia:

• The selected font should be designed so easily make out between various letters and numbers.（ユーザーが様々な文字と数字の違いを認識しやすいようなフォントを選択してください）。 例えば、l（小さいL）、1、I（大文字のi）はすべて同じに見えるかもしれません。
• 文字bとd、およびpとqは、互いに鏡像になっています。 ディスレクシアの人は両者を区別するのが難しいかもしれない。 BDAが調査したところ、ほとんどの人が丸みを帯びた “g “と丸みを帯びた “a “を好んでいた。 しかし、これらの文字を丸くすることで、「o」と混同されることがあってはならない。
• 文字の間隔は、様々な文字を区別するのに十分であるべきで、例えば、「rn」を一緒にすると「m」と間違われることがあり、「learn」は「leam」と間違われる。

特殊なフォントはディスレキシア患者のためにデザインされています、例としてDyslexieやOpenDyslexicなどが挙げられます。 これらのフォントはいずれも自由に利用でき、無償でダウンロードできます。 これらは、ディスレクシアの人たちのためのウェブサイトに使用するのに最適なフォントの一つです。 同様に、Fs Meフォントは学習障害者のためのもので、英国の学習障害慈善団体Mencapによってサポートされています。

Webコンテンツアクセシビリティガイドラインの遵守

Web Content Accessibility Guidelines（WCAG）はW3Cによって開発、発行されています。 これらの勧告は、アクセシブルなウェブサイトやオンライン コンテンツの設計のために広く受け入れられている基準を形成しています。 米国では、508条最終規則により、WCAGは少なくともレベルAAに準拠することが直接求められています。 5944>

WCAG は、テキストの色、コントラスト、サイズ、比率などの属性やデザインの特徴を含め、視覚障害のあるユーザーにとってアクセシブルなフォントに関する明確なガイダンスを提供しています。 また、ウェブページをより読みやすく、アクセスしやすくするテキスト コンテンツのレイアウトと構造に関する推奨事項もあります。

このガイドでは、アクセシビリティに最適なフォントの選択、ADA 準拠のフォントの維持、およびその重要な機能についてのさまざまな W3C 推奨事項を説明します。

フォントのサイズと比率：ユーザーがコントロールできるようにする

テキストを書く場合、形状はさまざまで、これは言語にも依存します。 アルファベットの形は複雑なものもあれば、シンプルで小さいサイズでも読みやすいものもある。 これが、WCAGで最小フォントサイズが定義されていない主な理由である。 アクセシビリティのために最適なフォントや、画面で読むのに最適なフォントを選択する際に考慮すべき重要な点は、次のとおりです。

• フォント・サイズと単位。 WCAGによると、フォントサイズはemsとremsを使って指定されるべきで、つまり、ガイドラインは絶対的な単位よりも相対的なフォント単位を優先しています。 ルート要素に基本フォントサイズを設定するのは避けるべき。 代わりに、ブラウザのデフォルトのフォントサイズを使用し、他のすべてのフォントサイズを定義するための基準点として使用することができます。 ユーザーが基本のフォント・サイズを変更すると、ページ全体がそれに応じて変更されます。 最大 200% までのテキストズームを含む、フォントサイズの制御が可能である必要があります。 テキストは拡大しても過密であったり、重なったりすることなく、読みやすいままであるべきです。 例えば、スライダーのような簡単なコントローラーをウェブサイトに追加して、テキストサイズを拡大・縮小できるようにするなど、支援技術を使わなくてもこの拡大が可能であることが望まれます。 この機能は、すべてのデバイスでアクセス可能であるべきです。

テキスト間隔：フォント サイズに相対的にする

WCAG 2.1 では、テキスト間隔について次の推奨事項を定めています：

• 行間はフォント サイズの少なくとも 1.5 倍に設定すべき。
• Letter spacing should be least 0.2 times the font size.
• Word spacing should be least 0.16 times the font size.

Line width: allow text wrap

一般的に行長の測定単位として文字カウントが使用されています。 どんな障害があっても、改行によって目を休ませることができるため、短い行よりも長い行の方が読みにくいのである。

視野の狭い人は、行末と次の行頭を容易に確認できる狭いテキストエリアを必要とします。 したがって、行の長さはユーザーによって制御可能であるべきです。 ビューポートを調整すると、テキストの行は自動的に回り込み、再フローし、ユーザーは水平スクロールなしでテキストを読むことができるようになります。 段落は左寄せか右寄せにすべきです。 両端揃えのテキストは視覚的に魅力的に見えるかもしれませんが、行内に余分なスペースがあるとアクセスしにくくなるので避けるべきでしょう。

The wise approach to font color

Effective use of color is important for conveying meaningful information to the user.これは、ユーザーに意味のある情報を伝達するために重要です。 たとえば、フォームの必須フィールドはカラーハイライトでマークし、エラーは赤で示し、青の下線テキストは通常ハイパーリンクを示し、グレーは無効なフォームフィールドを示すために適用できます。

色はウェブページの美的魅力を高めますが、色の違いを見分けられないかもしれない低色覚の人々に対応するために注意を払う必要があります。 WCAG 2.1では、色だけでなく、さまざまな機能を区別するために別の視覚的な手がかりを使用すべきであると述べています。

色の使用はコントラスト比と密接に結びついています。 読みやすくアクセシブルなテキストには、色のコントラストをよくすることが不可欠です。

• 色のコントラストは、前景テキストを背景から区別できるようにする必要があります。 低すぎても厳しすぎてもいけません。
• 白い背景にグレー（#7777）のテキストカラーは、AA WCAGレベルの最低値です。
• 暗い背景に明るい前景のテキスト色である反転テキストは、読みにくいのでできるだけ避けるべきです。

コントラスト比：すべてを区別できるようにする

コントラスト比に関するWCAG 2.1 ガイドラインを以下に示します：

1. 1: テキストの見出しと大きなテキストのコントラスト比は、最低でも3:1であるべきです。 18ポイントのテキストまたは14ポイントの太字テキストは大きなテキストとみなされ、この要件を満たす必要があります。
2. 2.メインテキスト。 見出し以外のテキストでは、少なくとも4.5:1のコントラスト比を維持する必要があります。
3. 3.ロゴタイプ。 ロゴタイプ：ロゴまたはブランドの一部であるテキストは、コントラストの要件はありません。
4. 4.付随的なテキスト。

推奨されるコントラスト比を維持するために、いくつかの推奨方法があります。 たとえば、文字や文字記号が下のほうで明るくなっている場合、文字全体のコントラスト比に違反する可能性があります。 この場合、デザイナーは背景を暗くするか、文字に細い黒のアウトラインを追加して、必要なコントラスト比を維持することができます。 また、前景の文字や背景の相対的な輝度も変更することで、望ましい結果を得ることができます。 コントラスト比を確認するために使用できるさまざまなツールは、WCAGのウェブサイト

テキストのプレゼンテーション

視覚障害者用のフォントを組み込む以外に、テキストのレイアウトや構造に注意を払うことも重要である。 Webページでのテキストの全体的な表現に関しては、次のようなポイントを守る必要があります。

• 文書は同じフォントか、できるだけ少ないフォントで書く。 複数のフォントを含むページは、たとえそれが ADA 準拠のフォントであっても、読みにくくなります。
• 見出しの HTML タグ、たとえば <h1>、<h2> などは、文書の構造と階層を伝えるために使用すべきであり、要素を視覚的に強調するのに特定のフォントサイズが必要だったからといって適用すべきではありません。
• アニメーションや動くテキストは完全に避けるべきです。
• テキストコンテンツは画像やグラフィックではなく、テキストデータで表現すべきです。 テキストのフォントは一般的に拡大しても読みやすさが失われず、品質も維持されます。
• 文の大文字と小文字は使用すべきであり、スモールキャップは避けるべきです。
• 太字と斜体は組み合わせるべきではありません。
• リンクでない限り、テキストに下線を引くことは避けましょう。

おわりに

デジタル障壁を取り除き、障害のあるなしにかかわらず、すべての人に同じインターネット体験を提供することは、すべての企業や組織の最優先事項であるべきです。 これを達成するために、WCAG は、弱視、失読症、または読字障害を持つ人を含むすべてのユーザーにとって読みやすいテキストを提供する、Web サイトに最適なフォントを選択するための貴重な推奨事項を提供しています。 すべてのWebコンテンツやオンラインサービスのアクセシビリティを確保するために積極的に行動することで、重い金銭的な罰金や損害を避けることができます。

ADAおよび508準拠のWebサイト開発の専門知識と経験を持つ開発者、デザイナー、エンジニアのチームから支援を受けることは賢明なことだと思います。 Webアクセシビリティサービスの一環として、WCAG規格に基づくWebサイトの開発、レガシーWebサイトの修復、Webサイトのアクセシビリティを確保するための定期的な監査などの完全なパッケージを提供しています

。