Qualtrics Platform
Customer Journey Optimizer
XM Discover
Qualtrics Social Connect

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

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

ウェブサイトインサイトプロジェクトには、アクセシビリティを容易にするための多くの機能が組み込まれています。特に、アクセシビリティを考慮して設計されたレスポンシブなダイアログやフィードバックボタンを試してみることをお勧めします。

このページでは、ウェブサイトインサイトプロジェクトのアクセシビリティを向上させるための具体的な設定とベストプラクティスについて説明します。

Qtip:ポップオーバー、スライダー、インフォバー、カスタム埋め込みフィードバックなどのレガシークリエイティブは一般的にアクセシビリティがありません。アクセシビリティを向上させるために、このページで説明している設定もありますが、アクセシビリティの設定が簡単なので、レスポンシブなダイアログやフィードバックボタンを使用することを強くお勧めします。

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

レスポンシブなダイアログは、アクセシビリティを考慮して開発されたウェブサイトのオーバーレイです。以下に、期待できるアクセシビリティ機能のいくつかを強調表示します：

Alt Textの定義が簡単です：ダイアログ内でカスタムアイコンを使用する場合、アイコンにフォーカスが当たったときにスクリーンリーダーが読むべきテキストを示すAltテキストを指定することができます。
Qtip:インターセプトを解除するアイコンを含めるを選択した場合、ダイアログの右上に表示されるXボタンのaltテキストは “close “になります。このaltテキストもローカライズされる。
ボタン・コントロールのARIAラベル：デフォルトでは、スクリーン・リーダーはボタン・ラベルに指定したテキストを読みます。しかし、場合によっては、スクリーンリーダーに、”このボタンをクリックすると、新しいアンケート調査ウィンドウが開きます。”など、追加のコンテキストを読み上げさせたいこともあるでしょう。この場合、ボタン・コントロールのARIAラベルを指定することができる。
埋め込みアンケート調査用の iframe タイトル：ダイアログにアンケートを埋め込む場合、スクリーンリーダー用の iframe タイトルを追加するのは簡単です。
クリエイティブ内の要素の色対比：クアルトリクスは直接対比のガイダンスを提供することはできませんが、必要に応じてダイアログのボタンやテキストの色を調整することができます。

アクセシビリティを考慮したフィードバックボタンのクリエイティブ

［フィードバック］タブとは、ページの並列にあるタブで、ユーザーがクリックしてフィードバックを残すことができるものです。フィードバックボタンが持つアクセシビリティ機能を紹介します：

iframeタイトル： アニメーションセクションでiframeのタイトルを指定できます。
カスタム・ボタンのAltテキスト：デフォルトでは、スクリーン・リーダーはボタン・ラベルに指定したテキストを読みます。しかし、場合によっては、ボタンにカスタム画像を使いたいこともあるでしょう。この場合、ボタン画像にalt-textを指定することができます。
埋め込みアンケート調査用の iframe タイトル：ダイアログにアンケートを埋め込む場合、スクリーンリーダー用の iframe タイトルを追加するのは簡単です。
クリエイティブ内の要素の色対比：クアルトリクスは直接対比のガイダンスを提供することはできませんが、必要に応じてボタンの背景やテキストの色を調整することができます。

レガシークリエイティブのターゲットボタンにAltテキストと役割を追加する

Qtip:このセクションに記載されている機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとCustomerXM for Digitalの違いの詳細については、デジタルフィードバックとCustomerXM for Digitalを参照してください。

Qtip:レスンシブなダイアログとフィードバックボタンはこのステップを必要としません。

注意カスタムコーディング機能はそのまま提供されるため、実装にはプログラミングの知識が必要になる場合があります。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。購入可能なカスタムコーディングサービスの詳細をお知りになりたい場合は、クアルトリクス営業担当までご連絡ください。

ターゲットがアップロードしたボタン画像の形式である場合、altテキストとrole属性を追加することで、スクリーン・リーダーがボタンの意味を理解しやすくなります。このアドバイスは、ポップオーバーやインフォバーのようなレガシークリエイティブに対するものです。

クリエイティブタブでクリエイティブを開きます。
画像を含むターゲット要素をダブルクリックします。
ソースをクリック。
<img> タグの中に、alt属性<img alt="text here" /> を追加し、その値を画像のテキストに等しく設定する。
```
<img alt="Sign Up Now" ... />
```
Qtip: 画面を読み上げるソフトウェアは、画像に到達したときにalt属性に含まれる内容を読み上げます。
<img> タグを タグで囲む。
タグにrole=”button “属性を追加する。
```
<img .../>
```
Qtip: role属性は、スクリーン・リーダーを使っている訪問者に、この要素がアクティブにできるボタンであることを伝えます。

標準ターゲット（リンクテキスト）

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

タグにrole=”button “属性を追加する。

<span role="button" ... >テキストボックスの内容</span>

レガシークリエイティブのクローズボタンにAltテキストとロールを追加

Qtip:レスンシブなダイアログとフィードバックボタンはこのステップを必要としません。

ポップオーバーやスライダーのようなレガシーなクリエイティブでは、閉じるボタンにアクセシビリティを持たせるために特別なカスタマイズが必要です。

画像で閉じるボタン

クリエイティブタブでクリエイティブを開きます。
画像を含むClose要素をダブルクリックする。
ソースをクリック。
<img> タグにalt=”close “属性を追加する。
```
<img alt="close" ... />
```
Qtip: 画面を読み上げるソフトウェアは、画像に到達したときにalt属性に含まれる内容を読み上げます。
<img> タグを タグで囲む。
タグにrole=”button “属性を追加する。
```
<img .../>
```
Qtip: role属性は、スクリーン・リーダーを使っている訪問者に、この要素がアクティブにできるボタンであることを伝えます。

閉じるボタンをテキストに

クリエイティブタブでクリエイティブを開きます。
テキストを含むクローズ要素をダブルクリックする。
ソースをクリック。
タグにrole=”button “属性を追加する。
```
テキストボックスの内容
```
Qtip: role属性は、スクリーン・リーダーを使っている訪問者に、この要素がアクティブにできるボタンであることを伝えます。