アクセシブルなアダプティブフォームの作成
はじめに
アクセシブルなフォームとは、特別な支援を必要とするユーザーを含むすべてのユーザーが使用できるフォームを意味します。アダプティブフォームには、ユーザーの様々な能力に合った、使いやすさを向上させる多くの機能が含まれています。アクセシビリティをアダプティブフォームに組み入れることは、可能な限り多くの人がコンテンツにアクセスできるようになるだけでなく、アクセシビリティ標準への準拠が法律で義務付けられている地域にドキュメントを提供するときの必要条件でもあります。AEM Forms は、フォーム開発者がアクセシビリティ標準に準拠できるよう考慮されています。
アダプティブフォームの作成時に、作成者は次の事項を考慮してアクセシブルなアダプティブフォームを作成する必要があります。
- アクセシブルな名前と説明の検査 (ANDI) のアクセシビリティテストツールを使用したフォームの確認
- フォームのコントロールに対する正しいラベルの提供
- 画像の代替テキストの提供
- 十分なカラーコントラストの提供
- フォームのコントロールがキーボードでアクセスできることの確認
前提条件
アクセシブルなアダプティブフォームを作成するには、アクセシブルな名前と説明の検査 (ANDI) や アクセシビリティ関連の問題を修正するために開発されたアダプティブフォームテーマ などのアクセシビリティツールが必要です。
アクセシビリティテストツールのダウンロードとインストール
アクセシブルな名前と説明の検査 (ANDI) ツールは、Web コンテンツ内のアクセシビリティコンプライアンスに関連する問題を特定して修正でするのに役立ちます。これは、国土安全保障省の Trusted Tester v5 ガイドラインの推奨ツールです。これは、米国社会保障局が Web コンテンツの Section 508 への準拠を確認するために開発したものです。このツールは：
- Web ページ上のアクセシビリティの問題を検出するのに役立ちます
- アクセシビリティを改善するための提案を提供します
- キーボードのアクセシビリティと色のコントラストの問題を検出します
- 標準に準拠し、スクリーンリーダーのコンテンツを明確に識別します
ANDI はすべての主要なインターネットブラウザーで動作します。ツールを設定して使用するための詳細な手順については、 ANDI のドキュメント を参照してください。
Ultramarine-Accessible テーマをダウンロードしてインストールする
Ultramarine-Accessible テーマは、リファレンステーマです。これは、アダプティブフォームで色のコントラストやその他のアクセシビリティ関連の問題を修正する方法を示すのに役立ちます。アドビは、組織で承認されたスタイルに基づいて、実稼動環境用のカスタムテーマを作成することをお勧めします。次の手順を実行して、テーマを AEM インスタンスにアップロードします。
- テーマパッケージをダウンロードします。
- AEM インスタンスで Experience Manager／ナビゲーション
- 作成／ファイルのアップロード を選択します。Ultramarine-Accessible-Theme.zip ファイルを選択し、アップロードします。AEM インスタンスにテーマをアップロードします。
アダプティブフォームのアクセシビリティ対応
次の 4 つの重要な側面に焦点を当てる必要があります。キーボードナビゲーション、色のコントラスト、画像の意味のある代替テキスト、アダプティブフォームをアクセシブルにするためのフォームコントロールの適切なラベル。既存のアダプティブフォームをアクセシブルにするには、次の手順を実行します。
1. アクセシブルなテーマを適用し、追加の修正を実行
Ultramarine-Accessible テーマを既存のアダプティブフォームに適用します。テーマを適用するには：
- アダプティブフォームを編集用に開きます。
- コンポーネントを選択し、親アイコンを選択します。コンテキストメニューで、「アダプティブフォームコンテナ」を選択し、設定アイコンを選択します。
- プロパティブラウザーで Ultramarine-Accessible テーマを選択し、「保存」アイコンを選択します。
- ブラウザーウィンドウを更新します。テーマがアダプティブフォームに適用されます。
アクセシブルなテーマを適用した後、以下にリストされている追加の修正を実行します。これらの修正は、アクセシブルなテーマで扱われているアクセシビリティの修正に追加されます。
-
アダプティブフォームのロゴ画像に意味のある代替テキストを追加します。
アダプティブフォームテンプレートのヘッダーコンポーネントおよびフッターコンポーネントの画像に意味のある代替テキストを提供します。テンプレートを修正し、それを使用してアダプティブフォームを作成すると、アダプティブフォームは、テンプレートのヘッダーとフッターに適用されるすべてのアクセシビリティ関連の修正を継承します。既存のアダプティブフォームの場合、アダプティブフォーム上で変更を加えます。アダプティブフォームテンプレートに加えた変更は、既存のアダプティブフォームに自動的に反映されません。
-
フォーム名を含む見出しコンポーネントをアダプティブフォームに追加します。フォームデザインで会社名を指定する場合は、会社名にも別の見出しコンポーネントを追加します。
大半のアクセシビリティツールは、ユーザーがコンテンツの階層についてわかるようにして、Web ページの構造を理解できるようにします。アダプティブフォームで組織名とフォーム名のテキストに異なる見出しレベルを設定し、これらのテキストに階層構造を提供します。さらに、各パネルとセクションの前に適切な見出しレベルを持つテキストコンポーネントを使用して、階層を作成します。
-
フッターの背景色を、アクセシビリティ標準に従って適切なコントラストを使用するように変更し、テキストの視認性と読みやすさを向上させます。ANDI を使用すれば、フォームの色のコントラストに問題があるかを見つけることができます。また、小さなフォントは使用しないでください。小さなフォントは読みにくいです。
-
既存のアダプティブフォームのスイッチおよび画像選択コンポーネントを選択（ラジオ）コンポーネントに置き換えます。
-
既存のアダプティブフォームの数値ステッパーコンポーネントを数値ボックスコンポーネントに置き換えます。
-
日付入力フィールドを日付選択フィールドに置き換えます。
-
日付選択コンポーネントの表示、検証、編集パターンを設定します。また、カスタム検証エラーメッセージも設定します。例えば、無効な日付が指定されているとします。日付の正しい形式は YYYY-MM-DD です。
-
日付選択コンポーネントのカスタムのアクセシビリティテキストを設定します。例えば、生年月日を入力します。スクリーンリーダーは、これらのカスタムアクセシビリティテキストを読み上げます。
-
アダプティブフォームコンポーネントには、長い説明ではなく短い説明を使用します。長い説明を入力すると、ヘルプボタンが追加されます。アダプティブフォームにはヘルプボタンがないことを確認します。
-
表のすべての読み取り専用セルにカスタムアクセシビリティテキストを追加します。また、テーブルの読み取り専用セルをすべて無効にします。
-
手書き署名フィールドがアダプティブフォームに存在する場合は削除します。シームレスなデジタル署名を行うために、Adobe Signを使用するようにアダプティブフォームを設定します。
2. フォームのコントロール用に正しいラベルを提供する
コンポーネントのラベルまたはタイトルにより、フォームコンポーネントの内容が分かります。例えば、「名」というテキストを付ければ、テキストフィールドに名前を入力するようにユーザーに指示することができます。スクリーンリーダーからアクセス可能にするには、プログラムによってラベルをフォームコンポーネントに関連付けます。あるいは、フォームのコントロールを追加のアクセシビリティ情報で設定します。
スクリーンリーダーによって認識されるラベルは、表示キャプションと必ずしも同じである必要はありません。場合によっては、コントロールの目的をさらに具体的に説明するものにすることもできます。フォームの各フィールドオブジェクトごとに、アクセシビリティオプションを使用して、スクリーンリーダーがその特定のフォームフィールドを識別するためのものを指定することができます。
「アクセシビリティ」オプションを使用するには、次の手順に従います。
- コンポーネントを選択して、
- サイドバーの「アクセシビリティ」をクリックして、必要なアクセシビリティオプションを選択します。
フォームコンポーネントのアクセシビリティオプション
カスタムテキスト フォーム作成者は、アクセシビリティオプションカスタムテキストフィールドにコンテンツを入力します。スクリーンリーダーなどの支援機能は、このカスタムテキストを使用します。ほとんどの事例の場合、タイトル設定を使用することが最も適切です。カスタムのスクリーンリーダーテキストを作成するのは、タイトルや簡単な説明を使用できない場合のみにすることに留意してください。
簡単な説明 ほとんどのコンポーネントでは、ユーザーがコンポーネントの上にポインターを置くと、実行時に簡単な説明が表示されます。このオプションは、ヘルプコンテンツオプションの簡単な説明フィールドで設定できます。
タイトル このオプションを使用すると、AEM Forms はフォームフィールドに関連付けられている表示ラベルをスクリーンリーダーのテキストとして使用できます。
名前 バインディングタブの名前フィールドに値を指定できます。名前には空白を含めることはできません。
なし 「なし」を選択すると、フォームオブジェクトは発行されたフォームに名前が表示されなくなります。フォームのコントロールに対して「なし」を設定することは推奨しません。
NOTE- ラジオボタンとチェックボックスには、アクセシビリティのために 2 つだけオプション（カスタムテキストとタイトル）を設定することができます。
- XFA ベースのアダプティブフォームの場合、アクセシビリティオプションは、XDP に設定されているアクセシビリティオプションから継承されます。XDP のツールヒントは簡単な説明にマッピングされ、キャプションはタイトルにマッピングされます。その他のオプションはそのまま機能します。
