---
schema_version: "1"
id: 315f1ac2d0e5cc842769d5b24fca1c5ba9a188cedff8c88c1d836b5b7feb8f00
title: アクセシブルなビューを設計するためのベスト プラクティス
collection: tableau
version: current
locale: ja-jp
portal_url: https://docs.salesforce.com/tableau/current/ja-jp/pro/desktop/accessibility_best_practice.md
canonical_url: https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_best_practice.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 88749f3426f7a40ae328f5b62fd3dc480d655016a79d562b169b46055c3acb52
description: Design guidelines for building WCAG 2.2 AA-compliant Tableau views using color, titles, captions, and layout.
---
[メイン コンテンツに進む](#main-content)

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

すばらしいビューを作成したら、ビューのアクセシビリティを高めて、すべてのユーザーがデータを見て理解できるようにする必要があります。

Tableau では、アクセシブルなビューを作成するためのコントロールがいくつかサポートされています。これらのコントロールは、US Section 508 要件および Web コンテンツ アクセシビリティ ガイドライン (WCAG 2.2 AA) に準拠しています。Tableau Cloud または Tableau Server から共有されるコンテンツが、「[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)」の手順に従い、次の WCAG 2.2 AA 原則に沿っていることを確認してください。

- **知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できる方法でユーザーに提示しなければならない。コンテンツを文章で説明したり、その他の方法で把握できるようにすることを検討してください。
- **操作可能** - ユーザー インターフェイス コンポーネントおよびナビゲーションは、さまざまなデバイスから利用可能であり、さまざまな方法でビューを操作可能でなければならない。
- **理解可能** - ビューに提示する情報は、ユーザーにとって理解可能なものでなければならない。たとえば、ビューに表示される各エレメントには、はっきりと区別できる名前やラベルを使用します。

この記事と「[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)」で説明しているベスト プラクティスに従うことにより、Tableau Server や Tableau Cloud でパブリッシュしたビューをすべてのユーザーにとってアクセシブルであるように構築します。

## シンプルにする

**WCAG 2.1 AA 原則:** 理解可能

ビューで大量の情報を提供しなければならない場合があります。しかし、情報が多すぎるビューは、分かりづらくなったり、スクリーン リーダーやキーボードを使用したナビゲートが困難になる場合があります。次のガイドラインを使用すると、ビューに詰め込みすぎてユーザーを圧倒することなく、必要な内容をすべて伝えることができます。

- 可能な場合はデータを集計し、表示するマークの数を減らします。また、ビューに 1000 個を超えるマークを表示すると、ブラウザーではなくサーバーでビューがレンダリングされることがあります。サーバーでレンダリングされたビューは、WCAG 準拠にまだ対応していません。
    
    ユーザーは、\[データの表示\] ページ (既定で有効化) にアクセスしてマークの参照元データを確認することも、このページからアクセス可能なアプリケーションにデータをダウンロードする方法でマークを確認することもできます。
    
    **例**:この例では、2 種類の棒グラフ ビューを使用して、詳細なビューと集計されたビューの違いを説明します。
    
    <table>
                            <tbody>
                                <tr>
                                    <th style="text-align: left;">簡単に理解できない - マークが多すぎる</th>
                                    <th style="text-align: left;">アクセシビリティが高い - 集計されたビュー</th>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/notaccessible_5000marks.png" alt="5000 個のマークが表示されている縦棒チャート">
                                    </td>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibilitycompliant_aggregated.png" alt="テキスト ラベルとより少ない数のマークが表示されている縦棒チャート">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>詳細すぎて理解しづらいビューになっています。</p>
                                            </li>
                                            <li>
                                                <p>5,000 個以上のマークが表示され、各マークが何を表しているのかを示す十分なテキストがありません。</p>
                                            </li>
                                            <li>
                                                <p>このビューは、スクリーン リーダーを必要とするユーザーには難しすぎて使えません。</p>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>この例は、より高いレベルで集計されたデータを使って同じビューを表示しています。</p>
                                            </li>
                                            <li>
                                                <p>重要なデータ ポイントは含んだまま、ユーザーにとって読みやすく、理解しやすくなりました。</p>
                                            </li>
                                            <li>
                                                <p>マークの数が 5,000 個以上からおよそ 20 個に減っています。</p>
                                            </li>
                                            <li>
                                                <p>ユーザーは、焦点をビューの上に置き、<span class="uicontrol">Enter</span> キーを押して <span class="uicontrol">[データの表示]</span> ページを開くことにより、マークの参照元となる詳細情報を確認できます。</p>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
- 棒グラフや折れ線グラフのように、テキスト、色、図形を使用でき、より多くのコンテキストをビューに追加できる、シンプルなグラフィック要素を使用することを検討します。
- マークの数を最も重要なデータ ポイントを強調するマークだけに限定します。

このタイプのビューの作成方法の詳細と例については、[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)の[シンプルにする](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#SimpleAggregated)を参照してください。

## タイトルとキャプション

**WCAG 2.1 AA 原則:** 知覚可能、理解可能

わかりやすい説明文をタイトルやキャプションに使用することで、支援技術を使っているユーザーにコンテキストを提供し、ビュー内のデータの理解を助けることができます。次のガイドラインに従って Tableau の視覚的な性質を適応させることで、すべてのユーザーのニーズを満たすことができます。

- ビューは、説明に使用するテキストの補足であると考えます。
- タイトルやキャプションでテキストを使用して、Viz や表示している内容を説明します。
- シンプルでわかりやすい言語を使用します。専門用語や頭字語、略語は避けます。
- 「～のイメージ」や「～の写真」などの言葉がスクリーン リーダーに自動的に含まれる場合があるため、説明文には含めません。
- 大文字のみの見出しやタイトルなどは、読み取りにくくなる可能性があるため避けます。
    
    **例:** この例は、2 種類の棒グラフを示しています。1 つはテキストをほとんど使用しておらず、もう 1 つはタイトルとキャプションを使ってコンテキストを追加しています
    
    <table>
                            <tbody>
                                <tr>
                                    <th style="text-align: left;">簡単に理解できない - テキストが少なすぎる</th>
                                    <th style="text-align: left;">アクセシビリティが高い - 説明文を補足してコンテキストを提供する</th>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibility_NoTitlesandCaptions.png" alt="最小限のテキストを含む縦棒チャート">
                                    </td>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibility_MoreTitlesandCaptions.png" alt="タイトルとキャプションを追加した縦棒チャート">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>1 語だけのタイトルでは説明が不十分です。</p>
                                            </li>
                                            <li>
                                                <p>マークが色とサイズで区別されています。しかし、テキストが追加されていないので、各マークのコンテキストが分かりづらい可能性があります。</p>
                                            </li>
                                            <li>
                                                <p>このビューについて説明するキャプションやその他の説明文がありません。</p>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>この例は、同じビューを表示していますが、タイトルとキャプションの両方に説明文が追加されています。</p>
                                            </li>
                                            <li>
                                                <p>同じコントラスト カラー スケールとサイズを使って区別されていますが、コンテキストを追加するためにバー マークにラベルが追加されています。</p>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

コンテキストを提供するテキストを表示するビューの構築方法の詳細と例については、[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)の[より多くのテキストを表示して分かりやすいビューにする](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#UseText)を参照してください。

## 追加テキスト

**WCAG 2.1 AA 原則:** 知覚可能、理解可能

タイトルやキャプションに加えてテキストを使用することで、表示している内容のコンテキストをユーザーが理解しやすくなります。これらは、さまざまなコントロール (凡例とフィルターなど) とデータ間の関係を説明するのにも役立ちます。

テキストを追加する際には、次のガイドラインを使用してください。

- 凡例やフィルターの見出しにテキストを使用し、コントロールとその機能を説明します。また、ダッシュボードのテキスト ゾーンを使用して視覚化に対するコンテキストを追加し、表示内容をさらに説明することもできます。
- Viz に代替テキストを追加します。Tableau は、Tableau 23.1 で Viz の代替テキストの自動生成を開始しました。Tableau 23.2 以降では、自動生成された代替テキストを編集して、閲覧者にとって重要であることがわかっているコンテキストを追加できます。
- 可能であれば、ラベルによってコントロールを参照します。たとえば、凡例のラベルを **\[サブカテゴリ\]** から **\[商品タイプのカラー キー\]** に変更することで、コントロールとデータ間の関係がユーザーに分かりやすくなります。
- ビューにリンク テキストを含める場合は、リンクがユーザーをどこへ移動させるかを説明するテキストを使用します。たとえば、「1990 ～ 2020 年の地球温暖化統計情報」のようなリンク テキストを使用します。「ここをクリック」、「その他」、「詳細」などの文言は避けます。一般的すぎてユーザーが混乱する可能性があるため、使用を避けます。
- **例:** 2 種類のバブル チャートを示しています。一方のビューでは、ビューの作成時にデフォルトで表示されるテキストのみを使用し、もう一方のビューでは、意味を伝えるためにビュー全体にコンテキストを追加するテキストを使用しています。
    
    <table>
                            <tbody>
                                <tr>
                                    <th style="text-align: left;">簡単に理解できない - テキストが少なすぎる</th>
                                    <th style="text-align: left;">アクセシビリティが高い - 説明文を追加</th>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibility_no_text1.png" alt="テキストがほとんどないバブル チャート">
                                    </td>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/access_helptextbulbblechart1.png" alt="タイトル、キャプション、その他のテキストを含むバブル チャート">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>このビューは、シートのタイトルにデフォルトのテキストのみを使用し、フィルターおよび凡例にデフォルトのラベルを使用しています。</p>
                                            </li>
                                            <li>
                                                <p>マークがサイズと色のみで区別されています。</p>
                                            </li>
                                            <li>
                                                <p>このビューには、コンテキストを提供するキャプションやその他の説明文がありません。</p>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>この例は、同じビューを表示していますが、説明文が追加されています。</p>
                                            </li>
                                            <li>
                                                <p>タイトルおよびキャプションにテキストを追加することにより、マークの関係を説明したり、ビューが何を示しているかを説明するコンテキストを提供することができます。</p>
                                            </li>
                                            <li>
                                                <p>マーク ラベルを追加することで数値を示すことができるため、ユーザーが情報を理解する際に、色のみに頼らずに済みます。</p>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

コンテキストの補足テキストを含めたビューの構築方法と例については、「[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)」の「[より多くのテキストを表示して分かりやすいビューにする](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#UseText)」と「[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#Edit)」を参照してください。

## 色とコントラスト

**WCAG 2.1 AA 原則:** 知覚可能、理解可能

色を使用して、ビューのマークを区別することができます。しかし、視覚障害のあるユーザーとっては、色だけでは十分な区別が常に可能ではありません。ビューに多くのマークがある場合、色が多すぎると区別が特に難しくなります。ビューに色を追加する際は、次のガイドラインを使用してください。

- Tableau は、ビューに合った適切な色を選択する際に使用する色弱パレットを提供しています。使用するすべてのカラー パレットについて、十分なコントラストを提供し、明暗スペクトルでそれぞれ区別できる色を割り当てるようにします。
- 線マークについては、形状、サイズ、ラベルなどの追加オプションを使用して、区別しやすくします。
- [コントラスト分析](https://www.paciellogroup.com/resources/contrastanalyser/)ツールを使用して、テキストの色と背景に最適なコントラスト比を選択します。カラー コントラストを強くし、4.5:1 (大きいテキストの場合は 3:1) のコントラスト比標準を満たすようにします。
    
    **例:** この例は、2 つの線グラフを示しています。1 つは色のみで線を区別し、もう 1 つはより適切な色と形状でマークを区別しています
    
    <table>
                            <colgroup><col>
                            <col>
                            </colgroup><tbody>
                                <tr>
                                    <th style="text-align: left;">簡単に理解できない - 色のみでマークを区別</th>
                                    <th style="text-align: left;">アクセシビリティが高い - 色と形状でマークを区別</th>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibility_badcolor.png" alt="色のみを表示してマークを区別する折れ線グラフ">
                                    </td>
                                    <td>
                                        <img src="https://help.tableau.com/current/pro/desktop/ja-jp/Img/accessibility_colorshape.png" alt="色と形状の両方を使用してマークを区別する折れ線グラフ">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>このビューは、色のみでそれぞれの線を区別しています。</p>
                                            </li>
                                            <li>
                                                <p>このビューのマークは、視覚障害を持つユーザーにとって十分にアクセシビリティが高いカラー パレットを使用していません。</p>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>
                                                <p>この例は、同じビューを表示していますが、色と形状を使ってマークを識別しています。</p>
                                            </li>
                                            <li>
                                                <p>明確なタイトルの付いた色の凡例と形状の凡例があるため、ビューで色や形状が何を表しているかが分かります。</p>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

色を使ってマークを区別するビューの構築方法の詳細と例については、[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)の[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#ColorContrast)を参照してください。

## ビューのパブリッシュ

**WCAG 2.1 AA 原則:** 知覚可能、操作可能、理解可能

ビューをユーザーが使用できるようにするには、ビューを Tableau Server または Tableau Cloud にパブリッシュします。次に、ツールバー メニューで \[共有\] をクリックします。ユーザーはスクリーン リーダーやキーボードを使用して、ビュー ボタンとツールバー ボタンを操作できます。詳細については、[Web 上の Tableau のキーボード アクセシビリティ](https://help.tableau.com/current/pro/desktop/ja-jp/access_keyboard_navigation.htm)を参照してください。

ワークブックをパブリッシュして埋め込む方法、埋め込みコードを探す方法、ツールバーをオフにする方法の詳細については、「[アクセシビリティのためのビューの作成](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm)」の「[ビューのパブリッシュと共有](https://help.tableau.com/current/pro/desktop/ja-jp/accessibility_create_view.htm#Publish)」を参照してください。