--- schema_version: "1" id: 283a0a56040519ba526cc14d0c32d3610eb4904ca45ea1d0a952fdecb2c6d47f title: アクセシビリティのためのダッシュボードの構築 collection: tableau version: next locale: ja-jp portal_url: https://docs.salesforce.com/tableau/next/ja-jp/pro/desktop/accessibility_dashboards.md canonical_url: https://help.tableau.com/v0.0/pro/desktop/ja-jp/accessibility_dashboards.htm source_site: help.tableau.com content_type: documentation content_hash: bb5b6f13b3cb21eccf9b95e094f9bb3fe6b926f42cd5e014af2ee43a122a9e30 description: Build WCAG 2.2 AA-compliant dashboards with keyboard navigation, focus order, and accessible formatting. --- [メイン コンテンツに進む](#main-content) # アクセシビリティに対応したダッシュボードの構築 Tableau を使用することで、Web コンテンツ アクセシビリティ ガイドライン (WCAG 2.2 AA) に準拠したダッシュボードを作成できます。これは、できるだけ多くの人に対してダッシュボードのアクセシビリティを高める必要がある場合や、業務上、[US Section 508](https://www.section508.gov/) 要件やアクセシビリティ関連のその他の法律や規制への準拠が求められる場合に有用です。 アクセシビリティに対応したダッシュボードを作成するには: 1. Tableau Desktop で、または Tableau Server や Tableau Cloud の Web 作成でダッシュボードを作成します。 2. ダッシュボードをパブリッシュし、それを Web コンテンツ アクセシビリティ ガイドライン (WCAG 2.2 AA) に準拠する Web ページに埋め込みます。 このトピックでは、ユーザーにとってスクリーン リーダーがダッシュボードの移動にどのように役立つのかに加えて、ダッシュボード内のオブジェクトやビューが読み上げられる順序、アクセシビリティに対応しているアイテム、既存のダッシュボードのアクセシビリティを高める方法について説明します。 ## ダッシュボードのキーボード ナビゲーションとフォーカス順序 Tableau には、キーボードのみを使用して操作を行うのに役立つキーボード ショートカットがあります。詳細については、[Web 上の Tableau のキーボード アクセシビリティ](https://help.tableau.com/v0.0/pro/desktop/ja-jp/access_keyboard_navigation.htm)を参照してください。 ダッシュボードを作成する際、スクリーン リーダーがダッシュボード内のビューやオブジェクトをその追加順で読み上げることに注意してください。たとえば、ダッシュボードの説明に役立つ情報を含むテキスト オブジェクトがダッシュボードに含まれている場合には、最初にダッシュボードにこのオブジェクトを追加します。 XML ディレクトリを直接編集して、ダッシュボード階層を編集することもできます。詳細については、Tableau コミュニティの投稿[「How can I set the focus order of the views and objects in a dashboard? (ダッシュボード内のビューやオブジェクトのフォーカス順を設定するにはどうすればよいですか?)」](https://community.tableau.com/s/question/0D54T00000C6USYSA3/how-can-i-set-the-focus-order-of-the-views-and-objects-in-a-dashboard)を参照してください。 ## アクセシビリティに対応したダッシュボードの作成 Tableau ワークスペース内の多くのアイテムとオブジェクトはキーボード ナビゲーションをサポートしており、画面読み上げソフトウェアなどの支援技術との互換性があります。以下のアイテムは、アクセシビリティに対応させたいダッシュボードで使用することができます。 - [ダッシュボード オブジェクトの追加とオプション設定](https://help.tableau.com/v0.0/pro/desktop/ja-jp/dashboards_create.htm#Add_objects) - テキスト オブジェクト - Web ページ オブジェクト - ボタン オブジェクト - イメージ オブジェクト - ツールバー - ダッシュボード タイトル - ビュー、特に以下のもの: - タイトル - \[ワークブック\] タブ - \[データの表示\] ウィンドウ - キャプション (表示しているとき) - カテゴリー凡例 - 単一フィルターおよび複数値フィルター ![アクセシビリティの原則を適用できる Tableau のさまざまな要素 (注釈番号 1 ～ 8)。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/accessibility_callout1.png) ビューの詳細については、[アクセシビリティのためのデータ ビューの作成](https://help.tableau.com/v0.0/pro/desktop/ja-jp/accessibility_overview.htm)を参照してください。 **注**: ビュー内のインタラクティビティ (マーク選択やツールヒントなど) はアクセシビリティに対応していません。 ## ウォークスルー: 既存のダッシュボードのアクセシビリティを高める ここでは、完成したワークブックから始めて、そのアクセシビリティをさらに高めるために、逆算して必要な措置を講じます。 ![時系列の棒グラフには、スーパーストアの売上が製品カテゴリと地域別に表示され、カテゴリと年でフィルタリングするためのインタラクティブなチェックボックスが付いています。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard1.png) このワークブックのアクセシビリティを高めるため、次の操作を行います。 1. [ダッシュボードおよびワークブック レベルでアクセシビリティのために書式設定する](#Format) 2. [マークを集計して減らす](#Aggregat) 3. [冗長情報を排除する](#Eliminat) 4. [色と形状でマークを区別する](#Use) 5. [フィルターを使ってビュー内のマークの数を減らす](#Use2) 6. [キャプションと凡例を追加する](#Add) このダッシュボードは、各販売地域と製品タイプの合計売上を表示するように設計されています。下部の折れ線グラフには、製品タイプごとの毎月の売上高が表示されています。このダッシュボードの作成者は色を使用し、"Superstore (スーパーストア)" の企業カラーである緑色と灰色でダッシュボードを印象付けたいと考えました。 残念ながらこのダッシュボードには、会社の配色など、ユーザーにとってアクセシビリティの問題となる機能がいくつかあります。以下の手順では、このダッシュボードのアクセシビリティを高めるためのいくつかの方法が示されています。 ### ダッシュボードおよびワークブック レベルでアクセシビリティのために書式設定する 灰色の背景に緑色のテキストを表示すると、視覚的なコントラスト感度が失われているユーザーにとっては、十分な高さのコントラスト比が得られません。可能な限りコントラスト比を高くするために、背景を白にし、グラフ上のテキストの色を黒に変更します。 ダッシュボードの網掛けの色を更新するには、**\[書式設定\] > \[ダッシュボード\]** メニューで \[ダッシュボードの網掛け\] を **\[なし\]** に変更します。 ![\[ダッシュボードの書式設定\] ダイアログ ボックスには、シェーディング、フォント、配置など、ダッシュボードの外観をカスタマイズするためのさまざまなオプションが用意されています。](Img/access_dashboard2.png) テキストの書式設定の変更については、各ワークシートで書式設定を手動で変更することができます。とはいえ、その方法では時間がかかりすぎます。このダッシュボードには 2 つのビューしかありませんが、多くの場合、ダッシュボードにはもっと多くのビューがあります。 ダッシュボードのテキストを黒に更新するには、**\[書式設定\] > \[ワークブック\]** を選択し、**\[フォント\] > \[すべて\]** より **\[黒\]** に変更します。 ![Tableau Light パレットのフォント色の範囲を表示するダイアログ ボックス。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard3.png) これにより、ワークブックのすべてのシートのフォント色が黒に変更され、これがダッシュボードに含まれるビューに適用されます。カラー コントラストの外部情報については、[「Color Contrast and Why You Should Rethink It」](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)を参照してください。
アクセシビリティが低い - コントラストが低い アクセシビリティが高い - コントラストが高い
時系列の棒グラフには、製品カテゴリと地域全体にわたるスーパーストアの売上が、製品ごとに色分けされて表示されます。 時系列の折れ線グラフには、4 年間にわたる 10 個の製品の月間売上が表示され、棒グラフには製品カテゴリおよび地域別の売上の包括的なビューが表示されます。
アイテム周辺での背景色の追加の詳細については、[「パディング、境界線および背景色をアイテム周辺に追加する」](https://help.tableau.com/current/pro/desktop/ja-jp/dashboards_organize_floatingandtiled.htm#Add)を参照してください。 ### マークを集計して減らす ダッシュボードまたはビューで大量の情報を提供しなければならない場合があります。ただし、ビューの上部にある棒グラフのように、マークが多く含まれた密度の高いビューでは、スクリーン リーダーやキーボードを使用して理解するのが難しい可能性があります。 ダッシュボードの上部のビューには、グラフの各棒にそのカテゴリに含まれる各製品の名前が含まれるため、5,000 個以上のマークが表示されます。ビューに 1,000 個を超えるマークが使用されている場合、ブラウザーではなくサーバーでビューがレンダリングされます。サーバーでレンダリングされたビューは、WCAG の基準に準拠しません。マークの数を最も重要なデータ ポイントを強調するマークだけに限定します。 このビューのアクセシビリティを高めるには、**\[詳細\]** から **\[製品名\]** を削除して、積み重ね棒グラフを棒グラフにします。これにより、ビュー内のマークの数が 5,000 個以上から 68 個に減ります。
アクセシビリティが低い - マークが多すぎる アクセシビリティが高い - 集計されたビュー
地域別および製品カテゴリ別の売上データを表示する水平積み重ね棒グラフ。各製品の売上は色分けされています。

 

 地域別および製品カテゴリ別の売上データを表示する水平積み重ね棒グラフ。各製品の売上は色分けされています。
ユーザーは、\[データの表示\] ウィンドウ (既定で有効化) にアクセスして、マークの参照元データを確認することもできます。また、そのページからデータをアクセシビリティに対応したアプリケーションにダウンロードすれば、データをアクセシビリティに対応した方法で表示できます。 さらに認知的過負荷を減らし、フィールド内のマークの数を減らすには、関連するメンバーのグループをフィールドで作成します。類似した製品のグループを作成するには、次の操作を行います。 1. フィールドを右クリックし、**\[作成\]** > **\[グループ\]** を選択します。 ![フィールドをグループ化する場所や計算フィールドを作成する場所を示すコンテキスト メニューを含むデータ ペイン内のフィールド。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/ad-hoc4.png) 2. \[グループの作成\] ダイアログ ボックスで、グループ化する複数のメンバーを選択してから、**\[グループ\]** をクリックします。 グループ化の詳細については、[データのグループ化](https://help.tableau.com/v0.0/pro/desktop/ja-jp/sortgroup_groups_creating.htm)を参照してください。ここで、ビューの外観をグループ化および集計の前後で比較したものを示します。
アクセシビリティが低い - マークが多すぎる アクセシビリティが高い - 集計およびグループ化されたビュー
地域別および製品カテゴリ別の売上データを表示する水平積み重ね棒グラフ。各製品の売上は色分けされています。 地域別および製品カテゴリ別の売上データを表示する水平積み重ね棒グラフ。各製品のセグメントが色分けされています。
このタイプのビューの作成方法の詳細と例については、[アクセシビリティのためのビューの作成](https://help.tableau.com/v0.0/pro/desktop/ja-jp/accessibility_create_view.htm)の[シンプルにする](https://help.tableau.com/v0.0/pro/desktop/ja-jp/accessibility_create_view.htm#SimpleAggregated)を参照してください。 ### 冗長情報を排除する 集計およびグループ化された棒グラフではユーザーの認知的過負荷が軽減しますが、色が必要ない場合でも意味を伝えるためにやはり色が使用されています。各棒のサイズは売上を表すため、\[Sales (売上)\] フィールドは、\[マーク\] カードの \[色\] に必要ありません。色を削除すると、スクリーン リーダーが読み上げる色の凡例も削除されます。
アクセシビリティが低い - 不要なマーク アクセシビリティが高い - 不要なマークが削除されている
地域別および製品カテゴリ別の売上データを表示する水平積み重ね棒グラフ。各製品のセグメントが色分けされています。 横棒グラフは、4 つの地域における製品カテゴリ別の売上を示しています。
### 色と形状でマークを区別する このダッシュボードの折れ線グラフには、色によってのみ区別されるマークが含まれています。そのため、色覚異常を持つ人はマークを区別することが困難です。線のパスは位置情報としては有用ですが、線のマークを色で明確に識別することはできません。 ![折れ線グラフは、さまざまな製品タイプの月間売上を表示するために使用されています。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard7.png) この折れ線グラフのアクセシビリティをさらに高めるには、**\[色覚異常\]** パレットの適用と形状の追加を行い、色で表示されているものを補強します。 \[色弱\] パレットを適用するには: 1. **\[マーク\]** カードで **\[色\]** を選択します。 2. **\[カラー パレット\]** メニューから **\[色弱\]** を選択します。 ![色覚異常パレットが選択された色の編集ダイアログ ボックス。データ項目と、選択したデータ項目に適用する色を選択できます。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard8.png) 3. **\[パレットの割り当て\]**、**\[適用\]** を選択し、これをビューに適用します。 色に加えて形状を折れ線グラフに追加するには、複合グラフまたは二重軸グラフを作成します。 1. Control を押しながら **\[行\]** シェルフにフィールドをドラッグ (Mac では Command を押しながらドラッグ) してコピーし、最初のフィールドの右に配置します。これにより、\[行\] シェルフのフィールドごとに 1 つずつ、\[マーク\] カードに 2 つのタブが作成されます。 2. \[マーク\] カードで、**\[フィールド名 (2)\]** というタイトルが付いている下部のタブを選択します。\[マーク\] カードのドロップダウン メニューから **\[形状\]** を選択します。 ![マーク カード ドロップダウンには、形状、棒、線、面、正方形、円、テキスト、マップ、円、ガント チャート、多角形、密度などのマーク タイプ オプションがあります。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard10.png) 3. フィールド名の右側にある \[色\] マークを選択し、\[形状\] を選択します。 4. ![形状、色、サイズ、ラベル、詳細、ツールヒントなどのマーク カードのエンコード オプション。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard11.png) これにより、フィールド内のマークごとに別々の形状が作成されます。この時点で 2 つの異なるグラフがあります。1 つは色に関する折れ線グラフ、もう 1 つは形状を使用した散布図です。 これら 2 つのグラフをマージして二重軸グラフにするには、\[行\] シェルフで右側のフィールドを選択し、**\[二重軸\]** を選択します。複合グラフの詳細については、[複合グラフの作成](https://help.tableau.com/v0.0/pro/desktop/ja-jp/qs_combo_charts.htm)を参照してください。
アクセシビリティが容易でない アクセシビリティが高い - 色弱パレットと形状
製品カテゴリ別の月間売上を表示する折れ線グラフ。 製品タイプ別の月間売上を表示する折れ線グラフ。製品カテゴリごとに異なる線が表示されます。
グラフは向上しましたが、線の色と形状は 10 番目のマークが適用された後に繰り返しになります。ビューの外観が複雑になり理解が難しくなるため、認知的過負荷に繋がります。フィルターと凡例を追加し、これを修正しましょう。 ### フィルターを使ってビュー内のマークの数を減らす フィルターを使うことにより、ビュー内のマークの数を、ユーザーに見てもらいたいものだけに絞ることができます。 次のフィルター モードを表示することにより、ユーザーがビュー内のデータを制御できるようになります。現在は、次のフィルター モードが Tableau において WCAG 準拠でサポートされています。 - **単一値 (リスト)**: ラジオ ボタンを使ったフィルター。一度に選択できるアイテムは 1 つだけです。ユーザーに単一値のフィルターを提供するという方法は、ビュー内のマークの数を減らす良い方法です。 - **複数値 (リスト)**: 同時に選択できるアイテムのリスト (チェックボックス付き) を使用したフィルター。複数値のフィルターでは、同時により多くのマークを表示できます。 ![2 つのドロップダウン メニュー。最初のドロップダウン メニューは製品カテゴリの単一値リストで、2 番目のドロップダウン メニューは製品オーダー日の複数値リストです。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_filters_list.png) - **単一値 (ドロップダウン)**: アイテムのドロップダウン リストを使用したフィルター。一度に選択できるアイテムは 1 つだけです。ユーザーに単一値のフィルターを提供するという方法は、ビュー内のマークの数を減らす良い方法です。 - **複数値 (ドロップダウン)**: 同時に選択できるアイテムのドロップダウン リストを使用したフィルター。複数値のフィルターでは、同時により多くのマークを表示できます。 ![ドロップダウンが 2 つあり、1 つは製品カテゴリの単一値のドロップダウン、もう 1 つはオーダー日の年の複数値のドロップダウンです。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_filters_dropdown.png) フィルターを表示するには、フィルターとして使用したいフィールドを右クリックし、\[フィルターの表示\] を選択します。 ![\[シートに追加\] が選択された、データ ペインのフィールドのコンテキスト メニュー。](Img/access_showfilter_date.png) フィルター モードを選択するには、フィルターのドロップダウン メニューから、\[単一値 (リスト)\]、\[単一値 (ドロップダウン)\]、\[複数値 (リスト)\]、または \[複数値 (ドロップダウン)\] を選択します。 ![フィルター コンテキスト メニューには、単一の値、複数の値、関連する値のみ、データベース内のすべての値、含める値、除外する値などのフィルター オプションのリストが表示されます。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_selectfiltertype.png) 折れ線グラフは単一値リストなので、フィルターから \[すべて\] オプションを削除することができます。フィルターのドロップダウン メニューから \[カスタマイズ\] を選択し、\[" すべて"の値を表示\] オプションをクリアします。 ![\[すべての値を表示\] オプションが選択されたフィルター コンテキスト メニュー。](Img/access_hideshowall.png) これにより、ダッシュボードの使用者の認知的過負荷にならないよう、ビュー内のマークのレベルが少なくなります。
アクセシビリティが低い - マークが多すぎる アクセシビリティが高い - ビュー内のマークが少ない
製品タイプ別の月間売上を表示する折れ線グラフ。製品カテゴリごとに異なる線が表示されます。 製品カテゴリ別の月間売上傾向を示す折れ線グラフ。アクセサリ、コピー機、機械、電話、テクノロジーが個別の線で表示されています。
詳細については、[「フィルターを使ってビュー内のマークの数を減らす」](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#UseFiltersInViews)を参照してください。 Viz の使用をさらに簡単にするための別の方法としては、次の方法があります。 ### キャプションと凡例を追加する ユーザーにとってさらにわかりやすくするために、ダッシュボードの説明のほか、フィルターや凡例の使用方法など、操作方法の手順を示す**テキスト オブジェクト**を追加できます。テキスト オブジェクトを追加するには: 1. \[オブジェクト\] メニューから \[テキスト\] をつかみ、ダッシュボードにドラッグします。 ![テキスト、画像、Web ページ、ボタン、拡張機能など、さまざまなダッシュボード オブジェクト。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard16.png) 2. **\[テキストの編集\]** ウィンドウを使用し、ダッシュボードの目的とその使用方法を説明するテキストを追加します。 グラフのキャプションをダッシュボードに追加することもできます。既定のキャプション テキストには、ビューの概要が記載されていますが、このテキストを修正して、より適切なコンテキストを提供することができます。これを行うには、ダッシュボードのグラフをクリックし、**\[その他のオプション\]** ドロップダウン メニューで **\[キャプション\]** を選択します。 ![ダッシュボード内のシートに対して実行できるアクションの包括的なリスト。たとえば、シートへの移動、シートの複製、シートの表示の調整、タイトル、凡例、フィルター、または蛍光ペンの追加、ページ コントロールまたはビュー ツール バーの表示、シートのフィルターとしての使用、アクションの無視、シートのフローティングとしての設定、レイアウト コンテナの選択、またはダッシュボードからのシートの削除などです。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboard18.png) 最後に、凡例のタイトルを更新して関連するグラフを参照し、スクリーン リーダーが使用する冗長テキストの量を減らします。これを実行するには、凡例のタイトルをダブルクリックするか、右クリックして **\[タイトルの編集\]** を選択し、**\[フィルターのタイトルの編集\]** ウィンドウでテキストを追加または編集します。 これにより、ダッシュボードにダッシュボードとグラフのキャプションの説明が含まれ、ユーザーにとって冗長なテキストが排除されます。 ![棒グラフと折れ線グラフには、それぞれ製品カテゴリと地域別のスーパーストアの売上と、製品タイプ別の月間売上が表示されます。](/tableau/next/ja-jp/pro/desktop/ja-jp/Img/access_dashboardafter.png) ## ダッシュボードのパブリッシュと埋め込み ビューを作成し終えたら、WCAG 準拠のビューにするために、次のことを行う必要があります。 - ビューを Tableau Server または Tableau Cloud にパブリッシュしてから、WCAG 準拠の Web ページにビューを埋め込みます。ビューのパブリッシュ方法の詳細については、[ワークブックをパブリッシュするための包括的な手順](https://help.tableau.com/v0.0/pro/desktop/ja-jp/publish_workbooks_howto.htm)を参照してください。 - WCAG に準拠したビューでは Web 編集はサポートされていないため、パブリッシュされたワークブックでは Web 編集パーミッションをオフにする必要があります。 - 埋め込みビューで、ツールバーの \[カスタム ビュー\]、\[サブスクリプション\]、\[アラート\] ボタンを非表示にします。 - ユーザーが埋め込みビューにアクセスするためのパーミッションを持っていて、参照元データを \[データの表示\] ウィンドウで表示可能であることを確認します。 これらの各手順の詳細については、「アクセシビリティのためのビューの作成」の[「ビューのパブリッシュと埋め込み」](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#Publish)を参照してください。