♿ 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))
（前年比も表示）‘) # 各棒に前年比を表示（原則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 36
📋 過去のメモ一覧
▼