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

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

Tableau は、アクセシブルなビューを作成できるいくつかのコントロールをサポートし、US Section 508 要件および Web コンテンツ アクセシビリティ ガイドライン (WCAG 2.1 AA) への準拠を支援します。Tableau Cloud または Tableau Server から共有されるコンテンツが、「アクセシビリティのためのビューの作成」の手順に従い、次の WCAG 2.1 AA 原則に沿っていることを確認してください。

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

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

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

シンプルにする

WCAG 2.1 AA 原則: 理解可能

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

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

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

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

    簡単に理解できない - マークが多すぎるアクセシビリティが高い - 集計されたビュー
    5000 個のマークが表示されている縦棒チャートテキスト ラベルとより少ない数のマークが表示されている縦棒チャート
    • 詳細すぎて理解しづらいビューになっています。

    • 5,000 個以上のマークが表示され、各マークが何を表しているのかを示す十分なテキストがありません。

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

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

    • 重要なデータ ポイントは含んだまま、ユーザーにとって読みやすく、理解しやすくなりました。

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

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

     

  • 棒グラフや折れ線グラフのように、テキスト、色、図形を使用でき、より多くのコンテキストをビューに追加できる、シンプルなグラフィック要素を使用することを検討します。

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

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

 

タイトルとキャプション

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

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

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

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

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

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

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

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

    簡単に理解できない - テキストが少なすぎるアクセシビリティが高い - 説明文を補足してコンテキストを提供する
    最小限のテキストを含む縦棒チャートタイトルとキャプションを追加した縦棒チャート
    • 1 語だけのタイトルでは説明が不十分です。

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

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

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

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

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

 

追加テキスト

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

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

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

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

  • ビジュアライゼーションに代替テキストを追加します。Tableau は、Tableau 23.1 で Viz の代替テキストの自動生成を開始しました。Tableau 23.2 以降では、自動生成された代替テキストを編集して、閲覧者にとって重要であることがわかっている追加のコンテキストを追加できます。
  • 可能であれば、ラベルによってコントロールを参照します。たとえば、凡例のラベルを [サブカテゴリ] から [商品タイプのカラー キー] に変更することで、コントロールとデータ間の関係がユーザーに分かりやすくなります。

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

  • 例: 2 種類のバブル チャートを示しています。一方のビューでは、ビューの作成時にデフォルトで表示されるテキストのみを使用し、もう一方のビューでは、意味を伝えるためにビュー全体にコンテキストを追加するテキストを使用しています。

    簡単に理解できない - テキストが少なすぎるアクセシビリティが高い - 説明文を追加
    テキストがほとんどないバブル チャートタイトル、キャプション、その他のテキストを含むバブル チャート
    • このビューは、シートのタイトルにデフォルトのテキストのみを使用し、フィルターおよび凡例にデフォルトのラベルを使用しています。

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

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

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

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

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

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

 

色とコントラスト

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

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

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

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

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

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

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

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

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

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

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

 

ビューのパブリッシュ

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

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

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

フィードバックをお送りいただき、ありがとうございます。フィードバックは正常に送信されました。ありがとうございます!