ページエディタでのアクセシビリティのベストプラクティス

ClickFunnels では、 Headline 要素 は、ページの主要な見出しを表す HTML <h1> タグに対応します。Web 標準によれば、 <h1> タグはページの主要なトピックまたは目的を定義することを目的としており、通常はページごとに 1 回のみ使用する必要があります。これにより、検索エンジンと支援技術がページ構造をより深く理解し、アクセシビリティと SEO が向上します。

ClickFunnels の見出し要素を最大限に活用するには:

• ページごとに 1 つの見出し要素を使用する: タイトルやメインの行動喚起など、ページ上で最も重要または包括的なメッセージ用に見出し要素を予約します。

• 追加の構造のための小見出し: コンテンツをサポートするために 小見出し要素 または 段落要素 を使用して、明確で論理的な階層を維持します。

• なぜそれが重要なのか: 複数の <h1> タグを使用すると、スクリーンリーダーと検索エンジンが混乱し、ユーザーがコンテンツをナビゲートして理解することが難しくなる可能性があります。適切に配置された単一の見出し要素により、明確さと一貫性が保証されます。

詳細はこちら: Headline: Adding and Styling Headlines.
参考: MDN Web Docs

フォントのアクセシビリティにより、視覚障害や認知障害のあるユーザーを含むすべてのユーザーにとってテキストが読みやすくなります。ClickFunnels では、 見出し、 小見出し、 段落要素のフォントをカスタマイズできるため、アクセスしやすく視覚的に魅力的なテキストを簡単に作成できます。

1. 明確で読みやすいフォントを使用します。

   • 装飾フォントやスクリプト フォントに比べて読みやすいため、Arial、Roboto、Open Sans などのシンプルなサンセリフ フォントを使用してください。

   • 大量のテキストや重要な情報には、過度に装飾的なフォントの使用は避けてください。

2. 読み取り可能なサイズを維持する:

   • テキストがすべてのデバイスで快適に読める十分な大きさであることを確認してください。本文には 少なくとも 16 ピクセル のフォント サイズを推奨し、見出しには大きなサイズを推奨します。

   • ClickFunnels エディターを使用して、各要素の タイポグラフィ設定 内のテキスト サイズを調整します。

3. フォントスタイルを制限する:

   • イタリック体、太字、またはすべて大文字を過度に使用すると、読みやすさが低下する可能性があるため、避けてください。

   • これらのスタイルは控えめに使用して、セクション全体ではなく重要なポイントを強調します。

4. 十分なコントラストを確保します。

   • テキストは、その背景に対して強いコントラストを持っている必要があります。ClickFunnels のカラー ピッカーを使用して、WCAG 標準 (本文テキストのコントラスト比が 少なくとも 4.5:1 ) を満たすアクセス可能な色の組み合わせを選択します。

5. デバイス間でのプレビュー:

   • ClickFunnels のレスポンシブ プレビュー モードを使用して、デスクトップ、タブレット、モバイル デバイスでフォントが鮮明で一貫性のあるものに見えるようにします。

参考: WebAIM

代替テキスト (代替テキスト) は、画像の目的または内容を記述し、スクリーン リーダーに依存している視覚障害のあるユーザーがアクセスできるようにします。また、検索エンジンが画像のコンテキストを理解し、SEO を改善するのにも役立ちます。ClickFunnels で代替テキストを効果的に使用するには、次のガイドラインに従ってください。

• 簡潔にする: 画像を 125 文字以内に記述し、明確で理解しやすいようにします。

  • 例: 「靴の画像」ではなく、「赤いランニングシューズと白い靴ひもを販売中」を使用します。

• 目的に焦点を当てる: ページ上での画像の役割を説明する代替テキストを書きます。たとえば、画像が製品を強調している場合は、その主な機能を説明します。

• アイコンと背景画像: ClickFunnels では、 アイコン や 背景画像 は通常装飾的であるため、代替テキスト オプションを提供していません。アイコンには、その目的をすでに伝えているテキストが添えられていることが多く、背景画像は美的デザインに使用されます。これらの要素は重要な情報を提供しないため、代替テキストなしで残しておくと、スクリーン リーダーは意味のあるコンテンツのみに集中できます。

詳細: Image: Adding and Managing Images.
審判: MDN Web Docs

明確で説明的なリンク テキストにより、すべてのユーザーのアクセシビリティと使いやすさが向上します。

• 一般的なラベルを避ける: 「ここをクリック」などの曖昧なテキストを、「無料ガイドをダウンロード」や「価格オプションを表示」などの説明的なフレーズに置き換えます。

• ClickFunnels で編集する方法: ボタン要素 または リンク設定 を使用して、意味のある具体的なリンク テキストを作成します。
  

参考: WebAIM

適切な色のコントラストにより、色覚異常などの視覚障害を持つユーザーにとって読みやすさが確保されます。

• WCAG 標準: 通常のテキストの場合は 少なくとも 4.5:1 、大きなテキストの場合は 3:1 のコントラスト比 (18pt または 14pt 太字) を目指します。

• ClickFunnels で調整する方法: エディターのカラー ピッカーを使用して、テキスト、ボタン、背景のアクセス可能な色の組み合わせを選択します。

• 色をテストする: WebAIM Contrast Checker などのツールを使用して、デザインがコントラスト要件を満たしていることを確認します。

参照: MDN Web Docs

モーションとアニメーションは、ClickFunnels ページのインタラクティブ性と魅力を高めることができますが、過剰または実装が不十分な効果は、動きに敏感なユーザーに悪影響を与える可能性があります。ページを完全にアクセシブルにするには、これらの要素を慎重に使用し、ベスト プラクティスに従うことが重要です。

視差効果

視差効果は、ユーザーがスクロールするときに背景要素が前景要素とは異なる速度で移動すると発生します。この効果は視覚的に魅力的ですが、前庭障害のあるユーザーを混乱させる可能性があります。

ClickFunnels での視差のベスト プラクティス:

• 使用を最小限に抑える: 視差効果をページごとに 1 つに制限して、視覚的な気を散らすものを減らします。

• テキストの近くを避ける: 視差の背景は、コンテンツが読みにくくなる可能性があるため、テキストの後ろや近くに表示しないでください。

• 代替効果を検討する: 背景画像の場合は、アクセシビリティを維持するために視差の代わりに静止画像を使用します。

ClickFunnels で視差効果を無効にするには、セクションまたは行の設定内の 背景画像設定 を調整し、画像スタイルを「なし」または別のスタイルに設定します。

アニメーション

ClickFunnels では、 セクション、 行、 要素 にアニメーションを適用して、フェード、スライディング、ズームなどの動的な効果を追加できます。これらのアニメーションはページのインタラクティブ性を高めることができますが、過度の動きは動きの感受性や認知障害のあるユーザーの混乱を引き起こす可能性があります。

アニメーションのベストプラクティス

1. 微妙な効果を使用する: 劇的な動きではなく、穏やかなフェードまたはスムーズなトランジションを選択します。

2. アニメーションを制限する: 見出しや行動喚起ボタンなどの重要な要素を強調することに重点を置き、使いすぎを避けます。

3. 短くする: スムーズな流れを維持するために、アニメーションを 1-2 秒 以内に完了するように設定します。

4. 繰り返しを避ける: ループするアニメーションや永続的なモーション効果は控えてください。

5. アクセシビリティのテスト: ページをプレビューして、アニメーションが不快感を引き起こすことなく使いやすさを向上させていることを確認します。

詳細: Advanced Settings - Customize Animation.
参照: MDN Web Docs

ARIA ラベルは、スクリーン リーダー、特にあいまいなテキストや説明のないテキストを含むボタンに追加のコンテキストを提供することで、アクセシビリティを向上させます。ClickFunnels では、 ARIA ラベルをButton要素に追加して、その目的を明確にすることができます。

ARIAラベルを使用する理由

• スクリーンリーダーが「フォームを送信」や「ガイドのダウンロード」などのボタンの機能を理解できるように支援します。

• 支援技術に依存しているユーザーの明確さを高め、ページを効果的にナビゲートして操作できるようにします。

ClickFunnels に ARIA ラベルを追加する方法

• エディターで [ボタン要素 ] を選択します。

• [ボタン] 要素設定の下にある [ARIA-Label] フィールドを見つけます。
  

• ボタンの機能について、簡潔でわかりやすい説明を入力します。ボタンの機能について、簡潔でわかりやすい説明を入力します。たとえば、ボタンのテキストが 「今すぐダウンロード!」の場合、ARIA ラベルを 「無料のワークアウト ガイドをダウンロード」 または 「電子書籍を PDF 形式でダウンロード」 に設定して、スクリーン リーダーのわかりやすさをさらに高めることができます。

詳細 : ボタン: ユーザーにアクションの送信を許可します。
参考: MDN Web Docs

ビデオやオーディオなどのマルチメディア コンテンツは視聴者を効果的に引き付けることができますが、視覚、聴覚、または動きに敏感なユーザーにとってアクセシビリティを確保することが重要です。ClickFunnels では、 ビデオ要素 と オーディオ要素 は、アクセス可能な方法でコンテンツを埋め込んで表示するためのオプションを提供します。

ビデオアクセシビリティのベストプラクティス

1. キャプションを追加する:

   • YouTube や Vimeo などのプラットフォームでホストされているビデオにはクローズド キャプションを使用します。キャプションは、聴覚障害のあるユーザーが音声コンテンツを理解するのに役立ちます。

   • キャプションを ClickFunnels に埋め込む前に、YouTube または Vimeo のビデオ設定で直接キャプションを有効にします。

2. 背景ビデオを制限する:

   • Web コンテンツ アクセシビリティ ガイドライン (WCAG) は、過度の動きを引き起こすコンテンツが前庭障害のあるユーザーに悪影響を与える可能性があることを強調しています。具体的には、WCAG 2.1 成功基準 2.3.3 では、発作や物理的反応を誘発する可能性のある設計要素に対してアドバイスしています。WCAGでは、ページあたりの背景動画の数に制限は指定されていませんが、1ページあたり1つまたは2つ以上の背景動画を使用することは避けた方がよいでしょう。過度の動きは、動きに敏感なユーザーを圧倒する可能性があります。

3. コンテンツのフラッシュを避ける:

   • 光線過敏症のユーザーに発作を引き起こす可能性があるため、ビデオに 1 秒あたり 3 回以上点滅するコンテンツが含まれていないことを確認してください。

4. アクセシビリティに配慮したデザインを検討してください。

   • 背景ビデオがデザインにとって重要な場合は、代わりに再生、一時停止、音量のコントロールを含む ビデオ要素 を追加して、アクセスしやすくします。

オーディオアクセシビリティのベストプラクティス

1. トランスクリプトを提供する:

   • ポッドキャストやナレーションなどのオーディオ コンテンツにテキスト トランスクリプトを含めて、聴覚障害のあるユーザーがアクセスできるようにします。

   • トランスクリプトは、同じページに別の テキスト要素 として追加したり、専用ページにリンクして整理しやすくしたりできます。

2. 自動再生を避ける:

   • オーディオ要素の自動再生を無効にして、ユーザーを驚かせたり、支援技術を中断したりしないようにします。ユーザーが手動で再生を制御できるようにします。

3. クリアコントロール:

   • 再生コントロールが見やすく、使いやすいことを確認してください。ClickFunnels では、オーディオ要素は、ユーザーが一時停止、再生、または音量を調整するための直感的なコントロールを提供します。

詳細情報: Video: Add Video to Your Page。
詳細はこちら: Audio: Add Audio to Your Page。
参考: MDN Web Docs