アクセシブルなアプリを設計するためのベストプラクティス

Analytics アプリでは、複数のアクセシビリティ機能をサポートしています。アプリ制作者はまた、アクセシビリティを向上させ、すべてのユーザーが分析アプリの情報にアクセスできるようにするための特別な措置を講じることもできます。

Analytics アプリでは、次のアクセシビリティ機能をサポートしています。

• 高コントラストの既定の配色

• キーボード ナビゲーションとキーボード ショートカット

  アプリのキーボード ナビゲーションとショートカット

• スクリーン リーダーのサポート

  スクリーン リーダーでの Qlik Sense の使用

アクセシビリティを念頭に置いてアプリを設計する場合、従うべき設計のベストプラクティスがあります。さらに、アプリを使いやすくするために使用できる特定のアプリの設定もあります。

設計ベスト プラクティス

アクセシビリティを念頭に置いて設計を行う場合は、以下のベスト プラクティスに従います。

• フラットなシート構造を維持する

• 最初に概要を説明する

• アクセスしやすい色を使用する

• アクセシビリティを考慮したビジュアライゼーションを選択する

• ストーリーテリングを避ける

フラットなシート構造を維持する

ビジュアライゼーションをシートに追加するときは、列と行が少ないフラットな構造を使用してください。フラットな構造にすることで、ユーザーに読みやすくなります。さらに、キーボード ナビゲーションが左上から右下に移動するため、キーボード ナビゲーションも簡単になります。

多くの列や行を持つ複雑なシート レイアウトは、理解しにくく、キーボードでのナビゲーションもより困難です。シートを設計するときは、キーボードでナビゲーションを行ってみて、ユーザーがアプリでどう感じるか試してみてください。

最初に概要を説明する

シートを作成する際は、まず概要を提供し、次に詳細を説明しましょう。こうすることで、ユーザーがシート内の情報を消費しやすくなります。例えば、まずシートで集計や KPI を提供し、次により詳しい表やその他のビジュアライゼーションを提供します。別のシートに詳細を配置することもできます。または、スクロールできるようにシートのサイズを変更し、シートの下の方に詳細を追加することもできます。

シートのサイズの変更方法については、「シート レイアウトの変更」を参照してください。

適切なビジュアライゼーションを選択する

Analytic アプリは、分析で使用するためのさまざまなビジュアライゼーションを提供しています。アクセスしやすいアプリを設計する際、他のビジュアライゼーションよりも適切なビジュアライゼーションがあり、それを選択する必要があります。ビジュアライゼーションを選択する際は、次の点に留意してください。

• データ ビューでチャートを使用する

• ビジュアライゼーション バンドルからストレート テーブルを使用する

• マッピング チャートの使用を避ける

• カスタム オブジェクトの使用を避ける

データ ビューにチャートを使用する

アプリを設計する際、データ ビュー付きのチャートを使用する。データ ビューを使用すると、ユーザーがチャートをテーブルに変更することができるため、値を検査したり選択したりすることができます。

データ ビューは以下のチャートで使用できます。

• 棒グラフ
• ボックス プロット (1 つまたは複数の軸を含む)
• コンボ チャート
• 分布プロット
• ヒストグラム
• 折れ線グラフ
• 円グラフ
• ピボット テーブル
• 散布図
• ツリーマップ

詳細は、ビジュアライゼーションのデータの表示をご覧ください。

ビジュアライゼーション バンドルからストレート テーブルを使用する

ビジュアライゼーション バンドルのストレート テーブルは、ナビゲーションのエクスペリエンスが現在のテーブル ビジュアライゼーションより向上しています。アクセス可能なアプリにテーブルを追加する際、標準のテーブル ビジュアライゼーションの代わりに使用してください。

詳細については、「ストレート テーブル」を参照してください。

マッピング チャートの使用を避ける

マッピング チャートはキーボード ナビゲーションで操作できません。アクセス可能なアプリを作成する際には、地理データを表示する代替方法の使用を検討してください。

カスタム オブジェクトの使用を避ける

ダッシュボードまたはビジュアライゼーション バンドルに含まれるチャートは、ストレート テーブルは別として、他のチャートほどアクセスしやすいとは限りません。アクセス可能なアプリでの使用は推奨されていません。さらに、拡張機能を使用する場合は、ユーザーにとってアクセスしやすいかどうかをテストしてください。

アクセスしやすい色を使用する

色の範囲は、色ベースの視覚障害がある方にとってはより狭くなります。視覚障害のある方は、ビジュアライゼーションを作成意図とは異なって解釈する可能性もあります。たとえば、ビジュアライゼーションの赤や緑が苦手なユーザーもいるかもしれません。色のコントラストが不足していると、折れ線、棒、円グラフも区別しづらくなります。

アプリの配色はシンプルにするのがベストです。デフォルトのアプリの配色は対称的な 12 色です。できれば 3 色から 5 色、あるいは単色を基調とした配色が推奨されます。独自のカスタム カラー スキームを作成し、アクセス可能なすべてのアプリで使用できます。詳細については、「カスタム テーマの作成」を参照してください。

テーマとは別に、いくつかの色を手動で設定することもできます。軸の場合、マスター軸の値に色を割り当てるように設定できます。詳細については、「マスター軸の値への色の割り当て」を参照してください。式別に色を設定することもできます。詳細については、「数式による色分け」を参照してください。ビジュアライゼーションの色オプションの詳細については、「ビジュアライゼーションを色分けする」を参照してください。

KPI にパフォーマンス指標として図形を追加する

KPI にパフォーマンス指標として図形を追加することを検討してください。これらはコンテキストを追加するため、KPI が使いやすくなります。例えば、不良な結果を示すために空の赤の円を、良好な結果の場合は緑で塗りつぶされた円を使用したり、KPI ステータスが許容できないレベルの場合のみに表示される警告記号として三角形を使用したりすることができます。詳細については、「KPI に図形を追加する」を参照してください。

ストーリーテリングを避ける

ストーリーは所見を提示するのに便利ですが、キーボード ナビゲーションやスクリーン リーダーにとってはシートのほうがアクセスしやすいと言えます。アクセシビリティを念頭に置いて設計されたアプリでは、シートを使用して所見を提示したほうがよいでしょう。

アクセス可能なアプリ設定

Analytics アプリには、アプリのアクセシビリティを向上させるのに役立つさまざまな設定が搭載されています。

シート設定

アクセシビリティを向上させるために、シートで変更できる設定がいくつかあります。

• シート タイトルのコントラストを改善する

• ホバーメニューをオフにする

シート タイトルのコントラストを改善する

シートと対照的なスタイルにすることで、シート タイトルを見やすくすることができます。

次の手順を実行します。

1. アプリのナビゲーション バーで、アプリ タイトルをクリックします。

2. [] をクリックして設定を開きます。

3. [シート タイトルのスタイル] で、コントラストを改善するために色の設定を調整します。

ホバーメニューをオフにします。

ホバー メニューをオフにすると、ナビゲーションがよりスムーズになります。オプションはコンテキスト メニューやキーボード ショートカットからも利用できるため、機能が損なわれることはありません。

次の手順を実行します。

1. アプリのナビゲーション バーで、アプリ タイトルをクリックします。

2. [] をクリックして設定を開きます。

3. [外観] で [ビジュアライゼーションのホバー メニューを表示] をオフにします。

チャート設定

チャートの中には、ユーザーにとって利用しやすくするためのオプションが搭載されているものもあります。次を実行できます。

• テキストの説明を提供する

• ビジュアライゼーションで軸値を制限する

• KPI に図形を追加する

テキストの説明の提供

ビジュアライゼーションには、タイトル、サブタイトル、脚注のフィールドが付いています。正確なテキスト説明を提供することで、ユーザーがビジュアライゼーションをナビゲートし、シートにコンテキストを提供することができます。コンテキストがないと、ユーザーがシートから興味のある情報を見つけるのに時間がかかります。タイトル、サブタイトル、脚注もすべてスクリーン リーダーで読み取ります。

ビジュアライゼーションで軸値を制限する

軸で名義データを扱う場合、カテゴリの数が 10 を超える場合は、階層を見つけるか、集計を作成してください。例えば、上位 10 の値を表示し、残りをその他に分類することで、データが理解しやすく、音読しやすくなります。詳細を含める必要がある場合は、シートの最後や他のシートに記載することができます。

次の手順を実行します。

1. 編集モードで、 [詳細オプション] をクリックします。

2. ビジュアライゼーションを選択します。

3. プロパティ パネルの [データ] から、軸を選択します。

4. [制限] で、次のいずれかを選択します。

   • [固定数]: 一番上または一番下の値を選択して表示します。値の数を設定します。数式を用いて数値を設定することも可能です。 をクリックして、数式エディターを開きます。

   • [厳密値]: 演算子を使用して制限値を厳密に設定します。数式を用いて数値を設定することも可能です。 をクリックして、数式エディターを開きます。

   • [相対値]: 演算子を使用して制限値をパーセントで相対的に設定します。数式を用いて数値を設定することも可能です。 をクリックして、数式エディターを開きます。

数字を省略する

長い数字を読み、聞き、理解することは困難です。可能な限り数字を省略し、桁数や小数を減らします。

Ceil や Round などの関数を使うと、数値を丸めることができます。たとえば、測定値を小数点以下 1 桁で百万単位に丸めたい場合は、=Round(Sum(Sales)/1000000, 0.1) を使用します。

詳細については、次を参照してください

• Ceil - スクリプトおよびチャート関数

• Round - スクリプトおよびチャート関数

KPI に図形を追加する

KPI に条件付きの色を使用している場合、色に加えて記号を追加できます。記号は、追加のパフォーマンス指標を提供するのに使用できます。

次の手順を実行します。

1. KPI ビジュアライゼーションを選択し、詳細編集モードでプロパティ パネルに切り替えます。

2. [スタイル] を選択し、[色] を展開します。

3. 必要に応じて、[ライブラリ カラー] をオフにし、[条件付きの色] をオンにします。

4. [限度の追加] をクリックして、新しい制限を作成します。1 つの KPI チャートに複数の制限を追加できます。

5. 制限の値を指定するか、数式エディタを使用して数式を入力します。

6. [値] のカラー バーで、変更する KPI の範囲エリアをクリックします。

7. [色] で、プリセットの色を選択するか、カスタムの色を使用します。

8. [記号] を選択して、KPI が指定された制限内に収まったときに表示される記号を選択します。

動的タイトルを使用する

ビジュアライゼーションを作成する際には、動的タイトルを使用して、チャートの本質を表現します。単なる一般的なタイトルではなく、ユーザーの選択に基づいて動的に情報を提供するタイトルの式の構築を検討してください。

set 分析と max()、min()、rank()、correl() を組み合わせてタイトルを作成することで、より動的に説明的チャートを表示することができます。

例えば、このビジュアライゼーションには静的タイトルがあります。

タイトルとサブタイトルに動的な数式を追加すれば、チャートの情報がより動的に表現されるため、ユーザーに提供できる情報が増えます。

動的タイトルの利点は、ユーザーの選択によってタイトルが変わることです。以下のビジュアライゼーションでは、売上上位 3 カ国が選択され、ビジュアライゼーションのタイトルとサブタイトルが変更されています。