アクセシブルなコンテンツ（WCAG 2.0 適合）の作成

WCAG 2.0 は、障害のあるユーザーが web コンテンツにアクセスして利用できるようにするための、テクノロジーから独立した一連のガイドラインおよび達成基準で構成されます。

WCAG 2.0 は 3 つの適合レベル（レベル A（最低）、レベル AA、レベル AAA（最高））に分けられます。各レベルの簡単な定義を次に示します。

• レベル A：​サイトのアクセシビリティ基本的な最低レベルに達しています。このレベルに達するには、レベル A の達成基準をすべて満たしている必要があります。
• レベル AA：​理想的なレベルのアクセシビリティです。ほとんどの状況において、ほとんどのテクノロジーを使用して、ほとんどのユーザーがアクセスできるように、サイトのアクセシビリティが強化されています。このレベルに達するには、レベル A とレベル AA の達成基準をすべて満たしている必要があります。
• レベル AAA：​きわめて高いレベルのアクセシビリティが確保されているサイトです。このレベルに達するには、レベル A、レベル AA、レベル AAA の達成基準をすべて満たしている必要があります。

サイトを作成する際は、サイトの全体的なレベルを特定する必要があります。

次の節では、WCAG 2.0 のガイドラインおよび適合レベル A および AA の関連する達成基準を示します。

原則 1：知覚可能

原則 1：知覚可能 - 情報およびユーザーインターフェイスコンポーネントは、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。

代替テキスト（1.1）

ガイドライン 1.1 代替テキスト：すべてのテキスト以外のコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などのユーザーが必要とする形式に変換できるように、代替テキストを提供すること。

テキスト以外のコンテンツ（1.1.1）

• 達成基準 1.1.1
• レベル A
• テキスト以外のコンテンツ：ユーザーに提示されるすべてのテキスト以外のコンテンツには、同等の目的を果たす代替テキストが提供されます。ただし、次の場合は除きます。

目的 - テキスト以外のコンテンツ（1.1.1）

Web ページ上の情報はテキスト以外の様々な形式（写真、ビデオ、アニメーション、チャート、グラフなど）で指定できます。視覚に障碍のあるユーザーは、テキスト以外のコンテンツを見ることができませんが、スクリーンリーダーによる読み上げや、触覚で感知可能な点字表示デバイスを使用すれば、テキストコンテンツにアクセスできます。そのため、グラフィカルな形式にコンテンツの代替テキストを指定することにより、グラフィカルなコンテンツを見ることができないユーザーも、そのコンテンツが提供するものと同等の情報にアクセスできます。

もう 1 つのメリットとして、代替テキストを使用すると、検索エンジンのテクノロジーによってテキスト以外のコンテンツのインデックスを作成できます。

達成方法 - テキスト以外のコンテンツ（1.1.1）

静的なグラフィックの場合、そのグラフィックと同等の代替テキストを指定することが基本的な要件です。そのためには、「代替テキスト」フィールドを使用します。

「代替テキスト」フィールドは、画像​コンポーネントダイアログの「メタデータ」タブに表示されます。

AEM では、デフォルトで入力される「代替テキスト」フィールドが必要です。画像が単なる装飾用で代替テキストが無意味な場合は、「画像は装飾画像」オプションをチェックできます。

適切な代替テキストの作成

テキスト以外のコンテンツには様々な形式があるので、代替テキストの値は、Web ページにおけるグラフィックの役割に応じて異なります。従う必要のある一般的な手法を次に示します。

• 代替テキストは、簡潔でありながら、テキスト以外のコンテンツによって提供されている情報の要点を明確にとらえる必要があります。

• 過剰に長い説明（100 文字超など）は避けてください。代替テキストに詳細を追加する必要がある場合は、次のようにします。

  • 代替テキストで短い説明を提示する
  • 同じページの別の場所、または別の Web ページに長い説明を表示し、画像をリンクにするか、画像の横にテキストリンクを配置することで、この別の説明にリンクを設定する

• 代替テキストでは、同じページ上のすぐ近くにテキスト形式で提示されているコンテンツをレプリケートしないでください。多くの画像は、ページのテキストで既に取り上げられている項目の説明なので、詳細な代替テキストが既に存在している場合があります。

• テキスト以外のコンテンツが別のページまたはドキュメントへのリンクであり、同じリンクを形成しているテキストが他にない場合、画像の代替テキストは、画像を説明するものではなく、リンク先を示すものにする必要があります。

• テキスト以外のコンテンツがボタン要素に含まれていて、同じボタンを形成するテキストがない場合、画像の代替テキストは、画像を説明するものではなく、ボタンの機能を示すものにする必要があります。

• 画像の代替テキストを空（null）にしても何の問題もありませんが、画像に代替テキストがない場合（純粋に装飾用のグラフィックの場合など）や、それに相当するテキストがページテキストに既に存在している場合に限られます。

W3C ドラフト：「HTML5: Techniques for providing useful text alternatives」には、様々なタイプの画像に適切な代替テキストプロビジョンの詳細と例が記載されています。

代替テキストが必要な、テキスト以外のコンテンツには、以下のようなタイプがあります。

• 説明写真：人や物や場所の画像です。ページでの写真の役割を考えてみましょう。同等の適切なテキストは、次のようになります。 [object] の写真​を使用する場合もありますが、周囲のテキストに依存する場合があります。

• アイコン：特定の情報を伝える小さい絵文字です。ページおよびサイト全体で一貫して使用する必要があります。1 つのページまたはサイト上の同じアイコンにはすべて、短く簡潔な同じ代替テキストを含める必要があります。ただし、そうすることにより、隣接するテキストと不要な重複が発生する場合を除きます。

• チャートとグラフ：通常は数値データを表します。よって、代替テキストを提供する 1 つのオプションとしては、チャートまたはグラフィックで示されている主なトレンドの簡単な概要を含めることがあります。必要に応じて、「詳細」画像プロパティタブの「説明」フィールドを使用して、詳細な説明をテキストで提供します。さらに、ページまたはサイトの別の場所で、ソースデータを表形式で提供することもできます。

  

  このチャート例に代替テキストを提供するには、画像自体に簡略化した alt テキストを追加して、画像の後に完全な代替テキストを入力します。

  <p><img src="figure1.gif" alt="Figure 1" ></p>
  <p> Figure 1. Distribution of Articles by Journal Category.
  Pie chart: Language=68%, Education=14% and Science=18%.</p>
  

  メモ

  上記のスニペットは、順序を説明するためだけに使用されています。画像​コンポーネントを、上記で使用している img src 参照の代わりに使用することをお勧めします。

  達成方法 - テキスト以外のコンテンツ（1.1.1）に示すように、AEM では、画像の設定ダイアログの「代替テキスト」フィールドと「説明」フィールドを組み合わせてこの処理を行うことができます。

• マップ、図、フローチャート：空間データを提供するグラフィック（例：オブジェクト間の関係やプロセスを説明する目的など）の場合は、重要メッセージをテキスト形式で指定します。地図の場合、完全に同等なテキストを提供することは困難な場合が多いものの、特定の場所への行き方を見つける手段として地図が提供されている場合は、地図画像の代替テキストで「X の地図」と簡単に示し、ページ内の別の場所または​画像​コンポーネントの「詳細」タブの「説明」フィールドで、目的の場所への道案内を提供します。

• CAPTCHA：CAPTCHA は、Completely Automated Public Turing test to tell Computers and Humans Apart（コンピューターと人間を区別するための、完全に自動化された公開チューリングテスト）の略です。web ページで人間と悪意のあるソフトウェアを区別するために使用されるセキュリティチェックですが、アクセス障害の原因となる可能性があります。これらの画像をユーザーが見て説明することにより、セキュリティテストに合格します。この画像の代替テキストを提供することは明らかに不可能なので、代わりに代替のグラフィック以外のソリューションを検討する必要があります。

  W3C では、いくつかの提案を行っています。例えば、以下の方法にはそれぞれメリットとデメリットがあるとしています。

  • 論理パズル
  • 画像の代わりに音声出力を使用
  • アカウントおよびスパムフィルターの使用制限

• 背景画像：それには、HTMLではなく、カスケードスタイルシート (CSS) を使用します。これは、代替テキスト値を指定できないことを意味します。したがって、背景画像は、重要なテキスト情報を提供しないでください。提供する場合、この情報をページのテキストにも提供する必要があります。

  ただし、画像を表示できないときに代替の背景を表示することは重要です。

  メモ

  背景と手前のテキストの間には適度なコントラストが必要です。これについて詳しくは、コントラスト（最低限）（1.4.3）を参照してください。

詳細情報 - テキスト以外のコンテンツ（1.1.1）

• 達成基準 1.1.1 について
• 達成基準 1.1.1 の達成方法
• W3C：HTML5：有効な代替テキストを提供するためのテクニック（ドラフト）
• W3C：CAPTCHA の説明と代替機能

時間依存メディア（1.2）

ガイドライン 1.2 時間依存メディア：時間依存メディアには代替コンテンツを提供すること。

ここでは​、​時間依存の Web コンテンツについて扱います。これには、ユーザーが再生可能なコンテンツ（映像、音声、アニメーションなど）や、収録済みのコンテンツ、ライブストリームなどが含まれます。

音声のみおよび映像のみ（収録済み）（1.2.1）

• 達成基準 1.2.1

• レベル A

• 音声のみおよび映像のみ（収録済み）：事前に収録済みの音声のみおよび映像のみのメディアには、以下が該当します。ただし、音声または映像がテキストの代替であり、その旨の明確なラベルが付けられている場合を除きます。

  • 収録済みの音声のみ：時間依存メディアの代替コンテンツが提供されており、収録済みの音声のみのコンテンツと同等の情報を提示している。
  • 収録済みの映像のみ：時間依存メディアの代替コンテンツまたは音声トラックが提供されており、収録済みの映像のみのコンテンツと同等の情報を提示している。

目的 - 音声のみおよび映像のみ（収録済み）（1.2.1）

次のようなユーザーに、アクセシビリティの問題が発生します。

• 視覚障碍のあるユーザー（音声がまったくない場合や、映像またはアニメーションの内容が音声で十分に伝えられていない場合）
• 音声を聞くことのできない、聴覚障碍のあるユーザー
• 音声を聞くことはできるが、内容を理解できないユーザー（理解できない言語が使用されている場合など）

映像または音声は、Adobe Flash など特定のメディア形式のコンテンツ再生をサポートしていないブラウザーやデバイスを使用しているユーザーも使用できない場合があります。

この情報を別の形式（テキストや、音声なしの映像に音声を付けるなど）で提供すると、元のコンテンツにアクセスできないユーザーがアクセス可能になります。

達成方法 - 音声のみおよび映像のみ（収録済み）（1.2.1）

• 映像なしの収録済み音声コンテンツ（ポッドキャストなど）の場合：

  • コンテンツの直前または直後に、オーディオコンテンツの字幕へのリンクを提供します。

    字幕ページは、すべての会話内容や会話以外の重要な内容をはじめ、誰が話しているか、状況の説明、口頭による表現など、重要な音声情報をテキスト情報に置き換えた HTML ページである必要があります。

• 音声なしのアニメーションまたは収録済み映像コンテンツの場合：

  • 映像で提供されている情報に相当するテキスト説明のリンクをコンテンツの直前または直後に提示します。
  • または、MP3 など一般的に使用されている音声形式で、相当する音声解説のリンクを提示します。

マルチメディア、具体的には Flash コンテンツを AEM Web ページに挿入することは、画像の挿入と類似しています。ただし、マルチメディアコンテンツには静止画像より多くの機能が含まれているので、マルチメディアの再生方法を制御するために、様々な設定やオプションがあります。

詳細情報 - 音声のみおよび映像のみ（収録済み）（1.2.1）

• 達成基準 1.2.1 について
• 達成基準 1.2.1 の達成方法

キャプション（収録済み）（1.2.2）

• 達成基準 1.2.2
• レベル A
• キャプション（収録済み）：同期されたメディアに含まれるすべての収録済み音声コンテンツに対してキャプションが提供されます。ただし、そのメディアがテキストの代替メディアであり、その旨の明確なラベルが付けられている場合を除きます。

目的 - キャプション（収録済み）（1.2.2）

聴覚障碍のあるユーザーは、音声コンテンツにアクセスできないか、アクセスが非常に困難になります。キャプションは、音声で話されている内容と話されていない内容に相当するテキストであり、映像再生中に適時画面に表示されます。これにより、音声を聞くことのできないユーザーが内容を理解できます。

達成方法 - キャプション（収録済み）（1.2.2）

キャプションは、次のいずれかの状態に設定できます。

• オープン：映像再生時に常に表示）
• クローズド：ユーザーがキャプションのオン、オフを切り替え可能

可能な場合は、クローズドキャプションを使用して、キャプションの表示、非表示をユーザーが選択できるようにしてください。

クローズドキャプションの場合は、適切な形式（SMIL など）の同期キャプションファイルを映像ファイルと共に作成して提供する必要があります（この方法の詳細は、このガイドの範囲外ですが、詳細情報 - キャプション（収録済み）（1.2.2）に、いくつかのチュートリアルへのリンクを提示しています）。映像にキャプションを設定できることをユーザーに知らせる注意書きを必ず提示してください。

オープンキャプションを使用する必要がある場合は、映像トラック内にテキストを埋め込みます。これを行うには、映像にタイトルをオーバーレイできるビデオ編集アプリケーションを使用します。

詳細情報 - キャプション（収録済み）（1.2.2）

• 達成基準 1.2.2 について：
• 達成基準 1.2.2 の達成方法
• W3C：Synchronized Multimedia
• Captions, Transcripts, and Audio Descriptions（WebAIM）

音声解説または代替メディア（収録済み）（1.2.3）

• 達成基準 1.2.3
• レベル A
• 音声解説または代替メディア（収録済み）：収録済みの映像コンテンツの時間依存メディアまたは音声解説の代わりとなるものが、同期されたメディアに対して提供されている。ただし、そのメディアがテキストの代替メディアであり、その旨の明確なラベルが付けられている場合を除きます。

目的 - 音声解説または代替メディア（収録済み）（1.2.3）

映像やアニメーションの情報のビジュアルのみが提供されている場合や、ビジュアルで起こっていることの内容を理解するのに十分な情報がサウンドトラックに含まれていない場合は、視覚障害のあるユーザーにアクセシビリティの問題が発生します。

達成方法 - 音声解説または代替メディア（収録済み）（1.2.3）

この達成基準を満たすために採用できる方法は 2 つあり、どちらを使用してもかまいません。

1. 映像コンテンツに音声解説を追加します。これを行うには、次の 3 つのうちいずれかの方法を使用します。

   • 既存のボイスの休止部分で、既存の音声トラックでは提示されていないシーンの変化に関する情報を提供します。

   • 元の音声を含み、さらにシーンの変化に関する追加の音声情報も含む新しい追加のオプション音声トラックを提供します。

     • これにより、ユーザーは既存の音声トラック​（​音声解説を含まない​）​と新しい音声トラック（音声解説を含む）を切り替えることができます。
     • これにより、追加の説明が不要なユーザーの混乱を防ぐことができます。

   • 音声解説を拡張できるように、2 つ目のバージョンの映像コンテンツを作成します。これにより、適切な時点で音声と映像を一時的に休止して既存のボイスの合間に詳細な音声解説を提供することに関連する困難な作業を軽減できます。その結果、アクションが再開される前に、より長い音声解説を指定できます。前の例と同様に、追加の説明が不要なユーザーの混乱を防ぐために、この方法はオプションの追加音声トラックとして提供することをお勧めします。

2. 映像またはアニメーションの音声および視覚要素をテキストで適切に表現した字幕を提供します。適宜、誰が話しているかや、状況の説明、声の表情を含めてください。長さによって、字幕は映像やアニメーションと同じページに配置するか、別のページに配置できます。後者を選んだ場合は、映像またはアニメーションのすぐ近くに字幕へのリンクを提示してください。

音声解説付きの映像の詳細な作成方法は、このガイドの範囲外です。映像および音声解説の作成には長時間を要する可能性がありますが、他のアドビ製品が役に立つ場合があります。Adobe Flash Professional でコンテンツを作成する場合は、適切なプラグインのダウンロードをユーザーに促すスクリプトを作成し、<noscript> 要素を使用して代替テキストを指定する必要があります。

詳細情報 - 音声解説または代替メディア（収録済み）（1.2.3）

• 達成基準 1.2.3 について：
• 達成基準 1.2.3 の達成方法
• Adobe Encore CS5

キャプション（ライブ）（1.2.4）

• 達成基準 1.2.4
• レベル AA
• キャプション（ライブ）：同期されたメディアに含まれるすべてのライブ音声コンテンツに対してキャプションが提供されている。

目的 - キャプション（ライブ）（1.2.4）

この達成基準は、聴覚障害のあるユーザーのアクセシビリティに関する問題に対応する点で、キャプション（収録済み）と同じです。ただし、この達成基準では web キャストなどライブのプレゼンテーションを扱う点が異なります。

達成方法 - キャプション（ライブ）（1.2.4）

上記のキャプション（収録済み）のガイダンスに従ってください。ただし、メディアがライブなので、キャプションは可能な限り短時間で、起こっていることに応じて作成する必要があります。したがって、リアルタイムキャプションツールや音声テキスト変換ツールの使用を検討してください。

詳細な手順説明はこのドキュメントの範囲外ですが、次のリソースで役に立つ情報が提供されています。

• WebAIM：Real Time Captioning
• AccessIT （University of Washington）：Can captions be generated automatically using speech recognition?

詳細情報 - キャプション（ライブ）（1.2.4）

• 達成基準 1.2.4 について
• 達成基準 1.2.4 の達成方法

音声解説（収録済み）（1.2.5）

• 達成基準 1.2.5
• レベル AA
• 音声解説（収録済み）：同期されたメディアに含まれるすべての収録済み映像コンテンツに対して音声解説が提供されている。

目的 - 音声解説（収録済み）（1.2.5）

この達成基準は、音声解説または代替メディア（収録済み）と同じです。ただし作成者は、レベル AA に準拠するために、より詳細な音声解説を提供する必要があります。

達成方法 - 音声解説（収録済み）（1.2.5）

音声解説または代替メディア（収録済み）のガイダンスに従ってください。

詳細情報 - 音声解説（収録済み）（1.2.5）

• 達成基準 1.2.5 について
• 達成基準 1.2.5 の達成方法

適応可能（1.3）

ガイドライン 1.3 適応可能：情報および構造を損なうことなく、様々な方法（例えば、よりシンプルなレイアウト）で提供できるようにコンテンツを制作している。

このガイドラインは、次のようなユーザーのサポートに必要な要件に対応しています。

• は、 標準 2 次元、複数列、色付き Web ページレイアウト

• 音声のみ、または大きいテキストや高いコントラストなど、代替の視覚表示を使用する可能性のあるユーザー

情報および関係性（1.3.1）

• 達成基準 1.3.1
• レベル A
• 情報および関係性：プレゼンテーションを通して伝えられる情報、構造および関係性を、プログラムによって特定できる、またはテキスト形式で利用できる。

目的 - 情報および関係性（1.3.1）

障碍のあるユーザーが使用している多くの支援テクノロジーは、コンテンツを効果的に表示または出力するために、構造情報に依存しています。この構造情報は、ページの見出し、テーブルの行や列の見出し、リストタイプの形式を取ります。例えば、スクリーンリーダーを使用すると、ページ内で見出しから見出しへ移動できる場合があります。ただし、ページコンテンツに元となる HTML がなく、視覚的スタイル設定による構造を持っているだけに見える場合は、支援テクノロジーで使用できる構造情報はなく、閲覧を簡単にするサポート機能が制限されます。

この達成基準の目的は、ブラウザーおよび支援テクノロジーが情報にアクセスし、情報を利用できるようにするために、構造情報が HTML を使用して提供されていることを確認することです。

達成方法 - 情報および関係性（1.3.1）

AEM では、適切な HTML 要素を使用することにより、web ページを簡単に構築できます。RTE（テキストコンポーネント）でページコンテンツを開き、段落書式​メニュー（段落記号）を使用して、適切な構造要素（段落、見出しなど）を指定します。

次の図は、段落テキストとしてスタイルが設定されているテキストを示しています。

Web ページに適切な構造が指定されていることを確認するには、次の方法があります。

• 見出しの使用：

  RTE のアクセシビリティ機能を有効にしている場合 ( AEMとアクセシビリティ)、AEMでは 3 つのレベルのページ見出しが提供されます。これらを使用して、コンテンツのセクションやサブセクションを識別できます。「見出し 1」は最上位の見出し、「見出し 3」は最下位の見出しです。システム管理者は、より多くの見出しレベルを使用できるようにシステムを設定できます。

  次の図は、様々なタイプの見出しの例を示しています。

  

• 強調テキスト：

  <strong> 要素または <em> 要素を使用して強調を示します。段落内のテキストをハイライト表示するために見出しを使用しないでください。

  • 強調するテキストをハイライト表示します。
  • 「B」アイコン（<strong> に対応）または「I」アイコン（<em> に対応）を、プロパティ​パネルでクリックします（HTML が選択されていることを確認してください）。
  メモ

  AEM の標準的なインストールに含まれる RTE は、次のように設定されています。

  • <strong> の代わりに <b> を使用
  • <em> の代わりに <i> を使用

  それぞれ実質的には同じですが、好ましいのは、意味的に正しい HTML である <strong> と <em> です。開発チームがプロジェクトインスタンスを作成する際に、<b> と <i> ではなく <strong> と <em> を使用するように RTE を設定できます。

• リストの使用：HTML を使用して、3 つの異なるタイプのリストを指定できます。

  • <ul> 要素は、順序なし​のリスト（箇条書き）に使用します。個々のリスト項目は、<li> 要素を使用して識別されます。

    RTE では、箇条書きリスト​アイコンを使用します。

  • この <ol> 要素は 番号付きリスト. 個々のリスト項目は、<li> 要素を使用して識別されます。

    RTE では、「番号付きリスト」アイコンを使用します。
    既存のコンテンツを特定のリストタイプに変更する場合は、該当するテキストをハイライト表示して、適切なリストタイプを選択します。前述した段落テキストの入力方法を示す例と同様に、適切なリスト要素が HTML に自動的に追加されます。

  全画面表示モードでは、個別の​箇条書きリスト​および​番号付きリスト​アイコンが表示されます。全画面表示モード以外の場合、1 つの​リスト​アイコンから 2 つのオプションを使用できます。

  

  メモ

  <dl> は、RTE ではサポートされていません。

• テーブルを使用：

  データのテーブルは、HTML のテーブル要素を使用して識別する必要があります。

  • 1 つの <table> 要素
  • テーブルの行ごとに 1 つの <tr> 要素
  • 行および列の見出しごとに 1 つの <th> 要素
  • データセルごとに 1 つの <td> 要素
  メモ

  クラシック UI では、テーブルは テーブル コンポーネント。

  さらに、アクセス可能なテーブルでは、次の要素および属性も使用します。

  • <caption> 要素は、テーブルの表示可能なキャプションを提供する際に使用します。キャプションは、デフォルトではテーブルの上に中央配置で表示されますが、CSS を使用して適切に配置できます。キャプションはプログラムによってテーブルに関連付けられるので、コンテンツを紹介する際に役立ちます。
  • <summary> 要素は、目の見えるユーザーに見えているものの概要を提示することで、視覚障碍のあるユーザーがテーブル内の情報をより簡単に理解できるように支援します。これは、複雑な、型どおりでないテーブルレイアウトが使用されている場合に特に便利です（この属性はブラウザーには表示されません。支援テクノロジーに読み上げられるだけです）。
  • <th> 要素の scope 属性は、セルが特定の行のヘッダーを表すか、特定の列のヘッダーを表すかを示すために使用します。同様の方法として、データセルが 1 つ以上のヘッダーに関連付けられている複雑なテーブルで、header 属性と id 属性を使用することがあります。
  メモ

  デフォルトでは、これらの要素や属性を直接は使用することはできませんが、システム管理者が​テーブルのプロパティ​ダイアログボックスでこれらの値のサポートを追加することは可能です（追加の HTML 要素および属性のサポートの追加を参照）。

  テーブル​を追加するときは、ダイアログを使用して​テーブルのプロパティ​を設定できます。

  • 適切な​キャプション。
  • 理想としては、「幅」、「高さ」、「ボーダー」、「セル内の余白」、「セルの間隔」のデフォルト値をすべて削除します。これらのプロパティはグローバルスタイルシートで設定できるからです。

  

  次に、セルのプロパティ​を使用して、セルがデータかヘッダーセルかを選択し、ヘッダーセルである場合は、行、列、その両方のどれに関連しているかを選択します。

  

• 複雑なデータテーブル：

  2 レベル以上のヘッダーを含む複雑なテーブルがある場合など、場合によっては基本的なテーブルのプロパティでは必要な構造情報を十分に指定できないことがあります。このような複雑なテーブルの場合は、header 属性と id 属性を使用して、ヘッダーと関連セルとの間に直接の関係を作成する必要があります。例えば、以下に示すテーブルでは、支援テクノロジーユーザーのためのプログラムによる関連付けを作成するために、header と id が照合されています。

  メモ

  id 属性は、標準のインストールでは使用できません。RTE で HTML ルールとシリアライザーを設定することによって有効にできます。

  メモ

  クラシック UI では、テーブルは、 テーブル コンポーネント。

  <table>
     <tr>
       <th rowspan="2" id="h">Homework</th>
       <th colspan="3" id="e">Exams</th>
       <th colspan="3" id="p">Projects</th>
     </tr>
     <tr>
       <th id="e1" headers="e">1</th>
       <th id="e2" headers="e">2</th>
       <th id="ef" headers="e">Final</th>
       <th id="p1" headers="p">1</th>
       <th id="p2" headers="p">2</th>
       <th id="pf" headers="p">Final</th>
     </tr>
     <tr>
      <td headers="h">15%</td>
      <td headers="e e1">15%</td>
      <td headers="e e2">15%</td>
      <td headers="e ef">20%</td>
      <td headers="p p1">10%</td>
      <td headers="p p2">10%</td>
      <td headers="p pf">15%</td>
     </tr>
  </table>
  

  AEM でこれを実現するには、ソース編集モードを使用してマークアップを直接追加する必要があります。

  メモ

  この機能は、標準インストールでは、すぐには使用できません。RTE、HTML ルールおよびシリアライザーを設定する必要があります。

詳細情報 - 情報および関係性（1.3.1）

• 達成基準 1.3.1 について
• 達成基準 1.3.1 の達成方法

感覚的な特徴（1.3.3）

• 達成基準 1.3.3
• レベル A
• 感覚的な特徴：コンテンツを理解および操作するために提供されている指示が、形状、サイズ、視覚的な場所、方向、音声など、コンポーネントの感覚的な特徴のみに依存していない。

目的 - 感覚的な特徴（1.3.3）

デザイナーは多くの場合、情報を提示するときに、色、形状、テキストのスタイル、コンテンツの絶対位置または相対位置など、視覚的なデザイン特性に注目します。情報を伝えるうえで、これらは非常に強力なデザイン技術ですが、視覚障碍のあるユーザーは、位置や色、形状などの属性を視覚的に識別する必要のある情報にはアクセスできない場合があります。

同様に、話し手が男性か女性かなど、異なる音声を区別する必要のある情報を音声コンテンツの代替テキストに反映しないと、聴覚障碍のあるユーザーにアクセシビリティの問題が発生します。

達成方法 - 感覚的な特徴（1.3.3）

ページコンテンツの視覚的な特徴に依存する情報が、代替形式でも提示されていることを確認してください。

• 視覚的な位置に依存して情報を提供しないでください。例えば、追加情報にアクセスするためにページの右側にあるメニューをユーザーに示す場合は、「右側のメニュー」とは言わずに、見出しを使用するなどしてメニューに名前を付けて、テキストではその名前で説明します​。
• 情報を伝える唯一の方法として、テキストのスタイル設定（太字や斜体など）に依存しないでください。

詳細情報 - 感覚的な特徴（1.3.3）

• 達成基準 1.3.3 について
• 達成基準 1.3.3 の達成方法

判別可能（1.4）

ガイドライン 1.4 判別可能：コンテンツを、利用者にとって見やすく、聞きやすいものにします。これには、前景と背景を区別することも含む。

色の使用（1.4.1）

• 達成基準 1.4.1
• レベル A
• 色の使用：色が、情報を伝達したり、アクションを示したり、応答を促したり、視覚的要素を区別したりするための唯一の視覚的方法として使用されていない。

目的 - 色の使用（1.4.1）

色は、Web ページの美しさを強調するうえで間違いなく効果的な方法であり、情報を伝達するうえでも便利です。ただし、全盲から色覚異常まで、様々な視覚障碍があり、特定の色を区別できない人もいます。このため、情報を提供するうえで、色分けは信頼性の低い方法となります。

例えば、赤と緑の色覚異常のある人は、緑の影と赤の影を区別できません。両方の色が第三の色（茶色など）に見える場合があり、その場合は赤、緑、茶色を区別できません。

また、テキストのみのブラウザーやモノクロの表示デバイスを使用している場合や、ページの白黒印刷を見る場合も、色を知覚できません。

達成方法 - 色の使用（1.4.1）

色を使用して情報を伝達する場合は、色を見なくても情報を利用できるようにしてください。

例えば、色によって提供されている情報を、テキストでも明示的に提供します。以下の図は、色とテキストの両方で公演の空席情報を伝える場合を示しています。

パフォーマンス	入手方法
3 月 16 日（火）	空席あり
3 月 17 日（水）	空席あり
3 月 18 日（木）	完売

情報を提供するためのキューとして色を使用する場合は、追加の視覚的キューを提供する必要があります。例えば、スタイル（太字、斜体など）やフォントの変更などです。これは、低視力の人や色覚異常のある人が情報を識別する際に役立ちます。ただし、ページをまったく見ることのできない人には役に立たないので、全般的に依存することはできません。

詳細情報 - 色の使用（1.4.1）

• 達成基準 1.4.1 について
• 達成基準 1.4.1 の達成方法
• 3:1 のコントラスト比を満たすためのガイダンス（「Web に安全な」色のリストを含む）

コントラスト（最低限）（1.4.3）

• 達成基準 1.4.3

• レベル AA

• コントラスト（最低限）：テキストおよびテキストの画像を視覚的に表現したものが、4.5:1 以上のコントラスト比を持つ。ただし、次の場合を除く。

  • 大きいテキスト：大型のテキストおよび大型のテキストの画像の最低コントラスト比は 3:1 です。
  • 付随的：テキストまたはテキストの画像が、非アクティブなユーザーインターフェイスコンポーネントの一部である場合、純粋な装飾である場合、誰にも表示されない場合、他の重要な視覚コンテンツが含まれている写真の一部である場合は、コントラストの要件はありません。
  • ロゴタイプ：ロゴまたはブランド名の一部であるテキストには、最低コントラストの要件はありません。

目的 - コントラスト（最低限）（1.4.3）

特定の視覚障碍のあるユーザーは、特定の低コントラストの色のペアを区別できない場合があります。次のいずれかの場合に、このようなユーザーにアクセシビリティの問題が発生することがあります。

• テキストと背景色のコントラストが不十分な場合。
• テキストの色分け（リンクテキストとリンク以外のテキストなど）が、情報を区別するうえで重要な場合。

達成方法 - コントラスト（最低限）（1.4.3）

テキストと背景色のコントラストが十分であることを確認します。コントラスト比は、問題のテキストのサイズとスタイルによって異なります。

• テキストのサイズが 18 ポイント（太字の場合は 14 ポイント）未満の場合、テキストまたはテキストの画像と背景の間のコントラスト比は 4.5:1 以上である必要があります。
• テキストのサイズが 18 ポイント（太字の場合は 14 ポイント）以上の場合、コントラスト比は 3:1 である必要があります。
• 背景が模様入りの場合は、テキスト周辺の背景に陰影を付けて、4.5:1 または 3:1 の比率を維持する必要があります。

コントラスト比を確認するには、Paciello Group の Color Contrast Analyser や WebAIM の Color Contrast Checker などの色コントラストツールを使用してください。これらのツールを使用すると、色のペアを確認し、コントラストの問題を報告できます。

また、ページの外観の指定にそれほど関心がない場合は、背景や前面のテキストの色を指定しないことを選択できます。その場合、テキストや背景の色はユーザーのブラウザーによって決まるので、コントラストの確認は不要です。

推奨されるコントラストレベルを満たすことができない場合は、代替の、同等のページ（色のコントラストに関する問題がないページ）へのリンクを提供するか、ユーザーが自身の要件に合わせてページの配色のコントラストを調整できるようにする必要があります。

詳細情報 - コントラスト（最低限）（1.4.3）

• 達成基準 1.4.3 について
• 達成基準 1.4.3 の達成方法

文字画像（1.4.5）

• 達成基準 1.4.5

• レベル AA

• 文字画像：使用しているテクノロジーで視覚的表現を実現できる場合に、文字画像ではなくテキストを使用して情報を伝達している。ただし、次の場合を除く。

  • カスタマイズ可能：テキストの画像を、ユーザーの要件に合わせて視覚的にカスタマイズできる場合
  • 必須：テキストの特定の表現が、伝達する情報にとって不可欠な場合

目的 - 文字画像（1.4.5）

文字画像は、多くの場合、ロゴタイプなど特定のスタイルのテキストが好まれる場合や、テキストが別のソース（紙のドキュメントのスキャンなど）から生成された場合に使用されます。ただし、HTML で表現され、CSS を使用してスタイル設定されているテキストと比較して、文字画像は柔軟性に欠けており、視覚障碍のあるユーザーや読解が困難なユーザーにとって必要となるサイズや外観の変更ができません。

達成方法 - 文字画像（1.4.5）

文字画像を使用する必要がある場合は、CSS を使用して、文字画像を同等の HTML テキストに置き換え、テキストをカスタマイズ可能にします。これをおこなう方法の例は、「C30：CSS を用いて、テキストを画像化された文字に置き換え、変換するユーザーインターフェイスコントロールを提供する」を参照してください。

詳細情報 - 文字画像（1.4.5）

• 達成基準 1.4.5 について
• 達成基準 1.4.5 の達成方法

原則 2：操作可能

原則 2：操作可能 - ユーザーインターフェイスコンポーネントおよびナビゲーションは操作可能でなければならない。

一時停止、停止、非表示（2.2.2）

• 達成基準 2.2.2

• レベル A

• 一時停止、停止、非表示：情報の移動、点滅、スクロールまたは自動更新について、以下が該当する。

  • 移動、点滅、スクロール：情報の移動、点滅またはスクロールのうち、（a）自動的に開始し、（b）5 秒を超えて継続し、（c）他のコンテンツと並列で提示されるものに関しては、移動、点滅またはスクロールが必須のアクティビティの一部である場合を除き、ユーザーが情報を一時停止、停止または非表示にするメカニズムがある。
  • 自動更新：情報の自動更新のうち、（a）自動的に開始し、（b）他のコンテンツと並列で提示されるものに関しては、自動更新が必須のアクティビティの一部である場合を除き、ユーザーが情報を一時停止、停止または非表示にするか、更新の頻度を制御するメカニズムがある。

注意点は次のとおりです。

1. コンテンツのちらつきや閃光に関連する要件については、発作の防止：発作を引き起こすようなコンテンツを設計しないこと（2.3）を参照してください。
2. この達成基準を満たさないコンテンツがある場合は、ユーザーがページ全体を使用できない場合があるので、Web ページ上のすべてのコンテンツ（他の達成基準を満たすために使用されているかどうかにかかわらず）が、この達成基準を満たす必要があります。適合要件の「5. 非干渉」を参照してください。
3. ソフトウェアによって定期的に更新されるコンテンツや、ユーザーエージェントにストリーミングされるコンテンツでは、一時停止してから再開されるまでの間に生成または受信された情報を保持したり停止したりする必要はありません。これは技術的に不可能な場合があり、多くの場合に誤解を招く可能性があるからです。
4. プリロード段階または同様の状況の一環として発生するアニメーションがある場合に、すべてのユーザーに対してその段階中はインタラクションが発生できず、進捗を示さないことによってユーザーが混乱したり、コンテンツがフリーズまたは破損していると考える可能性がある場合は、そのアニメーションを必須と見なすことができます。

目的 - 一時停止、停止、非表示（2.2.2）

動くコンテンツがあると、一部のユーザーは、気が散ったり、ページの他の部分に集中しにくくなると感じる場合があります。また、そのようなコンテンツは、動くテキストを目で追うことが困難なユーザーにとって読みにくい場合もあります。

達成方法 - 一時停止、停止、非表示（2.2.2）

移動、閃光、点滅の性質を持つコンテンツを含む Web ページを作成する際には、コンテンツの性質に応じて、次のうち 1 つ以上の提案事項を適用できます。

• ユーザーの読む時間を十分にするために、コンテンツのスクロールを一時停止する方法を提供します。例えば、ニュースティッカーや自動更新テキストなどです。
• 点滅するコンテンツが、5 秒後に点滅を停止するようにします。
• 適切なテクノロジーを使用して、ブラウザーによって無効にできる点滅コンテンツを表示します。例えば、GIF（Graphics Interchange Format）ファイルや APNG（Animated Portable Network Graphics）ファイルなどです。
• ユーザーがページ上の点滅コンテンツをすべて無効にできるように、Web ページにフォーム制御を提供します。
• 上記の方法が不可能な場合は、すべてのコンテンツを含み、点滅のないページへのリンクを提供します。

詳細情報 - 一時停止、停止、非表示（2.2.2）

• 達成基準 2.2.2 について
• 達成基準 2.2.2 の達成方法

発作の防止（2.3）

ガイドライン 2.3 発作の防止：発作を引き起こすようなコンテンツを設計しないこと。

3 回の閃光、またはしきい値以下（2.3.1）

• 達成基準 2.3.1
• レベル A
• 3 回の閃光、またはしきい値以下：1 秒間の閃光回数が 3 回を超えるものが Web ページに含まれていない。または、閃光が一般閃光しきい値および赤色閃光しきい値を下回っている。

目的 - 3 回の閃光、またはしきい値以下（2.3.1）

場合によっては、コンテンツが放つ閃光によって光過敏性発作が発生する可能性があります。この達成基準を満たすと、そのようなユーザーが閃光を放つコンテンツの心配をせずにすべてのコンテンツにアクセスし、体験できます。

達成方法 - 3 回の閃光、またはしきい値以下（2.3.1）

次の技法が適用されていることを確認する必要があります。

• コンポーネントの 1 秒間の閃光回数が 3 回以下であることを確認します。
• 上記の条件を満たすことができない場合は、画面上のピクセル単位の小さい安全な領域内に​、​閃光コンテンツを表示します。この領域は、「G176: Keeping the flashing area small enough」で説明している複雑な数式を使用して計算されるので、この技法を使用するのは、閃光コンテンツが絶対に必要な場合のみにする必要があります​。

詳細情報 - 3 回の閃光、またはしきい値以下（2.3.1）

• 達成基準 2.3.1 について
• 達成基準 2.3.1 の達成方法

ページタイトル（2.4.2）

• 達成基準 2.4.2
• レベル A
• ページタイトル：Web ページが、トピックまたは目的を説明するタイトルを持つ。

目的 - ページタイトル（2.4.2）

この達成基準を満たすと、特定の障碍があるかどうかにかかわらず誰でも、ページ全体を読まずに Web ページの内容を短時間で識別できます。これは、ブラウザーのタブで複数の Web ページを開いている場合に特に便利です。ページタイトルがタブに表示されるので、簡単に見つけることができるからです。

達成方法 - ページタイトル（2.4.2）

AEM で新しい HTML ページを作成する際に、ページタイトルを指定できます。ページの内容を適切に説明するタイトルを付けて、コンテンツが実際にニーズに合っているかどうかをサイト訪問者が識別できるようにしてください。

ページを編集する際に、ページタイトルを編集することもできます（ページ情報／プロパティ​からアクセス可能）。

詳細情報 - ページタイトル（2.4.2）

• 達成基準 2.4.2 について
• 達成基準 2.4.2 の達成方法

リンクの目的（コンテキスト内）（2.4.4）

• 達成基準 2.4.4
• レベル A
• リンクの目的（コンテキスト内）：各リンクの目的が、リンクテキストのみから、またはリンクテキストとプログラムで特定したリンクコンテキストから特定できる。ただし、リンクの目的が一般的にユーザーにとってあいまいな場合を除く。

目的 - リンクの目的（コンテキスト内）（2.4.4）

障碍に関係なく、すべてのユーザーにとって、適切なリンクテキストによってリンクの目的を明確に示すことは重要です。これによってユーザーは、実際にリンクをたどるかどうかを判断します。目の見えるユーザーにとって、ページ上に複数のリンクがある場合（特に、テキストが多いページの場合）、意味のあるリンクテキストは、ターゲットページの機能をより明確に示すので、非常に便利です。一方で、支援テクノロジーのユーザーは、1 つのページにすべてのリンクのリストを生成できるので、コンテキストからリンクテキストをより簡単に理解できます。

達成方法 - リンクの目的（コンテキスト内）（2.4.4）

何よりも、リンクの目的がリンクのテキスト内で明確に説明されていることを確認してください。

• 悪い例：

  • テキスト： 2010 年秋の夜間クラスについて詳しくは、ここをクリックしてください。
  • 理由：リンク先が不明瞭で、あいまいに示されています。

• 良い例：

  • テキスト： 2010 年秋の夜間クラス — 詳細。
  • 理由：テキストとリンク要素の位置をわずかに調整することにより、リンクテキストを改善できます。

リンクは複数ページにわたって一貫した表現にする必要があります。ナビゲーションバーの場合は特にそうです。例えば、特定のページへのリンクの名前を、あるページで「パブリケーション」とする場合は、一貫性を保つために、他のページでもそのテキストを使用します。

ただし、執筆の時点では、タイトルの使用に関連した問題がいくつかあります。

• タイトル属性内に含まれるテキストは、通常はマウスユーザーにツールチップのポップアップとして表示されるだけで、キーボードを使用したアクセスはできません。
• スクリーンリーダーでタイトル属性を読み上げることができますが、この機能はデフォルトでは有効になっていない場合があり、タイトル属性が存在することにユーザーが気づかない可能性があります。
• タイトルテキストの外観の変更が難しいので、ユーザーによっては読むことが困難または不可能な場合があります。

タイトル属性を使用してリンクにコンテキストを追加することはできますが、制限事項に注意し、また、適切なリンクテキストの代替としては使用しないでください。

リンクが画像で構成されている場合は、画像の代替テキストでリンク先を説明してください。例えば、本棚の画像をある人物のパブリケーションへのリンクとして設定している場合は、代替テキストを「John Smith のパブリケーション」のようにします。「本棚」とはしないでください。

また、画像要素に加えて、リンクの目的を説明するテキストがリンクアンカーに含まれている（画像と並んでテキストが表示されている）場合は、空の alt 属性を使用して画像を表します。

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

追加のコンテキストを必要とせずにリンクの目的を識別するリンクテキストを提供することが望ましいものの、これが常に可能とは限らないことがわかっています。コンテキストのないリンクは、次の場合に使用できます。HTML の例は、達成基準 2.4.4 の達成方法を参照してください。

• リンクテキストが、密接に関連するリンクのリストの一部であり、リンクを含むリスト項目で十分なコンテンツが提供されている場合。
• リンクの目的が、前の（後ろではない）段落テキストから明確に識別できる場合​。
• リンクがデータテーブル内に含まれているので、関連する見出しから目的を明確に識別できる場合。
• リンクのリストが一連の見出し内に含まれており、見出し自体で適切なコンテキストが提供される場合。
• リンクのリストがネストされたリンク内に含まれており、ネストされたリンクの上の親リスト項目で適切なコンテキストが提供される場合。

1 つのページ上に複数のリンクがある場合（各リンクで提供される指示が複雑だが必要な詳細である場合）は、代替バージョンの Web ページを提供することが妥当と言えます。代替バージョンは、まったく同じコンテンツを表示する一方で、リンクテキストはそれほど詳細ではないものを用意します。

また、スクリプトを使用して、リンク自体では最低限のテキストを使用し、ページの上部に向かって配置されている適切なコントロールをアクティベートするとリンクテキストが展開され​、​詳細が表示されるように指定することもできます。同様に、CSS を使用して、目の見えるユーザーに対しては完全なリンクを非表示にし、スクリーンリーダーユーザーに対しては引き続き完全に画面に出力する方法があります。これはこのドキュメントの範囲外ですが、これを行う方法について詳しくは、詳細情報 - リンクの目的（コンテキスト内）（2.4.4）を参照してください​。

詳細情報 - リンクの目的（コンテキスト内）（2.4.4）

• 達成基準 2.4.4 について
• 達成基準 2.4.4 の達成方法
• C7：CSS を使用して、リンクテキストの一部を非表示にする

原則 3：理解可能

原則 3：理解可能 - 情報およびユーザーインターフェイスの操作は理解可能でなければならない。

テキストのコンテンツを読みやすく理解可能にする（3.1）

ガイドライン 3.1 読みやすさ：テキストのコンテンツを読みやすく理解可能にすること。

ページの言語（3.1.1）

• 達成基準 3.1.1
• レベル A
• ページの言語：各 Web ページのデフォルトの自然言語がどの言語であるか、プログラムによる特定ができる。

目的 - ページの言語（3.1.1）

この達成基準の目的は、テキストおよびその他の言語コンテンツが正確にレンダリングされることを確認することです。スクリーンリーダーユーザーにとっては、これによってコンテンツが正しく発音され、一方で視覚的なブラウザーでは特定の言語セットが正確に表示されます。

達成方法 - ページの言語（3.1.1）

この達成基準を満たすために、ページ上部の lang 要素内で <html> 属性を使用して、Web ページのデフォルト言語を識別できます。次に例を示します。

• イギリス英語で書かれているページの場合、<html> 要素は次のようになります。 <html lang = “en-gb”>

• 一方、米国英語でレンダリングされるページの場合は、次の標準規格を採用します。 <html lang = “en-us”>

AEM では、ページのデフォルト言語は、ページを作成する際に設定されますが、ページを編集する際に変更することも可能です（サイドキック／「ページ」タブ／ページプロパティ／「詳細」タブからアクセス可能）。

詳細情報 - ページの言語（3.1.1）

• 達成基準 3.1.1 について
• 達成基準 3.1.1 の達成方法
• コードは ISO 639-1 に基づいています。各言語の詳細なコードリストについては、W3 Schools サイトを参照してください。

一部分の言語（3.1.2）

• 達成基準 3.1.2
• レベル AA
• 一部分の言語：コンテンツの一節ごと、フレーズごとの人間言語はプログラムによって決定できます。ただし、固有名詞、技術用語、不明な言語の単語、周囲のテキストに特有の表現の一部となっている単語やフレーズなどを除きます。

目的 - 一部分の言語（3.1.2）

この達成基準の目的は、ページの言語の達成基準と類似していますが、単一のページに複数言語のコンテンツ（引用や一般的でない外来語）が含まれる Web ページに適用される点が異なります。

この達成基準を適用するページでは、以下のことが可能です。

• 点字切り替えソフトウェアで、アクセント記号付きの文字を挿入。
• スクリーンリーダーで、デフォルト言語にない単語を正確に発音。
• Google 翻訳などの翻訳ツールを使用して、コンテンツを別の言語に翻訳。

達成方法 - 一部分の言語（3.1.2）

lang 属性を使用して、コンテンツの言語の変更を識別できます。例えば、ドイツ語（ISO 639-1 コード “de”）の引用は、次のように表示できます。

<blockquote cite = "John F. Kennedy" lang = "de">
     <p>Ich bin ein Berliner</p>
 </blockquote>

同様に、span 要素を次のように使用した場合は、一般的でない外来語やフレーズをブラウザーで正しくレンダリングできます。

<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>

span 要素を適切な言語で追加するには、RTE のソース編集モードで、上記の内容になるように HTML マークアップを手動で編集します。または、システム管理者が lang 属性を RTE に含めることもできます（追加の HTML 要素および属性のサポートの追加を参照）。

詳細情報 - 一部分の言語（3.1.2）

• 達成基準 3.1.2 について
• 達成基準 3.1.2 の達成方法

ユーザーによるミスの回避および修正の支援（3.3）

ガイドライン 3.3 入力支援：利用者のミスを防ぎ、修正を支援すること。

ラベルまたは説明（3.3.2）

• 達成基準 3.3.2
• レベル A
• ラベルまたは説明：コンテンツにユーザー入力が必要な場合に、ラベルまたは説明が提供されている。

目的 - ラベルまたは説明（3.3.2）

フォームへの入力を支援する説明を提供することは、インターフェイスを使いやすくするための基本です。このような説明は、視覚や認知機能に障害のあるユーザーがフォームのレイアウトや、フォームの特定のフィールドで提供されているデータの種類を理解する特に役立ちます。

AEM では、「テキストフィールド」のようなフォームコンポーネントをページに追加すると、デフォルトのラベルがページに追加されます。このデフォルトのタイトルはコンポーネントのタイプによって異なります。そのフィールドの編集ダイアログの「タイトルとテキスト」タブに、独自のタイトルを追加できます。各フォームコンポーネントに関連付けられているデータをユーザーが理解できるようなラベルを指定することが重要です。

この「タイトル」フィールドは、支援テクノロジーで使用できるラベルを提供するので、フィールド要素用に使用する必要があります。フィールドの横のテキストにラベルを書き込むだけでは不十分です。

一部のフォームコンポーネントでは、「タイトルを非表示にする」チェックボックスを使用してラベルを非表示にすることもできます。この方法で非表示にしたラベルは、支援テクノロジーでは引き続き使用できますが、画面には表示されません。状況によっては、この方法で十分ですが、通常は、可能な限り目に見えるラベルを含めることをお勧めします。画面の非常に狭い部分（フィールド 1 つずつ）を見ていて、ラベルによってフィールドを正確に識別できることを必要としているユーザーがいる可能性もあるからです。

画像ボタン

画像ボタンが使用されている場合（画像ボタン​コンポーネントなど）、編集ダイアログの「タイトルとテキスト」タブの「タイトル」フィールドには、ラベルではなく、画像の代替テキストが実際に表示されます。以下の例では、Submit というテキストを持つ画像に、Submit という代替テキストが、編集ダイアログの「タイトル」フィールドを使用して追加されています。

フォームフィールドのグループ

ラジオグループ​など、関連するコントロールのグループがある場合は、個々のコントロールだけでなく、グループにもタイトルが必要な場合があります。AEM で一連のラジオボタンを追加する際には、「タイトル」フィールドでこのグループタイトルを指定し、個々のタイトルはラジオボタン（「項目」）を作成する際に指定します。

ただし、グループタイトルとラジオボタン自体との間には、プログラム的な関連付けはありません。テンプレートエディターでは、必要な fieldset タグと legend タグでタイトルを囲んで、この関連付けを作成する必要があります。この処理は、ページのソースコードを編集することによってのみ可能です。また、システム管理者がこれらの要素のサポートを追加して、フィールドのプロパティ​ダイアログに表示させることもできます（追加の HTML 要素および属性のサポートの追加を参照）。

フォームに関するその他の考慮事項

データを特定の形式で入力する必要がある場合は、ラベルテキストでそのことを明確に示します。例えば、日付を DD-MM-YYYY という形式で入力する場合は、ラベルの一部としてこのことを具体的に示します。つまり、スクリーンリーダーユーザーがフィールドに遭遇したとき、形式に関する追加情報も含めて、ラベルが自動的に読み上げられるということです。

入力が必須のフォームフィールドがある場合は、「必須」という単語をラベルの一部として使用して、このことを明確に示します。AEM では、必須のフィールドにはアスタリスクが追加されますが、「required」（必須）という単語をラベル自体に含めることが理想的です（編集ダイアログの「タイトル」フィールドを使用）。

ラベルの配置も、適切なフィールドを見つけるうえで役立つので（複雑なフォームの場合に特に）重要です。次の規則に従います。

• チェックボックスまたはラジオボタン：ラベルをフィールドのすぐ右に配置します。
• その他すべてのフォームコンポーネント（テキストボックス、コンボボックスなど）：ラベルをフィールドのすぐ上またはすぐ左に配置します。

機能がごく限られている簡単なフォームでは、「Submit」ボタンに適切にラベルを付けると、隣のフィールド（「Search」など）のラベルとしての役割を果たすことができます。これは、ラベルテキストのスペースを見つけることが困難な可能性のある場合に便利です。

詳細情報 - ラベルまたは説明（3.3.2）

• 達成基準 3.3.2 について
• 達成基準 3.3.2 の達成方法