Skip to main content
Loading...
Skip to article
  • Qualtrics Platform
    Qualtrics Platform
  • Customer Journey Optimizer
    Customer Journey Optimizer
  • XM Discover
    XM Discover
  • Qualtrics Social Connect
    Qualtrics Social Connect

ウェブサイト/アプリのインサイトとアクセシビリティ


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


Web サイト/App Insights のアクセシビリティ機能

Web サイト/アプリインサイトプロジェクトには、アクセシビリティを容易にするための多くの機能が組み込まれています。以下に、プラットフォーム全体で見つけることができるアクセシビリティ機能の一部を示します。

  • すべてのクリエイティブ要素は、キーボードでタブ操作およびクリックが可能です。TABESCおよび Enter (Mac ユーザの場合、戻る) はサポートされていますが、矢印キーなどはサポートされていません。
  • [ポップオーバー]と[レスポンシブ]ダイアログのクリエイティブは、閉じるまでクリエイティブの外側に移動できません。さらに、基礎となるページへのタブ移動も許可されません。
  • ポップオーバーおよびレスポンシブダイアログのクリエイティブでは、フォーカスは一度表示されるとクリエイティブに直接適用されます。
  • 埋め込みターゲットが使用されている場合、ユーザは埋め込みターゲットを右クリックしてiFrame タイトルを追加できます。
  • 埋め込みウィンドウが[インターセプト]詳細オプションで使用されている場合、ユーザーはiFrame タイトルを追加できます。

次に、各クリエイティブのデザインのニーズに固有のアクセシビリティ機能について説明します。

レスポンシブダイアログクリエイティブ

  • 代替テキストの定義が容易: ダイアログ内でカスタムアイコンを使用する場合は、Alt Text を指定して、アイコンにフォーカスが置かれているときにスクリーンリーダが読み上げるテキストを指定することができます。
    ヒント:アイコンを含めてインターセプトを消去する場合、クリエイティブの右上に表示される[X]ボタンの代替テキストは「閉じる」です。この代替テキストもローカライズされています。
  • ボタンコントロールの ARIA ラベル: デフォルトでは、スクリーンリーダはボタンラベルに指定したテキストを読み込みます。ただし、「このボタンをクリックして新しいアンケートウィンドウを開く」など、スクリーンリーダーで追加のコンテキストを読みたい場合があります。この場合、ボタンコントロールの ARIA ラベルを指定することができます。
  • クリエイティブ自体内の要素の色の対比:Qualtricsでは直接的なコントラストガイダンスを提供できませんが、ユーザーはフルコントロールでクリエイティブ要素に適した色を選択できます。

[フィードバック]ボタンクリエイティブ

ポップオーバー、スライダー、インフォバー、カスタム埋め込みフィードバッククリエイティブ

  • クリエイティブ自体内の要素の色の対比:Qualtricsでは直接的なコントラストガイダンスを提供できませんが、ユーザーはフルコントロールでクリエイティブ要素に適した色を選択できます。
ヒント:選択したボタン名と役割は異なる場合があるため、これらのクリエイティブのターゲットボタンにアクセスするには、追加の編集が必要です。詳細については、サポートページのリンクされたセクションを参照してください。

モバイルアプリSDK

  • モバイルスクリーンリーダーからアクセス可能:
    • スクリーンリーダによるダイアログのナビゲートと終了を容易にします。
    • ボタン内のテキストと、項目のタイプ (ボタンなど) の読込を許可します。

アクセス可能なレスポンシブダイアログクリエイティブの作成

このセクションでは、スクリーンリーダーがアクセスできるようにレスポンシブダイアログクリエイティブを編集する方法について説明します。

  1. [プロジェクト]ページに移動し、ウェブサイト/アプリのインサイトプロジェクトを作成します。
  2. [新規作成] をクリックします。
    右側にある Create New をクリックします。
  3. 選択 レスポンシブなダイアログ をインターセプトのタイプとして指定します。
    左端のボックスをクリックします。
  4. インターセプトに名前を付けます。
    名前を指定してインターセプトを作成
  5. リンクするアンケートを選択するか、ダイレクト先のカスタムURLを入力します。
  6. [次へ] をクリックします。
  7. ボタンを選択します
    ボタンを選択してから、ラベルフィードバックを入力します。
  8. ボタンごとに適切なテキストをテキストセクションに挿入します。このテキストは、スクリーンリーダーによって読み上げられるだけでなく、ユーザーにも視覚的に表示されます。
  9. ロゴ画像をクリックします。(&A)
    左側の[ロゴ]をクリックし、Alt テキストに名前を付けます。
  10. Alt テキストセクションを変更して、グラフィックの説明を記述します。スクリーンリーダーを使用する訪問者は、視力障害がある場合に画像が何であるかを把握できるように、代替テキストを読み取ります。
  11. ダイアログに直接アンケートを表示している場合は、[サイズ& スタイル]に移動します。サイズ; スタイルタブ、iframe タイトルの追加(&A)
  12. [Display survey direct in the dialog] チェックボックスをオンにします。
  13. [Iframe title]ボックスに、スクリーンリーダーがアンケートに最初に遭遇したときに読み取るテキストを入力します。
ヒント:ガイド付きワークフローを使用してインターセプトを作成していない場合は、クリエイティブごとに7~13の手順に従ってください。

アクセシブルな[フィードバック]ボタンクリエイティブの作成

  1. [プロジェクト]ページに移動し、ウェブサイト/アプリのインサイトプロジェクトを作成します。
  2. [新規作成] をクリックします。
    右側にある Create New をクリックします。
  3. 選択 [フィードバック]ボタン をインターセプトのタイプとして指定します。
    中央のアイコン Feedback ボタンをクリック
  4. インターセプトに名前を付けます。
    名前を指定してインターセプトを作成
  5. リンクするアンケートを選択するか、ダイレクト先のカスタムURLを入力します。
  6. [次へ] をクリックします。
  7. [見た目と操作性]に移動します。
    Look & 右側の "Look &amp" に移動し、ボタンテキストを入力します。
  8. ボタンテキストセクションにボタンの適切なテキストを挿入します。このテキストは、スクリーンリーダーによって読み上げられるだけでなく、ユーザーにも視覚的に表示されます。
  9. カスタムボタンを使用する場合は、自分自身のボタンを使用を選択し、コンピュータから適切なイメージをアップロードします。
  10. 画像をアップロードしたら、Alt テキストを変更して、ボタンの説明を記入します。スクリーンリーダーを使用する訪問者は、視力障害がある場合に画像が何であるかを把握できるように、代替テキストを読み取ります。
    クリックした場合、自分のボタンを使用して画像をコンピュータからアップロード
  11. アンケートの表示]をクリックします。
    左側のアンケート表示をクリックします。
  12. Iframe タイトルセクションで iframe タイトルを指定します。埋め込みターゲットをインターセプトに追加した場合、このオプションにより、スクリーンリーダーが解釈できる iframe にタイトルが追加されます。

ターゲットボタンへの Alt テキストおよびロールの追加

ヒント:このセクションで説明する機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとデジタル向け CustomerXM の違いの詳細については、デジタルフィードバックとを参照してください。デジタル向け CustomerXM
ヒント:レスポンシブダイアログとフィードバックボタンには、このステップは必要ありません。
注意:カスタムコーディング機能は現状のまま提供され、実装するにはプログラミングの知識が必要となる場合があります。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。ただし、 コミュニティの経験豊かなユーザー(英語) に尋ねてみることは可能です。購入可能なカスタムコーディングサービスの詳細については、クアルトリクスの営業担当にお問い合わせください。

ターゲットがアップロードしたボタンイメージの形式である場合、alt テキストとロール属性を追加すると、スクリーンリーダがボタンの発言や操作の内容を理解しやすくなります。

  1. クリエイティブ]タブでクリエイティブを開きます。
  2. イメージを含む Target 要素をダブルクリックします。
    クリエイティブエディターのボタンがダブルクリックされ、ソースボタンのある新しいツールバーが上部に表示されます
  3. ソースをクリックします。
  4. タグ内で<img>、alt 属性を<img alt="text here" />タグに追加し、イメージのテキストと同じ値を設定します。
    <img alt="Sign Up Now" ... />
    ヒント:スクリーン読み取りソフトウェアは、alt属性に含まれているものを写真に届いたときに読み上げる。

    この画像のように imgタグには altタグがあります

  5. タグを<img>タグで囲<span>みます。
    ボタンのソーステキストに追加されたスパン
  6. タグに<span> role=”button” 属性を追加します。
    <span role="button"><img .../></span>
    ヒント:ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。

    等しいボタンに設定された span タグに追加されたロール

標準ターゲット (リンクテキスト)

  1. クリエイティブ]タブでクリエイティブを開きます。
  2. テキストを含むターゲット要素をダブルクリックします。
    クリエイティブエディターのターゲットをダブルクリックして上部に新しいツールバーを表示し、[ソース]ボタンを表示します
  3. ソースをクリックします。
  4. タグに<span> role=”button” 属性を追加します。
    <span role="button" ... >テキストボックスコンテンツ</span>

    等しいロールボタンが span タグで設定されました

閉じるボタンへの Alt テキストおよびロールの追加

ヒント:レスポンシブダイアログとフィードバックボタンには、このステップは必要ありません。
注意:カスタムコーディング機能は現状のまま提供され、実装するにはプログラミングの知識が必要となる場合があります。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。ただし、 コミュニティの経験豊かなユーザー(英語) に尋ねてみることは可能です。購入可能なカスタムコーディングサービスの詳細については、クアルトリクスの営業担当にお問い合わせください。

ボタンをイメージとして閉じる

  1. クリエイティブ]タブでクリエイティブを開きます。
  2. イメージを含む Close 要素をダブルクリックします。
    クリエイティブエディターの[閉じる]ボタンがダブルクリックされ、[ソース]ボタンが表示された新しいツールバーが上部に表示されます
  3. ソースをクリックします。
  4. alt=”close” 属性をタグ<img>に追加します。
    <img alt="close" ... />
    ヒント:スクリーン読み取りソフトウェアは、alt属性に含まれているものを写真に届いたときに読み上げる。

    ソース内の img タグに単語 Close に等しい alt タグが追加されました。

  5. タグを<img>タグで囲<span>みます。
    ソースコード内でタグをスパン
  6. タグに<span> role=”button” 属性を追加します。
    <span role="button"><img .../></span>
    ヒント:ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。

    span に追加されたボタンと等しいロール属性

ボタンを閉じる (テキスト)

  1. クリエイティブ]タブでクリエイティブを開きます。
  2. テキストを含む Close 要素をダブルクリックします。
    クリエイティブエディターの近いテキストがダブルクリックされ、[ソース]ボタンが表示された新しいツールバーが上部に表示されます
  3. ソースをクリックします。
  4. タグに<span> role=”button” 属性を追加します。
    <span role="button" ...>テキストボックスコンテンツ</span>
    ヒント:ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。

    等号ボタンの span セットに追加されたロール属性

FAQ

当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。