アクセシブルなアダプティブフォームの作成

概要

アクセシブルなフォームとは、特別な手助けを必要とするユーザーを含むすべてのユーザーが使用できるフォームを意味します。Adobe Experience Manager (AEM) は、障害を持つ様々なユーザーに対するアダプティブフォームの可用性を向上するためのさまざまな特長や機能を備えています。このソリューションは、フォーム作成者がアクセスしやすいアダプティブフォームを作成する上でも役立ちます。

アクセシビリティをアダプティブフォームに組み入れることは、可能な限り多くの人がコンテンツにアクセスできるようになるだけでなく、アクセシビリティ標準への準拠が法律で義務付けられている地域にドキュメントを供給するときの必要条件でもあります。AEM Forms では、フォーム開発者がアクセシビリティ標準に準拠できるよう支援します。

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

  • フォームのコントロールに対する正しいラベルの提供
  • 画像の代替テキストの提供
  • 十分なカラーコントラストの提供
  • フォームのコントロールがキーボードでアクセスできることの確認

フォームのコントロールに対する正しいラベルの提供

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

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

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

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

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

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

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

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

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

​名前「連結」タブの「名前」フィールドに値を指定できます。名前には空白を含めることはできません。

​なし(None)「なし」を選択すると、フォームオブジェクトは発行されたフォームに名前を持ちません。フォームのコントロールに対しては、「なし」を設定することはお勧めしません。

メモ

ラジオボタンとチェックボックスは、アクセシビリティのために 2 つだけのオプション(カスタムテキストとタイトル)を持つことができます。

メモ

FXA ベースのアダプティブフォームの場合、アクセシビリティオプションは、XDP に設定されているアクセシビリティオプションから継承されます。XDP のツールヒントは簡単な説明にマッピングされ、キャプションはタイトルにマッピングされます。その他のオプションはそのまま機能します。

画像の代替テキストの提供

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

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

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

画像の代替テキスト

十分なカラーコントラストの提供

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

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

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

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

フォームのコントロールがキーボードでアクセスできることの確認

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

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

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now