アクセシブルなアダプティブフォームの作成 creating-accessible-adaptive-forms

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

はじめに introduction

アクセシブルなフォームとは、特別な支援を必要とするユーザーを含むすべてのユーザーが使用できるフォームを意味します。アダプティブフォームは、障害を持つ様々なユーザーに対して可用性を向上させるための様々な特長や機能を備えています。アクセシビリティをアダプティブフォームに組み入れることは、できる限り幅広いオーディエンスがコンテンツにアクセスできるようになるだけでなく、アクセシビリティ標準への準拠が法律で義務付けられている地域にドキュメントを提供するときの必要条件でもあります。AEM Forms では、フォーム開発者がアクセシビリティ標準に準拠できるよう支援します。

アダプティブフォームの作成時に、作成者は次の事項を考慮してアクセシブルなアダプティブフォームを作成する必要があります。

  • アクセシブルな名前と説明の検査 (ANDI) のアクセシビリティテストツールを使用したフォームの確認
  • フォームのコントロールに対する正しいラベルの提供
  • 画像の代替テキストの提供
  • 十分なカラーコントラストの提供
  • フォームのコントロールがキーボードでアクセスできることの確認

前提条件

アクセシブルなアダプティブフォームを作成するには、ANDI(Accessible Name and Description Inspector) ​などのアクセシビリティツールや、アクセシビリティ関連の問題を修正するために開発されたアダプティブフォームテーマ ​が必要です。

アクセシビリティテストツールのダウンロードとインストール

ANDI(Accessible Name and Description Inspector)ツールは、アクセシビリティコンプライアンスに関連する問題を web コンテンツで特定し、修正するのに役立ちます。これは、国土安全保障省の Trusted Tester v5 ガイドラインの推奨ツールです。これは、米国社会保障局が Web コンテンツの Section 508 への準拠を確認するために開発したものです。このツールは:

  • Web ページ上のアクセシビリティの問題を検出するのに役立ちます
  • アクセシビリティを改善するための提案を提供します
  • キーボードのアクセシビリティと色のコントラストの問題を検出します
  • 標準に準拠し、スクリーンリーダーのコンテンツを明確に識別します

ANDI はすべての主要なインターネットブラウザーで動作します。ツールの設定方法と使用方法について詳しくは、ANDI のドキュメントを参照してください。

Ultramarine-Accessible テーマをダウンロードしてインストールする

Ultramarine-Accessible テーマは、リファレンステーマです。これは、アダプティブフォームでカラーコントラストやその他のアクセシビリティ関連の問題を修正する方法を説明するのに役立ちます。アドビは、組織で承認されたスタイルに基づいて、実稼動環境用のカスタムテーマを作成することをお勧めします。次の手順を実行して、テーマを AEM インスタンスにアップロードします。

  1. テーマパッケージをダウンロードします。
  2. AEM インスタンスで Experience Managerナビゲーション ナビゲーション Forms に移動します。
  3. 作成ファイルのアップロード ​を選択します。Ultramarine-Accessible-Theme.zip ファイルを選択し、アップロードします。AEM インスタンスにテーマをアップロードします。

アダプティブフォームをアクセス可能にする

4 つの重要な側面(キーボードナビゲーション、カラーコントラスト、画像の意味のある代替テキスト、アダプティブフォームをアクセシブルにするためのフォームコントロールに適したラベル)に的を絞る必要があります。既存のアダプティブフォームにアクセシブルにするには、次の手順を実行します。

1. アクセシブルなテーマを適用し、追加の修正を実行

Ultramarine-Accessible テーマを既存のアダプティブフォームに適用します。テーマを適用するには:

  1. アダプティブフォームを編集用に開きます。
  2. コンポーネントを選択し、親アイコンを選択します。コンテキストメニューで、「アダプティブフォームコンテナ」を選択し、設定アイコンを選択します。
  3. プロパティブラウザーで Ultramarine-Accessible テーマを選択し、「保存」アイコンを選択します。
  4. ブラウザーウィンドウを更新します。テーマはアダプティブフォームに適用されます。

アクセシブルなテーマを適用した後、以下にリストされている追加の修正を実行します。これらの修正は、アクセシブルなテーマで扱われているアクセシビリティの修正に追加されます。

  1. アダプティブフォームのロゴ画像に意味のある代替テキストを追加します。

    アダプティブフォームテンプレートのヘッダーコンポーネントおよびフッターコンポーネントの画像に、意味のある代替テキストを指定します。テンプレートを修正し、それを使用してアダプティブフォームを作成する場合、そのアダプティブフォームは、テンプレートのヘッダーとフッターに適用されたアクセシビリティ関連のすべての修正を継承します。既存のアダプティブフォームの場合、アダプティブフォームレベルで変更を加えます。アダプティブフォームテンプレートに加えた変更は、既存のアダプティブフォームに自動的には反映されません。

  2. フォーム名を含んだ見出しコンポーネントをアダプティブフォームに追加します。フォームデザインで会社名を指定する場合は、会社名にも別の見出しコンポーネントを追加します。

    大半のアクセシビリティツールは、ユーザーがコンテンツの階層についてわかるようにして、Web ページの構造を理解できるようにします。アダプティブフォームで組織名とフォーム名のテキストに異なる見出しレベルを設定して、これらのテキストを階層構造にします。さらに、各パネルとセクションの前に適切な見出しレベルを持つテキストコンポーネントを使用して、階層を作成します。

    ヘッダースタイルの適用方法

  3. フッターの背景色を、アクセシビリティ標準に従って適切なコントラストを使用するように変更し、テキストの視認性と読みやすさを向上させます。ANDI を使用すれば、フォームの色のコントラストに問題があるかを見つけることができます。また、小さなフォントは使用しないでください。小さなフォントは読みにくいです。

  4. 既存のアダプティブフォームのスイッチおよび画像選択コンポーネントを選択(ラジオ)コンポーネントに置き換えます。

  5. 既存のアダプティブフォームの数値ステッパーコンポーネントを数値ボックスコンポーネントに置き換えます。

  6. 日付入力フィールドを日付選択フィールドに置き換えます。

  7. 日付選択コンポーネントの表示、検証、編集パターンを設定します。また、カスタム検証エラーメッセージも設定します。例えば、無効な日付が指定されているとします。日付の正しい形式は YYYY-MM-DD です。

  8. 日付選択コンポーネントのカスタムのアクセシビリティテキストを設定します。例えば、生年月日を入力します。スクリーンリーダーは、これらのカスタムアクセシビリティテキストを読み上げます。

  9. アダプティブフォームコンポーネントには、長い説明ではなく短い説明を使用します。長い説明には、ヘルプボタンが追加されます。アダプティブフォームにはヘルプボタンがないことを確認します。

  10. 表のすべての読み取り専用セルにカスタムアクセシビリティテキストを追加します。また、テーブルの読み取り専用セルをすべて無効にします。

  11. アダプティブフォームに手書き署名フィールドがある場合は、それを削除します。シームレスなデジタル署名エクスペリエンスのために、アダプティブフォームが Adobe Sign を使用するように設定します。

2. フォームのコントロールに対する正しいラベルの提供 provide-proper-labels-for-form-controls

コンポーネントのラベルまたはタイトルにより、フォームコンポーネントの内容が分かります。例えば、「名」というテキストを付ければ、テキストフィールドに名前を入力するようにユーザーに指示することができます。スクリーンリーダーからアクセス可能にするには、プログラムによってラベルをフォームコンポーネントに関連付けます。あるいは、フォームのコントロールを追加のアクセシビリティ情報で設定します。

スクリーンリーダーによって認識されるラベルは、視覚的キャプションと同じである必要はありません。場合によっては、コントロールの目的をさらに具体的に説明するものにすることもできます。フォームの各フィールドオブジェクトごとに、アクセシビリティオプションを使用して、スクリーンリーダーがその特定のフォームフィールドを識別するためのものを指定することができます。

「アクセシビリティ」オプションを使用するには、次の手順に従います。

  1. コンポーネントを選択して、 cmppr を選択します。
  2. サイドバーの「アクセシビリティ」をクリックして、必要なアクセシビリティオプションを選択します。

フォームコンポーネントのアクセシビリティオプション accessibility-options-in-form-components

フォームコンポーネントのアクセシビリティオプション

カスタムテキスト ​フォーム作成者は、アクセシビリティオプションカスタムテキストフィールドにコンテンツを入力します。スクリーンリーダーなどの支援機能は、このカスタムテキストを使用します。ほとんどの事例の場合、タイトル設定を使用することが最も適切です。カスタムのスクリーンリーダーテキストを作成するのは、タイトルや簡単な説明を使用できない場合のみにすることに留意してください。

簡単な説明 ほとんどのコンポーネントでは、ユーザーがコンポーネントの上にポインターを置くと、実行時に簡単な説明が表示されます。このオプションは、ヘルプコンテンツオプションの簡単な説明フィールドで設定できます。

タイトル このオプションを使用すると、AEM Forms はフォームフィールドに関連付けられている表示ラベルをスクリーンリーダーのテキストとして使用できます。

名前 バインディングタブの名前フィールドに値を指定できます。名前には空白を含めることはできません。

なし 「なし」を選択すると、フォームオブジェクトは発行されたフォームに名前が表示されなくなります。フォームのコントロールに対して「なし」を設定することは推奨しません。

NOTE
  • ラジオボタンとチェックボックスは、アクセシビリティのために 2 つだけのオプション(カスタムテキストとタイトル)を持つことができます。
  • XFA ベースのアダプティブフォームの場合、アクセシビリティオプションは、XDP に設定されているアクセシビリティオプションから継承されます。XDP のツールヒントは簡単な説明にマッピングされ、キャプションはタイトルにマッピングされます。その他のオプションはそのまま機能します。

3. 画像の代替テキストの提供 provide-text-equivalents-for-images

画像を使用すると、一部のユーザーに対して理解度を向上することに役立ちます。ただし、スクリーンリーダーを使用するユーザーに対しては、画像の使用はフォームのアクセシビリティを低下させます。画像を使用する場合は、すべての画像に対して代替テキストを提供してください。

このテキストは、フォーム内のオブジェクトとその目的を説明する内容にします。スクリーンリーダーが画像を検出すると、この代替テキストを読み上げます。画像には常に代替テキストを指定する必要があります。

画像コンポーネントを選択して、 cmppr を選択します。サイドバーのプロパティで、画像の代替テキストを指定します。

画像の代替テキスト

4. 十分なカラーコントラストの提供 provide-sufficient-color-contrast

アクセシビリティデザインでは、カラーの使用に対する特別なガイドラインを考慮する必要があります。フォーム作成者は、カラーを使用して様々なフォームのコンポーネントを強調表示することで、フォームの外観を改善できます。ただし、カラーの使い方が不適切だと、障害を持つ人たちにとってフォームが読みにくくなったり、読めなくなってしまうことがあります。

視覚障害を持つユーザーがデジタルコンテンツを読む際には、テキストと背景の間に強いコントラストが必要です。十分なコントラストがないと、一部のユーザーにとってフォームを読むことが不可能ではないにしても困難になる場合があります。

デフォルトのフォントと背景(白の背景に黒のコンテンツ)を使用することが推奨されます。デフォルトカラーを変更する場合は、明るい背景に暗い前景、またはその逆を選択してください。

アダプティブフォームのカラーコントラストとテーマを変更することについて詳しくは、アダプティブフォームのカスタムテーマの作成を参照してください。

5. フォームのコントロールがキーボードでアクセスできることの確認 ensure-that-form-controls-are-keyboard-accessible

アクセシブルフォームは、キーボードまたは同等の入力デバイスのみを使用してすべて記入できるものです。四肢や視覚に障害を持つユーザーはキーボードのみで入力を行わなければならない場合があります。また、マウスを使用できるユーザーでもキーボード入力を好む人が多くいます。入力の方法を複数用意することで、アクセシブルなフォームが作成できるだけではなく、すべてのユーザーの要望に応えられるフォームが作成できます。

AEM Forms では次のキーボードショートカットが使用できます。

動作
キーボードショートカット
次のフォームへカーソルを移動させる
タブ
前のフォームへカーソルを移動させる
Shift + Tab
次のパネルに移動する
Alt + 右矢印キー
前のパネルに移動する
Alt + 左矢印キー
フォーム内の入力済みデータをリセットする
Alt + R
フォームを送信する
Alt + S

さらに、アダプティブフォームの​ 日付選択 ​コンポーネントで使用できる様々なキーボードショートカットキーがあります。ショートカットキーを有効にするには、日付選択 ​コンポーネントを選択し、「 設定 」を選択してプロパティを開きます。「パターン」セクションで、「タイプ」および「パターン」ドロップダウンリストを使用して、表示パターンを選択します。プロパティを保存して、日付選択 ​コンポーネントのショートカットキーを使用できるようにします。

アダプティブフォームの日付選択コンポーネントでは、次のキーボードショートカットキーを使用できます。

動作
キーボードショートカット
  • タブフォーカスでカレンダーアイコンがハイライト表示されたら、日付選択コンポーネントのオプションを表示します
  • タブフォーカスでオプションがハイライト表示されたら、クリックイベントを実行します
スペースまたは入力
日付選択コンポーネントのオプションを非表示にします
Esc
  • 日付選択コンポーネントで使用可能なオプションを介してカーソルを前方に移動します。
  • 日付入力フィールドがアクティブなときに、タブのフォーカスをカレンダーアイコンに設定します
タブ
日付選択コンポーネントで使用可能なオプションを介してカーソルを後方に移動します
Shift + Tab
  • タブフォーカスが日付入力フィールドをハイライト表示するときに、日付選択コンポーネントオプションを表示します
  • 日付選択コンポーネントで使用可能なカレンダー内でカーソルを下に移動します
下向き矢印
日付選択コンポーネントで使用可能なカレンダーでカーソルを上に移動します
上向き矢印
日付選択コンポーネントで使用可能なカレンダー内でカーソルを後ろに移動します
左向き矢印
日付選択コンポーネントで使用可能なカレンダー内でカーソルを前に移動します
右向き矢印
カレンダーの右向きと左向きのナビゲーション矢印の間にあるキャプションに対してアクションを実行します。
Shift + 上向き矢印
カレンダーで使用可能な右向きのナビゲーション矢印アイコン「 右向き矢印 」のアクションを実行します
Shift + 左向き矢印
カレンダーで使用可能な左向きナビゲーション矢印アイコン 左向き矢印 のアクションを実行します
Shift + 右向き矢印

アクセシビリティツールを使用して、残りのアクセシビリティの問題を見つけます

ANDI(Accessible Name and Description Inspector)は、アクセシビリティコンプライアンスに関連する問題をアダプティブフォームで特定し、修正するのに役立ちます。ANDI ツールを使用してアダプティブフォームでアクセシビリティの問題を見つけるには:

  1. アダプティブフォームをプレビューモードで開きます。
  2. ブックマークした ANDI ツールアイコンをクリックします。ANDI ツールがアダプティブフォームを分析し、アクセシビリティの問題を表示します。このツールの使い方について詳しくは、 ANDI のドキュメント を参照してください。
  3. ANDI が報告した問題を確認して、修正します。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2