あなたのWebサイトのテキストはADAに対応していますか？

あらゆる業種の企業や団体にとって、これらの基準を理解し、遵守することは重要です。中でも、金融、医療、教育、そして行政においては、特にその必要性が高くなります。ADAのガイドラインは一見複雑に見えるかもしれませんが、実際には、すべてのユーザーの体験を優先した、配慮のあるクリーンなデザインを具体的に定めているものです。

アクセシビリティの基準.

ADAは、Webアクセシビリティに取り組むデザイナーや開発者の指針として、4つの基本原則を定めています。Webサイトは、「知覚可能（perceivable）」「操作可能（operable）」「理解可能（understandable）」、そして「堅牢（robust）」であること。これらはシンプルな目標のように見えるかもしれませんが、視覚、聴覚、または身体機能に障害を持つ人々にとって、これらの本質的な要素は、日常的なデザインの選択によって意図せず損なわれてしまうことがあります。

テキスト内の重要な語句を示すため、操作方法や行動を促す呼びかけを区別するため、あるいはアクションの完了（例えばボタンをクリックした後）を示す場合などに、色だけを使用すべきではありません。 

これらの原則には、それぞれ12項目の具体的で実行可能なデザインとユーザビリティに関する推奨事項が設定されています。これらの推奨事項への適合度は、レベルAからAA、そしてAAAまでの3段階で評価されます。レベルAはガイドラインの最低限の基準を満たしていることを示し、レベルAAAは理想的な対応を示します。(レベルAAはその中間です）。

ADAのアクセシビリティ基準は、直接的に政府が施行しているわけではありません。ヨーロッパのEU一般データ保護規則（GDPR）とは異なり、政府が企業や団体に対し、基準への対応を義務づけているわけではありません。その代わり、企業のWeb体験がADAに準拠していないとして、民間による訴訟を通じて、コンプライアンスが問われることが多くあります。

ガイドラインの詳細な説明や、適合基準について解説する資料は数多く存在します。この記事では、その中からテキストに関連する3つの基本的なガイドラインに焦点を当ててみましょう。

ADAに対応したWebサイトにするための色の使い方.

デザイナーは長年にわたり、ページ上の階層や差別化を表現する手段として色を使ってきました。しかし、これは視覚に障害のある人、特に色覚異常を持つ人にとって、可読性を損なう要因になり得ます。ADAは、情報を伝えたり、行動を示したり、反応を促したり、視覚要素を区別したりする目的で、「色だけ」を唯一の視覚的手段として使用してはならないと規定しています。

言い換えれば、テキスト内の重要な語句を示すため、操作方法や行動を促す呼びかけを区別するため、あるいはアクションの完了（例えばボタンをクリックした後）を示す場合などに、色のみを使って区別してはいけないということです。

その代わりに、見出し、操作方法、行動への呼びかけを示すために、文字のウェイト（太さ）、サイズ、スタイルをうまく使い分けることで、これらの問題を解決すべきです。ハーバード大学 メディカル・スクールのWebサイトは、この原則を実践している好例です。汎用性の高い単一のフォントファミリーでも十分な表現が可能ですが、目的に応じてフォントを使い分けることで、こうしたユースケースにアプローチすることができます。

なお、ここで述べた手法は「色を使ってはいけない」という意味ではありません。色が唯一の識別手段であってはならないというのがADAの方針です。

「昔は、階層を示すために色を使っていました」と、Boston Interactiveのシニア・クリエイティブ・ディレクター、Marc Rustは述べています。「今では、読みやすさを維持し、ADAに対応したアクセシビリティを確保するために、色ではなくフォントサイズを使用しています。デザインを効果的に見せるために、フォントの選択はこれまで以上に重要になっています」

テキストのコントラストがADA対応に果たす役割.

コントラストもADAにおける重要な要素であり、色の使用と密接に関連しています。ADAは中程度の視力障害を持つ人でも読み取れるように、テキストと背景の間に十分なコントラストを持たせることを求めており、コントラスト比に関する具体的な推奨事項を定めています。

規定のコントラスト比は文字の大きさによって異なり、高い適合評価を目指す場合は、より比率を大きくする必要があります。オンライン上には、テキストと背景の色の組み合わせがどの適合レベルにあたるかを判定できるツールも多数存在します。

また、特に小さな文字サイズでは、オールキャップス（全て大文字で表記すること）を避けることも重要です。オールキャップスのテキストは文字の高さが一定であるため、視覚に障害のある人にとっては、文字の形を判別しにくくなり、単語としての認識もしづらくなるためです。オールキャップスは、使用するとしてもサイズを大きくした場合のみにとどめ、見出しであっても文頭だけ大文字にするセンテンスケースでの表記が推奨されます。

Rustは次のように述べています。「小さな文字で書かれたオールキャップスのテキストは、視覚に障害のある人にとっては、ただの塊にしか見えないのです。12pt以下ではオールキャップスを使うべきではありません」

このガイドラインからも、コントラストを高めるフォント選びが重要であることがわかります。例えば、極細のウェイトは、たとえ理論上のコントラスト比がADAの基準を満たしていても、実際にはデザイン上の理由で視認性が下がることがあります。

同様に、スラブセリフのような重厚なデザインも、視覚に障害のある人にとっては読みにくい場合があります。代わりに、大きく開いたカウンター（文字内部の空間）、十分なxハイトなど、識別しやすい字形を持つ視認性の高いフォントを選ぶとよいでしょう。

フォントの選択は非常に重要です。ADAはコントラストに関する具体的かつ測定可能なガイドラインを示していますが、そこには一定の主観性も含まれています。「適切なフォントの選定は、完全に科学的なものではありません」とRustは言います。「実際には、芸術的な判断が大部分を占めています」

ライブテキストを使うことで、WebサイトをADA対応に.

ADAでは、Webサイトを訪れるユーザーが、スクリーンリーダーやその他の支援技術を使用できることを重要視しています。その実現に不可欠なのがライブテキストです。

ライブテキストとは、テキストがWebサイト上でコードとして記述されているものを指します。ユーザーの視点から見ると、ライブテキストはWord文書のテキストと同じように、選択やコピー＆ペーストすることができます。最近のWebサイトのテキスト、特に本文（この記事のような）は、ほとんどがライブテキストで構成されています。

一方で、テキストを画像に埋め込むこともできます。これは現在ではあまり一般的ではありませんが、主に見出しや装飾的な用途に使われます。問題は、スクリーンリーダーなどの支援技術では、画像上のテキストを「読む」ことができないということです。そこでADAでは、情報を伝える際には常にライブテキストを使用すべきであると定めています。画像内のテキストが認められるのは、「純粋な装飾」または 「伝達される情報にとって特定の表現が不可欠な場合」に限られます。

また、ライブテキストを使用することで、テキストのサイズ調整も容易になります。ADAのガイドラインでは、「支援技術を使わずに、コンテンツや機能を損なうことなく、最大200％までテキストを拡大可能であるべき」とされています。このようなユーザビリティは、モバイルファーストのデザインではすでに広く取り入れられていますが、ADAのガイドラインは、これを正式な要件として明文化しているのです。

「モバイルファーストの視点は、テキストの設計を考える上で有効です」と、Rustは語ります。「デバイスのサイズや表示形式ではなく、テキストがどのように使われるかに注目しましょう。テキストは、ユーザーのニーズに合わせて柔軟に変化する、レスポンシブなコンポーネントとして捉えるべきです」

形と機能のバランスをとる.

ガイドラインは細かく書かれているように見えるかもしれませんが、実際にはその多くが、ユーザーにとって使いやすい設計として当然のことでもあります。ADAが定める基準の多くは、デザイナーが本来取り組むべき基本的な配慮であり、 ADAが求める基準には達していないにせよ、すでに実践している場合も少なくないでしょう。

とはいえ、ブランドらしさを保ちながらADAに対応するには、適切なツールを用意することが不可欠です。その一つとして、多様なスタイルで可読性の高いフォントを豊富に取り揃えた、強力なフォントライブラリが挙げられます。現在のところ、ADAに公式に認定されたフォントは存在せず、認証制度も設けられていませんが、ガイドラインを参考にすれば、要件を満たすフォントを見極めるのに役立ちます。使いやすいWebフォントを豊富にそろえた充実したフォントライブラリがあれば、ユーザーにとって使いやすい、アクセシブルなWebデザインの実現に大きく前進できるでしょう。