あなたが作成したビューで、どのユーザーにも分かりやすくデータをまとめたいと考えていますが、ユーザーの中には視覚や身体的な障がいを持つ人もいます。どうすればよいでしょうか。

Tableau では、Web コンテンツ アクセシビリティ ガイドライン (WCAG 2.0 AA) を満たすビューを Tableau Online や Tableau Server で使用する際に、US Section 508 要件に準拠したビューを構築できるように、さまざまなコントロールをサポートしています。アクセシビリティのためのビューの作成の手順に従い、Tableau Online または Tableau Server から共有されるコンテンツが次の WCAG 2.0 AA の原則に準拠していることを確認してください。

  • 知覚可能 - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できる方法でユーザーに提示しなければならない。コンテンツを文章で説明したり、その他の方法で把握できるようにすることを検討してください。

  • 操作可能 - ユーザー インターフェイス コンポーネントおよびナビゲーションは、さまざまなデバイスから利用可能であり、さまざまな方法でビューを操作可能でなければならない。
  • 理解可能 - ビューに提示する情報は、ユーザーにとって理解可能なものでなければならない。たとえば、ビューに表示される各エレメントには、はっきりと区別できる名前やラベルを使用します。

Tableau Server や Tableau Online でパブリッシュしたビューをすべてのユーザーにとってアクセシブルであるように構築するには、この記事で説明しているベスト プラクティスに従い、アクセシビリティのためのビューの作成で示している手順を取り入れてください。

シンプルにする

WCAG 2.0 AA の原則:理解可能

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

  • 可能な場合はデータを集計し、表示するマークの数を減らします。また、ビューに 1000 個を超えるマークを表示すると、ブラウザーではなくサーバーでビューがレンダリングされます。サーバーでレンダリングされたビューは、まだ WCAG 準拠がサポートされていません。

    ユーザーは、[データの表示] ページ (既定で有効化) にアクセスしてマークの参照元データを確認することも、このページからアクセス可能なアプリケーションにデータをダウンロードする方法でマークを確認することもできます。

    :この例では、2 種類の棒グラフ ビューを使用して、詳細なビューと集計されたビューの違いを説明します。

    簡単に理解できない - マークが多すぎる アクセシビリティが高い - 集計されたビュー
    • 詳細すぎて理解しづらいビューになっています。

    • このビューには 5,000 個以上のマークが表示されていますが、各マークが何を示すかを表すテキストが不十分です。

    • このビューは、スクリーン リーダーを必要とするユーザーには難しすぎて使えません。

    • この例は、より高いレベルで集計されたデータを使って同じビューを表示しています。

    • 主要なデータ ポイントは含まれていますが、こちらの方がユーザーにとってより簡単に読み取って理解できるようになっています。

    • マークの数が 5,000 個以上からおよそ 20 個に減っています。

    • ユーザーは、焦点をビューの上に置き、Enter キーを押して [データの表示] ページを開くことにより、マークの参照元となる詳細情報を確認できます。

     

  • テキスト、色、形状を使用できる棒グラフや折れ線グラフなどのシンプルなグラフィック エレメントを使用して、ビューにコンテキストを追加することを検討します。

  • マークの数を最も重要なデータ ポイントを強調するマークだけに限定します。

このタイプのビューの作成方法の詳細と例については、アクセシビリティのためのビューの作成シンプルにするを参照してください。

 

タイトルとキャプション

WCAG 2.0 AA の原則:知覚可能、理解可能

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

  • ビューは、説明に使用するテキストの補足であると考える。

  • タイトルやキャプションでテキストを使用して、視覚化および表示内容について説明する。

  • シンプルでわかりやすい言語を使用する。専門用語や頭字語、略語は、

  • 「~のイメージ」や「~の写真」などの言葉がすでにスクリーン リーダーに自動的に含まれる場合があるため、説明文には含めない。

  • 見出しやタイトルなどで大文字のみ使用することは、読み取りにくくなる可能性があるため避ける。

    例:この例は、2 種類の棒グラフを示しています。1 つはテキストをほとんど使用しておらず、もう 1 つはタイトルとキャプションを使ってコンテキストを追加しています

    簡単に理解できない - テキストが少なすぎる アクセシビリティが高い - 説明文を補足してコンテキストを提供する
    • 1 語だけのタイトルでは説明が不十分です。

    • マークが色とサイズで区別されています。しかし、テキストが追加されていないので、各マークのコンテキストが分かりづらい可能性があります。

    • このビューについて説明するキャプションやその他の説明文がありません。

    • この例は、同じビューを表示していますが、タイトルとキャプションの両方に説明文が追加されています。

    • 同じコントラスト カラー スケールとサイズを使って区別されていますが、コンテキストを追加するためにバー マークにラベルが追加されています。

コンテキストを提供するテキストを表示するビューの構築方法の詳細と例については、アクセシビリティのためのビューの作成より多くのテキストを表示して分かりやすいビューにするを参照してください。

 

追加テキスト

WCAG 2.0 AA の原則:知覚可能、理解可能

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

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

  • 凡例やフィルターの見出しにテキストを使用し、コントロールや何を行うかについて説明する。また、ダッシュボードのテキスト ゾーンを使用して視覚化に対するコンテキストを追加し、表示内容をさらに説明することもできます。

  • 可能であれば、ラベルによってコントロールを参照する。たとえば、凡例のラベルを [サブカテゴリ] から [商品タイプのカラー キー] に変更することで、コントロールとデータ間の関係がユーザーに分かりやすくなります。

  • ビューにリンク テキストを含める場合は、リンクがユーザーをどこへ移動させるかを説明するテキストを使用する。たとえば、「1990 ~ 2000 年の地球温暖化統計情報」のようなリンク テキストを使用します。「ここをクリック」、「その他」、または「詳細」などのリンク テキストは、一般的すぎてユーザーが混乱する可能性があるため、使用を避けます。

  • 視覚化のためにデータ主導のテキスト読み上げを生成する自然生成言語 (NLG) ツールの使用を検討する。たとえば、Automated Insights の Wordsmith(新しいウィンドウでリンクが開く)、Narrative Science の Narratives for Tableau(新しいウィンドウでリンクが開く)、ARRIA の Natural Language Insights 拡張機能(新しいウィンドウでリンクが開く)などです。

    例:この例は、2 種類のバブル チャートを示しています。1 つは、ビューの作成時に既定で表示されるテキストだけを使用しています。もう 1 つは、ビュー全体にコンテキスト固有のテキストを追加することにより、ビューの意味を伝えています。

    簡単に理解できない - テキストが少なすぎる アクセシビリティが高い - 説明文を追加
    • このビューは、シートのタイトルに既定のテキストのみを使用し、フィルターおよび凡例に既定のラベルを使用しています。

    • マークがサイズと色のみで区別されています。

    • このビューにはコンテキストを提供するキャプションやその他の説明文がありません。

    • この例は、同じビューを表示していますが、説明文が追加されています。

    • タイトルおよびキャプションにテキストを追加することにより、マークの関係を説明したり、ビューが何を示しているかを説明するコンテキストを提供することができます。

    • マーク ラベルを追加することで数値を示すことができるため、ユーザーが情報を理解する際に、色のみに頼らずに済みます。

コンテキストの補足テキストを含めたビューの構築方法と例については、アクセシビリティのためのビューの作成より多くのテキストを表示して分かりやすいビューにするを参照してください。

 

色とコントラスト

WCAG 2.0 AA の原則:知覚可能、理解可能

色を使用して、ビューのマークを区別することができます。ただし、特に多くのマークがあるビューで色だけを使用すると、視覚障害を持つユーザーが十分に区別できない場合があります。ビューで色を使用する際には、次のガイドラインを使用してください。

  • Tableau は、ビューに合った適切な色を選択する際に使用する色弱パレットを提供しています。使用するすべてのカラー パレットについて、十分なコントラストを提供し、明暗スペクトルでそれぞれ区別できる色を割り当てるようにします。

  • 線マークについては、形状、サイズ、ラベルなどの追加オプションを使用して線マークを区別します。

  • コントラスト分析(新しいウィンドウでリンクが開く)ツールを使用して、テキストの色と背景に最適なコントラスト比を選択します。カラー コントラストを強くし、4.5:1 (大きいテキストの場合は 3:1) のコントラスト比標準を満たすようにします。

    例:この例は、2 つの線グラフを示しています。1 つは色のみで線を区別し、もう 1 つはより適切な色と形状でマークを区別しています

    簡単に理解できない - 色のみでマークを区別 アクセシビリティが高い - 色と形状でマークを区別
    • このビューは、色のみでそれぞれの線を区別しています。

    • このビューのマークは、視覚障害を持つユーザーにとって十分にアクセシビリティが高いカラー パレットを使用していません。

    • この例は、同じビューを表示していますが、色と形状を使ってマークを識別しています。

    • 明確なタイトルの付いた色の凡例と形状の凡例があるため、ビューで色や形状が何を表しているかが分かります。

色を使ってマークを区別するビューの構築方法の詳細と例については、アクセシビリティのためのビューの作成色を慎重に使用してコントラストを提供するを参照してください。

 

ビューのパブリッシュ

WCAG 2.0 AA の原則:知覚可能、操作可能、理解可能

ビューをユーザーが使用できるようにするには、ツール バー メニューで [共有] をクリックしてビューを Tableau Server または Tableau Online にパブリッシュします。ユーザーはスクリーン リーダーやキーボードを使用してビューとツールバー ボタンを操作できます。詳細については、Tableau ビューのキーボードでのアクセシビリティを参照してください。

注: Tableau では、Web 編集に関して WCAG 準拠がサポートされていないため、パブリッシュされたワークブックでは Web 編集パーミッションをオフにする必要があります。

ワークブックをパブリッシュして埋め込む方法、埋め込みコードを探して Web ページにコピーする方法、ツールバーをオフにする方法の詳細については、アクセシビリティのためのビューの作成ビューのパブリッシュと共有を参照してください。

ありがとうございます!