Focus Visible Inspector

全てのフォーカス可能要素に強制的にoutlineを表示する開発ツール

Focus Visible Inspectorは、ページ上のすべてのフォーカス可能要素にoutlineを表示するアクセシビリティ開発ツールです。 主な機能 - トグル1つで全フォーカス可能要素の outline を可視化 - outline-color / outline-width / outline-offset / outline-style をリアルタイムで調整 - フォーカス可能要素の数を自動カウント - 現在の outline 設定を CSS としてコピー - ワンクリックでデフォルト設定にリセット - 設定は自動保存され、次回以降も引き継がれます 対応するフォーカス可能要素 - a[href], button, input, textarea, select, summary - [tabindex]（tabindex="-1" を除く）, [contenteditable] - ARIA ロール: button, link, tab, menuitem, checkbox, radio, switch, combobox, listbox, slider, spinbutton, searchbox, textbox - disabled 属性を持つ要素は対象外 使い方 1. ツールバーのアイコンをクリック 2. 「ハイライト表示」トグルをオンにする 3. 必要に応じて色・太さ・オフセット・スタイルを調整 こんな場面に便利 - WCAG 2.4.7（フォーカスの可視化）の適合チェック - キーボードナビゲーションのテスト - フォーカス順序の確認 - カスタムコンポーネントのフォーカス漏れ検出 技術仕様 - Manifest V3 - chrome.scripting.insertCSS によるスタイル注入（ページの CSP に影響されません） - 最小限の権限（activeTab, storage, scripting） - データ収集なし、外部通信なし 注意事項 - chrome://, chrome-extension://, edge://, about: などのブラウザ内部ページでは使用できません - activeTab 権限のみ使用（アイコンクリック時のタブにのみアクセス）