メールとフォームのアクセシビリティのベストプラクティス リファレンス

このページで学べること

メールとサインアップフォームをよりアクセシブルにする方法をご覧ください。メールとサインアップフォームをデザインする際は、すべての受信者が利用できるアクセシブルなデザインになっていることを確認してください。

メールのアクセシビリティ

件名とプレビューテキストを最適化

件名とプレビューテキストは、内容が伝わるように魅力的で短くしてください。

一般的なメールデザインのベストプラクティスに従ってください。

一般的なメールデザインのベストプラクティスに従うことで、メールのアクセシビリティが向上します：

• すべての画像に代替テキストを追加してください。
• 画像のみのメールは避けてください。
• 重要な詳細を伝えるために画像を使用しないでください。
• 白と黒、グレーと濃い青、ピンクと濃い赤など、はっきりと対照的な色を使用してください。
• ヘッダーを使用してアイデアを区別します。
• 説明的なリンクを使用します（例："コレクションを購入"。"ここをクリックしてコレクションに移動" ではなく）。
• メールを論理的に構成してください。

以下は、すべての受信者向けに最適化されたメール（左）と、最適化されていないメール（右）の例です。

サインアップフォームのアクセシビリティ

Klaviyo は、サインアップフォームを自動的にアクセシビリティに最適化します。ウェブサイトに公開された Klaviyo フォームでは、サイト訪問者がキーボードとスクリーンリーダーのみでフォーム内をすべて操作できます。また、サイト訪問者は Escape キーでフォームを閉じ、Enter キーで送信できます。フォームエディター内の Styles タブにある Focus Outline Color を追加すると、フォーム内をタブで移動する際にどのフィールドがハイライトされているかをユーザーが把握しやすくなります。

サインアップフォームのデザイン

メールのデザインと同様に、フォームを通じて共有したい情報がすべての受信者に確実に届くよう、いくつかの基本的なガイドラインに従う必要があります。フォームをデザインする際：

• 対照的な色を使用します。
• 重要な情報を画像に含めることは避けてください
• リンクには説明的な文言を使用する
• フォームは論理的な構成で作成してください。

サインアップフォームを作成している間、Klaviyo は多数のアクセシビリティの問題を監視し、フォームアラート タブで、特定された問題を修正するよう促します。

以下は、適切に設計されたフォーム（右）と、すべてのユーザーが利用できるようになっていないフォーム（左）の例です。

その他のリソース