地図のアクセシビリティ - NGパターン

問題： 地図がキーボードで操作できません。マーカーはマウスクリックにのみ反応し、キーボード操作は一切受け付けません。

実装の問題：

• map要素に tabindex="-1" を設定して、タブキーでフォーカスできないようにしている
• マーカーにキーボードハンドラーがない
• Enterキーやスペースキーでの操作をサポートしていない

影響： キーボードを使うユーザーや身体障害により入力デバイスが限定されているユーザーが地図を使用できません。

問題： 地図コンテナがセマンティック情報を持たず、スクリーンリーダーが地図の内容を理解できません。

実装の問題：

• map要素に aria-label や aria-description がない
• ランドマークの構造化データ（address、landmark など）がない
• role="presentation" が設定されており、セマンティックな役割がない
• 地図下に観光地リストなどのテキスト代替がない

影響： スクリーンリーダーを使用しているユーザーが地図に含まれる観光地情報にアクセスできません。

問題： マーカーカテゴリが色のみで区別されており、色覚障害者には区別できません。

実装の問題：

• すべてのマーカーが円形で、形状による違いがない
• 赤、青、緑、黄色で色分けしているが、グレースケール表示では区別不可
• 各マーカーにテキストラベルがない
• フォーカス時のビジュアル表示がない

影響： 色覚異常（特に赤緑色盲）のユーザーがマーカーカテゴリを区別できません。

問題： マップ上のテキストが背景と十分なコントラスト比を持たないため、読みにくくなっています。

実装の問題：

• 白いテキストを40%の不透明度で表示（実質的には薄いグレー）
• ライトマップの背景に薄い色のテキストが重なっている
• コントラスト比が 3:1 以下となっている
• 半透明の背景レイヤーで視認性が低下

影響： ロービジョン（視力が低い）ユーザーや、日中屋外でスマートフォンを使用するユーザーがテキストを読めません。

問題： マーカーをクリックして情報が変わっても、スクリーンリーダーに変化が通知されません。

実装の問題：

• aria-live リージョンが設定されていない
• role="status" や role="alert" がない
• DOMの変化がスクリーンリーダーに検出されない
• 状態の変更（選択中のマーカーなど）をアナウンスしない

影響： スクリーンリーダーユーザーが動的なコンテンツ更新に気づけず、ページのインタラクティブ機能を活用できません。

問題： ズームコントロールが単なるdiv要素で、キーボードでアクセス不可です。

実装の問題：

• ズームボタンが <button> ではなく <div> で実装
• role="button" が設定されていない
• aria-label がないため、名前が不明瞭
• tabindex が設定されておらず、キーボード操作不可
• Enter キーと Space キーを処理していない

影響： キーボードユーザーがズーム機能を使用できません。スクリーンリーダーが機能を認識できません。

問題： キーボードユーザーが地図をスキップする手段がありません。

実装の問題：

• "本文へスキップ" などのスキップリンクがない
• 地図の後ろに別のインタラクティブ要素があっても回避できない
• Tab キーでナビゲートする際、地図に長時間留まる

影響： キーボードユーザーが地図をスキップして次のコンテンツへ移動できず、効率的なページ操作ができません。

問題： ズームコントロールやlegendアイテムのクリック領域が小さすぎます。

実装の問題：

• ズームボタンが 28×28px（推奨: 最小 44×44px）
• legend の各アイテムが 12px 高（押しやすくない）
• タッチターゲット間の間隔が不足
• パディングが最小限

影響： タッチスクリーン使用者（スマートフォンやタブレット）、また手指の不自由なユーザーが正確に操作できません。

問題： マーカー情報がマウスホバーでのみ表示され、キーボードやタッチで確認できません。

実装の問題：

• 情報表示が CSS hover セレクターに依存している
• キーボード focus では情報が表示されない
• タッチデバイスではホバーの概念がなく、情報が見られない
• マウスを動かすと情報が即座に消える

影響： タッチデバイスユーザーやキーボードユーザーが重要なコンテンツにアクセスできません。

問題： マップが自動的にアニメーションし、ユーザーが停止できません。

実装の問題：

• CSS animation で無限ループする自動パンアニメーション
• アニメーション停止ボタンがない
• prefers-reduced-motion メディアクエリに対応していない
• JavaScript で停止制御ができない

影響： 前庭障害や注意欠陥のあるユーザーにとって、動くコンテンツは気が散る、または不快感を与えます。また、デバイスのバッテリーを消費します。