ADA に配慮したサインアップフォームの作成方法

このページで学べること

WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）のコンプライアンスに関する最も一般的な問題の一部を回避するために、サインアップフォームエディタのアラートパネルでアクセシビリティアシスタント機能を使用する方法を確認します。ウェブサイトをADAに準拠させようとしている企業は、WCAG標準を参照し、それに従う必要があります。アクセシビリティアシスタントは、すべてのサイト訪問者が利用できるサインアップフォームの作成をガイドします。

始める前に

以下は、アクセシビリティアシスタントがチェックする問題の一覧です。以下に記載されているエラータイプは、フォームビルダー内の特定の入力フィールド名ではなく、Klaviyoのアクセシビリティアシスタントが識別する際の名称である点にご注意ください。エラーが検出されると、説明と修正を促すメッセージを含むアラートがアラートパネルに表示されます。

ADA対応のサインアップフォームを作成する

最初のサインアップフォームを作成する場合でも、フォームを更新する場合でも、アクセシビリティ アシスタントを使用すると、アクセシビリティの問題を特定して修正できます。

上記のWCAG標準に準拠したフォームを作成するには：

1. 新しいサインアップフォームを作成するか、既存のサインアップフォームのいずれかのフォームエディタを開きます。
2. エディターを使用して コンテンツ ブロックを追加し、フォームのスタイルを設定してブランドに合わせます。
   

1. 識別されたアクセシビリティの問題を確認するには、エディターの右上にあるアラートをクリックしてください。
   
   アクティブなアラートの下には、アクセシビリティアシスタントがフォーム内で特定したWCAG標準を満たしていない要素を説明するさまざまなカードに加えて、特定されたその他のコンテンツやデザインの問題も表示されます。各カードには、問題の説明と、修正または却下するためのプロンプトが含まれます。たとえば、サインアップフォーム内の画像にaltテキストがない場合、アクセシビリティアシスタントから、その画像にaltテキストを追加するようアラートが表示されます。altテキストは画像の説明を提供するため、スクリーンリーダーでサイトを閲覧している買い物客もデジタルコンテンツにアクセスできます。
   
   

2. 入力フィールドがあるアラートの場合は、カードに不足している情報または修正した情報を入力し、次に修正をクリックしてください。

1. アクセシビリティに関する提案を1つ以上無視する場合は、閉じるをクリックしてください。確認モーダルで、確定するには閉じるをクリックし、アラートを有効のままにするにはキャンセルをクリックしてください。
   
   特定されたすべての問題を正常に修正または閉じると、アラートパネルに「アクティブなアラートはありません」というメッセージが表示されます。
   

1. 公開またはスケジュールをクリックし、今すぐ公開オプションを選択してから、今すぐ公開をクリックして、アクセシビリティの更新を反映します。

JAWSでフォームをテストする

JAWSはMicrosoft Windows用のスクリーンリーダーです。公開済みのサインアップフォームをJAWSでテストして、訪問者が読み取り、使用できることを確認してください。

JAWSがフォームのテキスト、画像の説明、フィールドラベルを読み上げることを確認してください。キーボードを使用してフィールド内を移動し、テスト用の連絡先情報でフォームを送信し、閉じるボタンがある場合はフォームを閉じてください。

次の手順

すべての Klaviyo サインアップフォームで WCAG 標準を維持することが重要です。以前に公開されたサインアップフォームには、修正すべきアクセシビリティの問題が残っている場合がありますが、Klaviyo は WCAG 非準拠の問題を自動的に修正しない点にご注意ください。

既存の各フォームのエディター内にあるアラートパネルに移動し、アクセシビリティの問題を解決して、ウェブサイトのWCAGコンプライアンスに対応できるようにしてください。

その他のリソース