Qualtrics Platform
Customer Journey Optimizer
XM Discover
Qualtrics Social Connect

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

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

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

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

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

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

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

［フィードバック］ボタンクリエイティブ

Iframe タイトル: アニメーションセクションで iframe タイトルを指定する機能。
カスタムボタンアラートテキスト:カスタムボタンが使用されている場合、イメージにアラートテキストを指定する機能。

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

クリエイティブ自体内の要素の色の対比：Qualtricsでは直接的なコントラストガイダンスを提供できませんが、ユーザーはフルコントロールでクリエイティブ要素に適した色を選択できます。

ヒント：選択したボタン名と役割は異なる場合があるため、これらのクリエイティブのターゲットボタンにアクセスするには、追加の編集が必要です。詳細については、サポートページのリンクされたセクションを参照してください。

モバイルアプリSDK

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

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

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

［プロジェクト］ページに移動し、ウェブサイト／アプリのインサイトプロジェクトを作成します。
[新規作成] をクリックします。
選択 レスポンシブなダイアログ をインターセプトのタイプとして指定します。
インターセプトに名前を付けます。
リンクするアンケートを選択するか、ダイレクト先のカスタムURLを入力します。
[次へ] をクリックします。
ボタンを選択します。
ボタンごとに適切なテキストをテキストセクションに挿入します。このテキストは、スクリーンリーダーによって読み上げられるだけでなく、ユーザーにも視覚的に表示されます。
ロゴ画像をクリックします。(&A)
Alt テキストセクションを変更して、グラフィックの説明を記述します。スクリーンリーダーを使用する訪問者は、視力障害がある場合に画像が何であるかを把握できるように、代替テキストを読み取ります。
ダイアログに直接アンケートを表示している場合は、［サイズ& スタイル］に移動します。
[Display survey direct in the dialog] チェックボックスをオンにします。
［Iframe title］ボックスに、スクリーンリーダーがアンケートに最初に遭遇したときに読み取るテキストを入力します。

ヒント：ガイド付きワークフローを使用してインターセプトを作成していない場合は、クリエイティブごとに7～13の手順に従ってください。

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

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

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

ヒント：このセクションで説明する機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとデジタル向け CustomerXM の違いの詳細については、デジタルフィードバックとを参照してください。デジタル向け CustomerXM

ヒント：レスポンシブダイアログとフィードバックボタンには、このステップは必要ありません。

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

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

［クリエイティブ］タブでクリエイティブを開きます。
イメージを含む Target 要素をダブルクリックします。
ソースをクリックします。
タグ内で<img>、alt 属性を<img alt="text here" />タグに追加し、イメージのテキストと同じ値を設定します。
```
<img alt="Sign Up Now" ... />
```
ヒント：スクリーン読み取りソフトウェアは、alt属性に含まれているものを写真に届いたときに読み上げる。
タグを<img>タグで囲みます。
タグに role=”button” 属性を追加します。
```
<img .../>
```
ヒント：ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。

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

［クリエイティブ］タブでクリエイティブを開きます。
テキストを含むターゲット要素をダブルクリックします。
ソースをクリックします。

タグに role=”button” 属性を追加します。

<span role="button" ... >テキストボックスコンテンツ</span>

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

ヒント：レスポンシブダイアログとフィードバックボタンには、このステップは必要ありません。

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

［クリエイティブ］タブでクリエイティブを開きます。
イメージを含む Close 要素をダブルクリックします。
ソースをクリックします。
alt=”close” 属性をタグ<img>に追加します。
```
<img alt="close" ... />
```
ヒント：スクリーン読み取りソフトウェアは、alt属性に含まれているものを写真に届いたときに読み上げる。
タグを<img>タグで囲みます。
タグに role=”button” 属性を追加します。
```
<img .../>
```
ヒント：ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。

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

［クリエイティブ］タブでクリエイティブを開きます。
テキストを含む Close 要素をダブルクリックします。
ソースをクリックします。
タグに role=”button” 属性を追加します。
```
テキストボックスコンテンツ
```
ヒント：ロール属性は、スクリーンリーダーを使用して訪問者にこの要素が有効化可能なボタンであることを伝えます。