Focus Visible Inspector

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

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