Customer Experience
Employee Experience
Brand Experience
Core XM
Design XM

アクセス可能な Dashboard Design のヒント (Studio)

Studio でアクセス可能な Dashboard Design のヒントについて

Qualtricsは、ダッシュボード閲覧者がアクセス可能なコンテンツを作成および管理できるように支援します。ここでは、Studio でアクセスしやすいダッシュボードを構築するための簡単なヒントをいくつか紹介します。

小さい画面の設計

Studio ダッシュボードは、さまざまな画面サイズに応じてレスポンシブに拡張されますが、一部のレイアウトは、他のレイアウトよりも小さなビューに容易に適応します。1 列または 2 列のレイアウトでダッシュボードを設計すると、コンテンツが大幅に折り返されたり切り詰められたりしないようにすることができます。

イメージとデータビジュアライゼーションで代替テキストを使用

画像のテキスト代替では、視覚障害のあるユーザーまたは見えていないユーザーに、ダッシュボード上のビジュアルコンテンツの説明が提供されます。ダッシュボードの編集時に、代替イメージテキストと説明をイメージウィジェットとデータビジュアル化の両方に追加することができます。ウィジェットの説明の編集については、以下の「図表ウィジェットの説明の編集」セクションを参照してください。

適切な代替画像のタイトルは具体的で簡潔です。イメージ、ロゴ、またはシンボルをできるだけ簡潔に説明すると同時に、表示できないユーザにイメージの堅牢な説明を提供します。Alt イメージタイトルは、通常 125 文字未満です。スクリーンリーダーを利用するユーザーがダッシュボードにアクセスしやすいように、画像を説明する代替テキストの追加については、「画像ウィジェット」ページを参照してください。

複雑なイメージまたはデータビジュアライゼーションの説明 (長) を含む

チャート、グラフ、およびダイアグラムには、短い代替イメージタイトルで伝えることができない重要な情報が含まれています。XM Discoverでは、説明的なタイトルに加えて、コンテンツウィジェットの種類を除くすべてのウィジェットに対して動的な説明（長）が自動的に生成されます。これらの説明では、重要なデータポイントを要約し、ビジュアライゼーションが通信することを目的とした関連情報を指摘します。これらの説明の編集については、下の「図表ウィジェットへの説明の編集」セクションを参照してください。

画像をテキストとして使用しない

テキストを画像に平坦化する場合、「クロール」したり、スクリーンリーダーなどの補助技術で読み込んだりすることはできません。イメージの代わりに、テキストブロックウィジェットとヘッダスタイル (H1、H2、H3 など) を使用して、ダッシュボード内のコンテンツにセマンティック構造を埋め込みます。カテゴリモデルまたはルーブリックの組織をダッシュボードに表示する場合は、スクリーンショットを挿入する代わりに、オブジェクトビューアウィジェットを使用します。

色、サイズ、位置を使用して情報をまとめる

情報を伝えるための要素の色、サイズ、および位置の使用に熟考してください。ダッシュボードビューアは、感覚的な特性に頼ることなく、コンテンツを理解できる必要があります。

例:

ダッシュボード上の位置ではなく名前でウィジェットを参照します (たとえば、「右側のウィジェット」は、視覚障害のあるユーザーには意味がありません)。
ラベルを使用してデータポイントを区別します。色だけでは区別できません。

カスタムカラーパレット

Studio ダッシュボード全体で使用されるカラーパレットを作成および管理できます。

パターン塗りつぶしおよびダークモード

さまざまなレベルの表示機能を持つユーザーは、パターン塗りつぶしを適用したり、ダッシュボードやブックのカラーテーマのプレビューを選択したりできます。

ヒント：これらの設定は、ユーザー固有です。同じダッシュボードまたはブックを表示している他のユーザには、適用されたパターン塗りつぶしやカラーテーマのプレビューは表示されません。

条件付きメトリクスの色

メトリックの色は、Studio の [メトリクス] ページから簡単に更新できます。変更を行う場合、これは組織内のすべてのユーザーのビューに影響することに注意してください。XM Discoverの指標（センチメントや工数など）では、アイコンが代表的な色を補完するために組み込まれており、唯一の情報源としての色への依存が軽減されます。

ダッシュボードをオーバークラウドしない

ダッシュボードをできるだけシンプルに保ち、すべてのユーザがコンテンツと対話性を理解してナビゲートできるようにします。

ビジュアライゼーションウィジェットの説明の編集

ヒント：説明を編集するオプションは、コンテンツウィジェットタイプでは使用できません。

XM Discoverでは、ビジュアライゼーションウィジェットの動的な説明（長）が自動的に生成されます。これらの編集可能な説明では、重要なデータポイントを要約し、ビジュアライゼーションが通信することを目的とした関連情報を指摘します。

ヒント：スクリーンリーダーを利用するユーザーがダッシュボードにアクセスしやすいように、画像を説明する代替テキストを追加する方法については、「画像ウィジェット」ページを参照してください。

関連するダッシュボードの右上にある [編集] をクリックします。
関連するウィジェットの右上隅にあるアクションメニューを展開し、[編集] をクリックします。
ウィジェットの編集ウィンドウで、プロパティタブを選択します。
[説明] ボックスの説明を編集します (最大 1,000 文字)。
ヒント：説明については、上記の「複雑な画像またはデータ図表の説明（長）を含める」セクションを参照してください。

ヒント：インタラクティブチャートで利用できる説明を記述するヒントについては、「インタラクティブチャートでわかりやすい説明を記述する方法」の「Highchart ガイド」を参照してください。