A11y Navigation Auditor - WCAG Webアクセシビリティ構造診断 & AIガイダンス

ページ構造を俯瞰しながら、Webアクセシビリティを正しく診断。スクリーンリーダーが認識する見出しやリンク、ランドマークなどの構造をサイドパネルに常駐させ、WCAG検査を快適にサポートします。さらに対応環境ではAIガイダンスも。

A11y Navigation Auditorは、VoiceOverの『ローター』に代表される、スクリーンリーダーの要素一覧機能をサイドパネルに視覚化し、問題の検出機能を追加。高度な構造監査を可能にする開発者ツールです。ウェブサイトの構造とアクセシビリティの実装を、瞬時に見抜きます。 デベロッパーツールの深い階層を辿る必要はありません。見出し、ランドマーク、アクセシブルネームの状態を常駐パネルでリアルタイムに俯瞰し、不備を即座に特定できます。 🔍 監査対象と検出する問題 ▪️見出し レベルのスキップ、空の見出し、ロールの消失 ▪️リンク 空のテキスト、不明確な表現、重複リンク ▪️フォームコントロール ラベル欠落、autocomplete属性、エラーメッセージの紐付け ▪️ランドマーク mainの欠落、重複したロールの区別、セクショニング要素の不備 ▪️画像 alt属性の欠落、不適切なaltテキスト（「画像」等）、ファイル名の使用 ▪️テーブル captionやヘッダーの欠落、複雑な構造でのscope/headersの不備 各診断はWCAGの達成基準（1.1.1、1.3.1、2.4.4、3.3.1、4.1.2等）を参照していますが、各基準のすべての側面を網羅するものではありません。 ✨ v1.2.0 新機能：AIガイダンス（Labs） Chromeの組み込みAI（Gemini Nano）を活用し、検出された問題ごとに「AIガイダンス」ボタンを表示。問題の文脈に応じた修正ヒントをその場で生成します。データは一切外部に送信されず、APIキー不要、トークンコストゼロ。すべてブラウザ内でローカルに処理されます。 ※AIガイダンス機能は、Google Chromeの内蔵AI（Gemini Nano等）が有効な環境でのみ動作します。お使いのバージョンや端末スペックによってはご利用いただけない場合があります。モデルが未インストールの場合、モデルのダウンロード（約4GB）が必要です。 ⭐ 主な機能 ▪️計算済みアクセシブルネームの表示 ARIA仕様に基づき、スクリーンリーダーが実際に読み上げる名前とその導出元を可視化します。 ▪️ARIA状態のリアルタイム監視 aria-expandedやaria-invalidなどの状態変化を自動更新。操作に応じたアクセシビリティの変化を即座に確認できます。 ▪️クリックでハイライト パネルの項目をクリックするだけで、該当要素へスクロールしハイライト表示します。 📊 他のツールとの比較 見出しやランドマークなど特定カテゴリだけを扱うツールでは全体像がつかめず、ページ上にマーカーを重ねるタイプは画面を煩雑にして俯瞰を妨げます。DevToolsのアクセシビリティツリーも、素早い構造監査にはノイズが多すぎます。 A11y Navigation Auditorは、このギャップを埋めるツールです。6つの主要カテゴリを1つのサイドパネルに統合し、VoiceOverスタイルのローターのように要素を一覧しながら、効率的なアクセシビリティ監査を実現します。 ⚠️ 本ツールの対象範囲 本ツールは、DOMの静的解析により検出可能な構造上のアクセシビリティの問題に特化しています。色のコントラスト比、キーボード操作性、動的な挙動、スクリーンリーダーとの互換性などは検査対象外です。包括的なWCAG適合性検査の代替となるものではありません。 💻 対応ブラウザ 本拡張機能はChrome Side Panel APIを使用しています。Google Chrome 114以降およびMicrosoft Edge 114以降に対応しています。Arc、Brave、Vivaldiなど、他のChromium系ブラウザはSide Panel APIが実装されていないため非対応となります。 ※新機能「AIガイダンス」はGoogle Chromeのみの対応となります（Gemini Nano等の内蔵AI機能が有効な環境が必要です）。 🔒 プライバシー データ収集は一切行いません。ネットワークリクエストも発行しません。すべてのアクセシビリティチェックはブラウザ内でローカルに実行されます。