STEP 36：アクセシビリティとユニバーサルデザイン

ホーム > データ可視化マスター > STEP 36

♿ STEP 36: アクセシビリティとユニバーサルデザイン

すべての人が理解できる、誰にでも優しいデータ可視化を実現しよう!

📋 このステップで学ぶこと

  • アクセシビリティ（Accessibility）の重要性
  • 色覚バリアフリー（色覚多様性への配慮）
  • コントラスト比と視認性
  • テキスト情報の提供（alt属性、説明文）
  • スクリーンリーダー対応
  • ユニバーサルデザインの7原則

♿ 1. アクセシビリティとは

なぜアクセシビリティを学ぶのか

アクセシビリティ（Accessibility）とは、年齢、能力、状況に関わらず、すべての人が情報にアクセスできることです。

例えば、赤と緑を使ったグラフは、色覚多様性を持つ人（約5%の男性）には区別が困難です。また、色だけで情報を伝えるグラフは、視覚障害者がスクリーンリーダーで理解することができません。

アクセシブルなグラフを作ることは、「特別な配慮」ではなく、「すべての人にとって使いやすいデザイン」です。

【アクセシビリティが必要な理由】 【多様な利用者がいる】 ・色覚多様性（色盲・色弱）: 男性の約5%（日本では約300万人） ・視覚障害（全盲・弱視）: 約31万人（日本） ・高齢者（視力低下）: 増加中 ・一時的な制約: 明るい屋外での閲覧、片手がふさがっているなど 【法的要件がある】 ・米国: ADA（障害を持つアメリカ人法） ・欧州: EAA（欧州アクセシビリティ法） ・日本: 障害者差別解消法 ・国際基準: WCAG（Web Content Accessibility Guidelines） 【ビジネスメリットがある】 ・より多くの人にリーチできる ・ブランドイメージが向上する ・SEO（検索順位）が改善される ・ユーザー満足度が向上する
✅ アクセシブルなデータ可視化の4原則（WCAG準拠）
原則 意味 グラフでの実践
知覚可能 情報を認識できる 色だけに頼らない、テキスト説明を付ける
操作可能 インタラクティブ要素を使える キーボードで操作できる、クリック領域が十分
理解可能 情報と操作方法が明確 タイトル・軸ラベル・凡例が明確
堅牢性 様々な支援技術で利用可能 スクリーンリーダー対応、データテーブル提供
💡 アクセシビリティは特別な配慮ではない

アクセシビリティは「障害者のための特別な配慮」ではなく、「すべての人にとって使いやすいデザイン」です。色覚バリアフリーな配色は、すべての人にとって見やすく、明確なラベルは誰にとっても理解しやすい。良いアクセシビリティ = 良いデザインです！

🎨 2. 色覚バリアフリー（色覚多様性への配慮）

色覚多様性とは

色覚多様性（Color Vision Diversity）とは、色の見え方に個人差があることです。一般的に「色盲」「色弱」と呼ばれることもありますが、これは差別的な表現として避けられるようになっています。

🎨 色覚多様性の種類
種類 特徴 割合 区別しにくい色
1型色覚（P型） 赤色の認識が困難 男性の約1.5% 赤と緑
2型色覚（D型） 緑色の認識が困難 男性の約3.5%（最も一般的） 赤と緑
3型色覚（T型） 青色の認識が困難 約0.001%（非常に稀） 青と黄色
⚠️ 避けるべき配色
  • ❌ 赤と緑の組み合わせ: 最も一般的な色覚多様性で区別困難
  • ❌ 青と紫の組み合わせ: 類似した色は区別しにくい
  • ❌ 暗い色同士の組み合わせ: コントラストが低い
  • ❌ 色だけで情報を伝える: 必ず別の方法も併用する

色覚バリアフリーなカラーパレット

科学論文で推奨されるOkabe-Ito カラーパレットを使うと、色覚多様性を持つ人にも区別しやすいグラフが作れます。

【Okabe-Ito カラーパレット】 科学論文で推奨される色覚バリアフリーなパレット: colorblind_friendly = [ ‘#E69F00’, # オレンジ（1番目） ‘#56B4E9’, # スカイブルー（2番目） ‘#009E73’, # 緑（3番目） ‘#F0E442’, # 黄色（4番目） ‘#0072B2’, # 青（5番目） ‘#D55E00’, # 赤オレンジ（6番目） ‘#CC79A7’, # ピンク（7番目） ‘#000000’ # 黒（8番目） ] 【なぜこのパレットが良いのか】 ・明度（明るさ）に差がある → 白黒印刷でも区別可能 ・色相（色味）に差がある → 色覚多様性でも区別可能 ・彩度（鮮やかさ）が適度 → 目に優しい

▼ 入力するコード（悪い例と良い例の比較）

import matplotlib.pyplot as plt import numpy as np # 色覚バリアフリーなカラーパレット（Okabe-Ito） colorblind_friendly = [ ‘#E69F00’, # オレンジ ‘#56B4E9’, # スカイブルー ‘#009E73’, # 緑 ‘#F0E442’, # 黄色 ] # 悪い例: 赤と緑 bad_colors = [‘red’, ‘green’, ‘blue’, ‘orange’] # データ カテゴリ = [‘商品A’, ‘商品B’, ‘商品C’, ‘商品D’] 売上 = [150, 120, 100, 80] fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(14, 5)) # 悪い例: 赤と緑を使用 bars1 = ax1.bar(カテゴリ, 売上, color=bad_colors) ax1.set_title(‘❌ 悪い例: 赤と緑の組み合わせ\n（色覚多様性の人には区別困難）’, fontsize=14, fontweight=’bold’, color=’red’) ax1.set_ylabel(‘売上（万円）’, fontsize=12) ax1.grid(True, alpha=0.3, axis=’y’) # 良い例: 色覚バリアフリーパレット bars2 = ax2.bar(カテゴリ, 売上, color=colorblind_friendly) ax2.set_title(‘✓ 良い例: 色覚バリアフリーなカラーパレット\n（すべての人に区別可能）’, fontsize=14, fontweight=’bold’, color=’green’) ax2.set_ylabel(‘売上（万円）’, fontsize=12) ax2.grid(True, alpha=0.3, axis=’y’) plt.tight_layout() plt.show()

色以外の方法で情報を伝える

色だけに頼らず、線のスタイル（実線・破線）やマーカーの形（丸・四角・三角）も併用することで、色覚多様性を持つ人にも区別しやすくなります。

【色以外で区別する方法】 1. 線のスタイル ・実線（’-‘）: 最も基本的 ・破線（’–‘）: 点線より目立つ ・点線（’:’）: 補助的な線 ・一点鎖線（’-.’）: 目標線など 2. マーカーの形 ・丸（’o’）: 最も基本的 ・四角（’s’）: squareの略 ・三角（’^’）: 上向き三角 ・ダイヤ（’D’）: Diamond ・プラス（’+’）: 交点を示す 3. 線の太さ ・太い線（linewidth=3）: 重要なデータ ・細い線（linewidth=1）: 補助的なデータ 【組み合わせの例】 系列1: 青 + 実線 + 丸マーカー 系列2: オレンジ + 破線 + 四角マーカー 系列3: 緑 + 点線 + 三角マーカー

▼ 入力するコード（色 + 線スタイル + マーカーで区別）

import matplotlib.pyplot as plt import numpy as np # データ 月 = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’] 目標 = [100, 100, 100, 100, 100, 100] 実績 = [90, 105, 95, 110, 98, 115] fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(14, 5)) # 悪い例: 色だけで区別 ax1.plot(月, 目標, color=’red’, linewidth=3, label=’目標’) ax1.plot(月, 実績, color=’green’, linewidth=3, label=’実績’) ax1.set_title(‘❌ 悪い例: 色だけで区別’, fontsize=14, fontweight=’bold’, color=’red’) ax1.set_ylabel(‘売上（万円）’, fontsize=12) ax1.legend(fontsize=11) ax1.grid(True, alpha=0.3) # 良い例: 色 + 線のスタイル + マーカー ax2.plot(月, 目標, color=’#0072B2′, linewidth=3, linestyle=’–‘, marker=’o’, markersize=8, label=’目標’) ax2.plot(月, 実績, color=’#E69F00′, linewidth=3, linestyle=’-‘, marker=’s’, markersize=8, label=’実績’) ax2.set_title(‘✓ 良い例: 色 + 線スタイル + マーカーで区別’, fontsize=14, fontweight=’bold’, color=’green’) ax2.set_ylabel(‘売上（万円）’, fontsize=12) ax2.legend(fontsize=11) ax2.grid(True, alpha=0.3) plt.tight_layout() plt.show()

Seabornの色覚バリアフリーパレット

Seabornには“colorblind”という色覚バリアフリーパレットが用意されています。sns.set_palette("colorblind")を実行するだけで、すべてのグラフに適用されます。

【Seabornでの設定方法】 # 方法1: グローバルに設定（すべてのグラフに適用） sns.set_palette(“colorblind”) # 方法2: 個別のグラフで設定 sns.barplot(data=df, x=’地域’, y=’売上’, palette=”colorblind”) 【Seabornの色覚バリアフリーパレット一覧】 ・”colorblind”: 基本的な色覚バリアフリーパレット ・”muted”: 彩度を抑えたパレット ・”deep”: 濃い色のパレット ・”pastel”: パステル調のパレット（コントラスト注意）

▼ 入力するコード

import seaborn as sns import matplotlib.pyplot as plt import pandas as pd # データ df = pd.DataFrame({ ‘地域’: [‘北海道’, ‘東北’, ‘関東’, ‘中部’, ‘関西’, ‘中国’, ‘四国’, ‘九州’] * 3, ‘年度’: [‘2022年’] * 8 + [‘2023年’] * 8 + [‘2024年’] * 8, ‘売上’: [120, 150, 300, 180, 250, 100, 80, 140, 130, 160, 320, 190, 260, 110, 85, 150, 140, 170, 340, 200, 280, 120, 90, 160] }) # Seabornの色覚バリアフリーパレットを設定 sns.set_palette(“colorblind”) fig, ax = plt.subplots(figsize=(12, 6)) sns.barplot(data=df, x=’地域’, y=’売上’, hue=’年度’, ax=ax) ax.set_title(‘✓ Seabornの色覚バリアフリーパレット’, fontsize=16, fontweight=’bold’, color=’green’) ax.set_xlabel(‘地域’, fontsize=12) ax.set_ylabel(‘売上（万円）’, fontsize=12) ax.legend(title=’年度’, fontsize=11) ax.grid(True, alpha=0.3, axis=’y’) plt.tight_layout() plt.show()
💡 推奨カラーパレット
パレット名 特徴 おすすめ用途
Okabe-Ito 科学論文で推奨 学術発表、レポート
ColorBrewer 地図用に設計、汎用性高い 地図、カテゴリ比較
Viridis 明度の変化が大きい ヒートマップ、連続値
Seaborn “colorblind” すぐに使える Seabornでの可視化全般

🔍 3. コントラスト比と視認性

コントラスト比とは

コントラスト比とは、前景色（文字など）と背景色の明るさの比です。コントラスト比が高いほど、文字が読みやすくなります。

WCAGでは、通常の文字は4.5:1以上、大きな文字は3:1以上のコントラスト比を推奨しています。

🔍 WCAGのコントラスト比基準
レベル 通常の文字 大きな文字 説明
レベルAA（最低限） 4.5:1 以上 3:1 以上 多くのユーザーが読める
レベルAAA（推奨） 7:1 以上 4.5:1 以上 視力が低下した人も読める
【コントラスト比の具体例】 良い例（十分なコントラスト）: ✓ 黒 (#000000) と 白 (#FFFFFF): 21:1（最高） ✓ 濃い青 (#0072B2) と 白 (#FFFFFF): 8.2:1（良い） ✓ 緑 (#009E73) と 白 (#FFFFFF): 4.8:1（OK） 悪い例（コントラスト不足）: ❌ 薄いグレー (#999999) と 白 (#FFFFFF): 2.8:1（不十分） ❌ 黄色 (#FFFF00) と 白 (#FFFFFF): 1.1:1（非常に悪い） ❌ 薄い青 (#ADD8E6) と 白 (#FFFFFF): 1.8:1（読めない） 【確認ツール】 ・WebAIM Contrast Checker（無料オンラインツール） https://webaim.org/resources/contrastchecker/ ・Chrome DevTools の Lighthouse レポート

グラフでのコントラストの重要性

グラフの棒や線も、背景とのコントラストが重要です。薄い色を使うと、特に印刷時やプロジェクター投影時に見えにくくなります。

▼ 入力するコード（コントラストの良い例と悪い例）

import matplotlib.pyplot as plt import numpy as np # データ カテゴリ = [‘商品A’, ‘商品B’, ‘商品C’, ‘商品D’] 売上 = [150, 120, 100, 80] fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(14, 5)) # 悪い例: 薄い色と白背景（コントラスト不足） light_colors = [‘#FFE6E6’, ‘#E6F3FF’, ‘#E6FFE6’, ‘#FFFFE6′] bars1 = ax1.bar(カテゴリ, 売上, color=light_colors, edgecolor=’gray’) ax1.set_title(‘❌ 悪い例: 薄い色（コントラスト不足）’, fontsize=14, fontweight=’bold’, color=’red’) ax1.set_ylabel(‘売上（万円）’, fontsize=12) ax1.set_facecolor(‘#FFFFFF’) # 良い例: 濃い色と白背景（十分なコントラスト） dark_colors = [‘#E69F00’, ‘#56B4E9’, ‘#009E73’, ‘#F0E442′] bars2 = ax2.bar(カテゴリ, 売上, color=dark_colors, edgecolor=’black’, linewidth=1.5) ax2.set_title(‘✓ 良い例: 濃い色（十分なコントラスト）’, fontsize=14, fontweight=’bold’, color=’green’) ax2.set_ylabel(‘売上（万円）’, fontsize=12) ax2.set_facecolor(‘#FFFFFF’) plt.tight_layout() plt.show()

📝 4. テキスト情報の提供

なぜテキスト情報が必要か

視覚障害者はスクリーンリーダー（画面読み上げソフト）を使ってWebを閲覧します。グラフの画像だけでは内容が伝わらないため、テキストで説明を付ける必要があります。

【グラフに付けるべきテキスト情報】 1. タイトル → グラフの目的を簡潔に説明 例: 「2024年の月別売上推移」 2. 軸ラベル → X軸、Y軸が何を表すか明記 例: X軸「月」、Y軸「売上（万円）」 3. 凡例 → 各系列が何を表すか説明 例: 「目標」「実績」 4. 注釈・説明文 → 重要なポイントを補足 例: 「3月に売上が急増した理由は新商品発売」 5. データテーブル → グラフのデータを表形式で提供 → スクリーンリーダーで読み上げ可能 6. alt属性（Webの場合） → 画像が表示されない場合の代替テキスト 例: alt=”2024年1月から6月までの売上推移を示す折れ線グラフ。 1月90万円から始まり、6月には115万円まで増加している。”

説明文付きのグラフ

グラフの下に説明文を追加することで、グラフの内容を補足できます。

▼ 入力するコード（説明文付きグラフ）

import matplotlib.pyplot as plt import numpy as np # データ 月 = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’] 売上 = [90, 105, 95, 110, 98, 115] fig, ax = plt.subplots(figsize=(10, 6)) # グラフ ax.plot(月, 売上, marker=’o’, linewidth=3, markersize=10, color=’#0072B2′, label=’売上’) # タイトル（目的を明確に） ax.set_title(‘2024年上半期の月別売上推移\n（目標100万円に対する実績）’, fontsize=16, fontweight=’bold’, pad=20) # 軸ラベル（何を表すか明記） ax.set_xlabel(‘月’, fontsize=12) ax.set_ylabel(‘売上（万円）’, fontsize=12) # 目標線を追加 ax.axhline(y=100, color=’red’, linestyle=’–‘, linewidth=2, label=’目標（100万円）’) # 重要なポイントに注釈 ax.annotate(‘最高売上\n115万円’, xy=(5, 115), xytext=(4, 120), arrowprops=dict(arrowstyle=’->’, color=’green’, lw=2), fontsize=11, color=’green’, fontweight=’bold’, bbox=dict(boxstyle=’round,pad=0.5′, facecolor=’lightgreen’, alpha=0.7)) # 凡例 ax.legend(fontsize=11, loc=’upper left’) # グリッド ax.grid(True, alpha=0.3) # 説明文を図の下に追加 fig.text(0.5, 0.02, ‘説明: このグラフは2024年1月から6月までの月別売上推移を示しています。\n’ ‘6月に最高売上115万円を記録し、目標の100万円を大きく上回りました。’, ha=’center’, fontsize=10, style=’italic’, bbox=dict(boxstyle=’round’, facecolor=’wheat’, alpha=0.5)) plt.tight_layout() plt.subplots_adjust(bottom=0.15) # 説明文のスペース確保 plt.show()

データテーブルの併記

グラフと一緒にデータテーブルを表示すると、スクリーンリーダーユーザーにも情報が伝わります。

▼ 入力するコード（グラフ + データテーブル）

import matplotlib.pyplot as plt import pandas as pd # データ df = pd.DataFrame({ ‘月’: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’], ‘売上（万円）’: [90, 105, 95, 110, 98, 115], ‘目標（万円）’: [100, 100, 100, 100, 100, 100], ‘達成率（%）’: [90, 105, 95, 110, 98, 115] }) fig = plt.figure(figsize=(12, 8)) # グラフ（上段） ax1 = plt.subplot(2, 1, 1) ax1.plot(df[‘月’], df[‘売上（万円）’], marker=’o’, linewidth=3, markersize=10, color=’#0072B2′, label=’売上’) ax1.axhline(y=100, color=’red’, linestyle=’–‘, linewidth=2, label=’目標’) ax1.set_title(‘2024年上半期の月別売上推移’, fontsize=16, fontweight=’bold’) ax1.set_ylabel(‘売上（万円）’, fontsize=12) ax1.legend(fontsize=11) ax1.grid(True, alpha=0.3) # データテーブル（下段） ax2 = plt.subplot(2, 1, 2) ax2.axis(‘tight’) ax2.axis(‘off’) table = ax2.table(cellText=df.values, colLabels=df.columns, cellLoc=’center’, loc=’center’, colColours=[‘#E69F00’] * len(df.columns)) table.auto_set_font_size(False) table.set_fontsize(11) table.scale(1, 2) plt.tight_layout() plt.show() # テキスト版データも出力（スクリーンリーダー用） print(“\n【テキスト版データ】”) print(df.to_string(index=False))

🔊 5. スクリーンリーダー対応

スクリーンリーダーとは

スクリーンリーダーとは、画面上のテキストや画像を音声で読み上げるソフトウェアです。視覚障害者がコンピュータやWebを使う際に必須のツールです。

🔊 主なスクリーンリーダー
名前 対応OS 価格 特徴
NVDA Windows 無料 オープンソース、高機能
JAWS Windows 有料 業界標準、最も高機能
VoiceOver Mac / iOS 標準搭載 Apple製品に統合
TalkBack Android 標準搭載 Android標準
【スクリーンリーダー対応のポイント】 1. セマンティックHTML ✓ 見出しタグ（h1, h2, h3）を正しく使う ✓ リストタグ（ul, ol）を使う ✓ 表タグ（table）を適切に使う 2. alt属性 ✓ すべての画像にalt属性を付ける ✓ グラフの内容を文章で説明 ✓ 装飾画像は alt=”” で空にする 3. ARIA属性 ✓ role属性で要素の役割を明示 ✓ aria-label で補足説明 ✓ aria-describedby で詳細説明へリンク 4. フォーカス管理 ✓ キーボードだけで操作できる ✓ フォーカス順序が論理的 ✓ 現在位置が分かる（フォーカスリング）

HTMLでのアクセシビリティ対応例

Webでグラフを公開する場合、以下のようなHTMLを使うとスクリーンリーダーに対応できます。

【アクセシブルなHTMLの例】 <figure role=”img” aria-labelledby=”chart-title” aria-describedby=”chart-desc”> <!– タイトル –> <h2 id=”chart-title”>2024年上半期の月別売上推移</h2> <!– グラフ画像（alt属性で内容を説明） –> <img src=”chart.png” alt=”2024年1月から6月までの売上推移を示す折れ線グラフ。 1月90万円から始まり、6月には115万円まで増加している。”> <!– グラフの詳細説明 –> <div id=”chart-desc”> <p>このグラフは2024年上半期の月別売上推移を示しています。</p> <p>最高売上: 6月の115万円</p> <p>最低売上: 1月の90万円</p> </div> <!– データテーブル（折りたたみ可能） –> <details> <summary>データテーブルを表示</summary> <table> <caption>2024年上半期月別売上データ</caption> <thead> <tr> <th scope=”col”>月</th> <th scope=”col”>売上（万円）</th> </tr> </thead> <tbody> <tr><th scope=”row”>1月</th><td>90</td></tr> <tr><th scope=”row”>2月</th><td>105</td></tr> <!– 他の月も同様 –> </tbody> </table> </details> </figure> 【ポイント】 ・figure + role=”img”: グラフ全体をまとめる ・aria-labelledby: タイトルを関連付け ・aria-describedby: 詳細説明を関連付け ・details/summary: 必要な人だけ詳細を見れる ・scope属性: 表の見出しを明確に

🌐 6. ユニバーサルデザインの7原則

ユニバーサルデザインとは

ユニバーサルデザインとは、年齢、能力、状況に関わらず、できるだけ多くの人が利用できるデザインのことです。1980年代にアメリカの建築家ロナルド・メイスによって提唱されました。

🌐 ユニバーサルデザインの7原則
原則 意味 グラフでの実践例
1. 公平な利用 すべての人が同じ方法で利用できる 色覚バリアフリーな配色
2. 利用の柔軟性 様々な使い方ができる グラフとデータテーブルの両方を提供
3. 単純で直感的 経験や知識に関わらず理解できる 明確なタイトルと軸ラベル
4. 認知できる情報 必要な情報が効果的に伝わる 十分なコントラスト、複数の感覚で情報提供
5. 失敗への寛容 間違えても重大な結果にならない ズームやリセット機能
6. 少ない身体的努力 楽に使える 大きなクリック領域、キーボード操作対応
7. 適切なサイズと空間 十分なスペースと配置 タッチデバイスでも操作しやすいボタンサイズ

ユニバーサルデザインを実践したグラフ

7原則を意識してグラフを作成してみましょう。

▼ 入力するコード

import plotly.express as px import pandas as pd # データ df = pd.DataFrame({ ‘地域’: [‘北海道’, ‘東北’, ‘関東’, ‘中部’, ‘関西’, ‘中国’, ‘四国’, ‘九州’], ‘売上’: [120, 150, 300, 180, 250, 100, 80, 140], ‘前年比’: [‘+5%’, ‘+8%’, ‘+12%’, ‘+3%’, ‘+10%’, ‘-2%’, ‘+1%’, ‘+6%’] }) # 色覚バリアフリーな配色 colors = [‘#E69F00’, ‘#56B4E9’, ‘#009E73’, ‘#F0E442’, ‘#0072B2’, ‘#D55E00’, ‘#CC79A7’, ‘#999999′] fig = px.bar(df, x=’地域’, y=’売上’, color=’地域’, color_discrete_sequence=colors, title=’2024年の地域別売上
（前年比も表示）‘) # 各棒に前年比を表示（原則4: 認知できる情報） for i, row in df.iterrows(): fig.add_annotation( x=row[‘地域’], y=row[‘売上’], text=row[‘前年比’], showarrow=False, yshift=10, font=dict(size=12, color=’black’, family=’Arial Black’) ) fig.update_layout( # 原則1: 公平な利用 – 色覚バリアフリーな配色 showlegend=False, # 原則2: 利用の柔軟性 – ホバー情報 hovermode=’x unified’, # 原則3: 単純で直感的 – 明確なラベル xaxis_title=’地域‘, yaxis_title=’売上（万円）‘, # 原則4: 認知できる情報 – 十分なフォントサイズとコントラスト font=dict(size=14, color=’#000000′), plot_bgcolor=’white’, # 原則6: 少ない身体的努力 – 大きなクリック領域 bargap=0.2, # 原則7: 適切なサイズと空間 – 十分な余白 margin=dict(l=60, r=60, t=100, b=60), height=500 ) # グリッド追加（値の読み取りを容易に） fig.update_yaxis(showgrid=True, gridwidth=1, gridcolor=’lightgray’) fig.show() # テキスト版データも提供（原則2: 利用の柔軟性） print(“\n【テキスト版データ】”) print(df.to_string(index=False))

✅ 7. アクセシビリティチェックリスト

公開前に確認すべきポイント

グラフを公開する前に、以下のチェックリストで確認しましょう。

【アクセシビリティチェックリスト】 □ 色覚バリアフリー □ 赤と緑の組み合わせを避けた □ 色だけでなく、線スタイルやマーカーでも区別 □ 色覚バリアフリーパレットを使用（Okabe-Ito、ColorBrewerなど） □ 色覚シミュレーターで確認した □ コントラスト □ 文字と背景のコントラスト比が4.5:1以上 □ グラフの線や棒が背景とはっきり区別できる □ 薄い色を避けた □ テキスト情報 □ タイトルがある □ 軸ラベルがある □ 凡例がある □ 重要なポイントに注釈がある □ グラフの説明文がある □ データテーブルを提供した □ スクリーンリーダー対応 □ alt属性を付けた（Web画像の場合） □ セマンティックHTMLを使用 □ ARIA属性を適切に使用 □ キーボードだけで操作できる □ ユニバーサルデザイン □ 直感的に理解できる □ 複数の方法で情報を提供 □ 十分なフォントサイズ（12pt以上） □ 操作が簡単 □ エラーから回復できる □ モバイル対応 □ 小さな画面でも見やすい □ タッチ操作に対応 □ 拡大・縮小できる

📝 STEP 36 のまとめ

✅ このステップで学んだこと
トピック 重要ポイント
アクセシビリティ すべての人が情報にアクセスできることの重要性
色覚バリアフリー 色だけに頼らず、線スタイルやマーカーで区別
コントラスト比 4.5:1以上を確保して視認性向上
テキスト情報 説明文、データテーブル、alt属性の提供
スクリーンリーダー 音声で読み上げられるグラフ設計
ユニバーサルデザイン 7原則に基づく誰にでも優しい設計
💡 最重要ポイント

アクセシビリティは、「障害者のための特別な配慮」ではなく、「すべての人にとって使いやすいデザイン」です。

色覚バリアフリーな配色、十分なコントラスト、テキスト情報の提供により、すべての人が理解できるグラフを作りましょう。

良いアクセシビリティは、良いデザインです！

📝 実践演習

演習 1 基礎

赤と緑を使ったグラフを、色覚バリアフリーなパレットで作り直してください。

【解答】

Okabe-Itoパレットを使用します。

import matplotlib.pyplot as plt カテゴリ = [‘A’, ‘B’, ‘C’, ‘D’] 値 = [10, 20, 15, 25] # 色覚バリアフリーパレット（Okabe-Ito） colors = [‘#E69F00’, ‘#56B4E9’, ‘#009E73’, ‘#F0E442′] fig, ax = plt.subplots(figsize=(8, 5)) ax.bar(カテゴリ, 値, color=colors, edgecolor=’black’, linewidth=1.5) ax.set_title(‘色覚バリアフリーなグラフ’, fontsize=14, fontweight=’bold’) ax.set_ylabel(‘値’, fontsize=12) ax.grid(True, alpha=0.3, axis=’y’) plt.show()
演習 2 応用

折れ線グラフに、色、線スタイル、マーカーの3つで区別を付けてください。

【解答】

各系列に異なる色、線スタイル、マーカーを設定します。

import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y1 = [10, 12, 11, 13, 15] y2 = [8, 10, 12, 11, 14] fig, ax = plt.subplots(figsize=(10, 6)) # 系列1: 青、実線、丸マーカー ax.plot(x, y1, color=’#0072B2′, linestyle=’-‘, marker=’o’, markersize=8, linewidth=2, label=’系列1′) # 系列2: オレンジ、破線、四角マーカー ax.plot(x, y2, color=’#E69F00′, linestyle=’–‘, marker=’s’, markersize=8, linewidth=2, label=’系列2′) ax.set_title(‘色 + 線スタイル + マーカーで区別’, fontsize=14, fontweight=’bold’) ax.set_xlabel(‘X軸’, fontsize=12) ax.set_ylabel(‘Y軸’, fontsize=12) ax.legend(fontsize=11) ax.grid(True, alpha=0.3) plt.show()
演習 3 発展

アクセシビリティチェックリストを使って、自分のグラフを評価し、改善してください。

【解答例】
【チェック結果】 自己評価: ✓ 色覚バリアフリー → Okabe-Itoパレット使用 ✓ コントラスト比 → 4.5:1以上確保 ✗ テキスト情報 → 説明文が不足 ✗ データテーブル → 提供していない 【改善点】 1. グラフの下に説明文を追加 2. データテーブルを併記 3. alt属性を追加（Web公開の場合） 【改善後】 ・fig.text()で説明文を追加 ・print(df.to_string())でテキスト版を出力 ・再度チェックリストで確認

❓ よくある質問

Q1: すべてのグラフに色覚バリアフリー対応が必要ですか?
はい、基本的にすべてのグラフで対応すべきです。約5%の男性が色覚多様性を持っており、これは決して少なくない割合です。色覚バリアフリーな配色は、すべての人にとって見やすいので、デフォルトで使うことをおすすめします。
Q2: コントラスト比はどうやって確認すればいいですか?
WebAIM Contrast Checkerなどのオンラインツールを使いましょう。前景色と背景色のHEXコードを入力するだけで、コントラスト比を自動計算してくれます。Chrome DevToolsのLighthouseレポートも便利です。
Q3: Pythonで作ったグラフのalt属性はどうすればいいですか?
HTMLエクスポート時にalt属性を追加しましょう。Plotlyのwrite_html()メソッドなどを使う際に、グラフの内容を文章で説明するalt属性を付けます。また、グラフと一緒にデータテーブルも提供することで、スクリーンリーダーユーザーにも情報が伝わります。
Q4: 色覚シミュレーターとは何ですか?
色覚多様性を持つ人にどう見えるかをシミュレートするツールです。「Coblis」や「Color Oracle」などの無料ツールがあります。グラフを作成したら、必ずシミュレーターで確認することをおすすめします。
← 前のステップ
STEP 35: 誤解を招くグラフの回避 次のステップへ →
STEP 37: インフォグラフィックの作成
📝

学習メモ

データ可視化マスター - Step 36

💾 自動保存 · 0文字
📋 過去のメモ一覧 ▼
#artnasekai #学習メモ
LINE
ホーム
データ可視化マスター