Focus Visible Inspector

About

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 権限のみ使用（アイコンクリック時のタブにのみアクセス）