--- title: "ページ構造を俯瞰しながら、アクセシビリティを正しく監査。A11yツール「A11y Navigation Auditor」をリリース" date: 2026-04-26 categories: news canonical: https://www.liberogic.jp/topics/20260427_a11y-navigation-auditor/ --- # ページ構造を俯瞰しながら、アクセシビリティを正しく監査。A11yツール「A11y Navigation Auditor」をリリース ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/4b47c14c81164b4f96a15ffe9199a1a5/20260427_a11y-navigation-auditor.png) リベロジックのウェブアクセシビリティツール第2弾として、Chrome拡張機能「A11y Navigation Auditor」をリリースしました。ウェブサイトの「骨組み」を素早く正確に可視化し、見落としがちな問題へスムーズにアプローチ。網羅的な構造確認をサポートし、より確かなアクセシビリティ診断を実現するために開発したツールです 。 リベロジックのウェブアクセシビリティツール第2弾として、Chrome拡張機能「A11y Navigation Auditor」をリリースしました。 ウェブサイトの「骨組み」を素早く正確に可視化し、見落としがちな問題へスムーズにアプローチ。網羅的な構造確認をサポートし、より確かなアクセシビリティ診断を実現するために開発したツールです 。 ## 開発の背景 アクセシビリティを診断するためのツールはたくさんあります。 見出しやランドマークなど特定カテゴリだけを扱うツールだと全体像が掴めません。 ページ上にマーカーを重ねるタイプは全体像は見れますが、画面を煩雑にして俯瞰を妨げます。 このギャップを埋める、「全体像が把握できて、画面を煩雑にせず俯瞰できる」そんなツールを目指しました。 参考にしたのはVoiceOverのローター表示などの、スクリーンリーダーの要素一覧機能です。 これをサイドパネルに視覚化し、そこに問題の検出機能を追加することで、見やすく高度な構造診断が可能な開発者ツールが実現しました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/7aba65c91f5f45879159fedbcf71b97d/Screen%20Shot%202026-04-27%2012.34.18.png) ## 監査対象と検出する問題 ▪️見出し レベルのスキップ、空の見出し、ロールの消失など ▪️リンク 空のテキスト、不明確な表現、重複リンクなど ▪️フォーム ラベル欠落、autocomplete属性、エラーメッセージの紐付けなど ▪️ランドマーク mainの欠落、重複したロールの区別、セクショニング要素の不備など ▪️画像 alt属性の欠落、不適切なaltテキスト（「画像」等）、ファイル名の使用など ▪️テーブル captionやヘッダーの欠落、複雑な構造でのscope/headersの不備など ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/fb11e17df48a4e4ba03d42ffba5dbf20/20260427_a11y-navigation-auditor_2.png) ## 主な機能 ▪️WCAG準拠の問題検出 WCAGの達成基準（1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2等）を参照し、エラー / 警告 / 情報の3段階で表示。 ▪️計算済みアクセシブルネームの表示 ARIA仕様に基づき、スクリーンリーダーが実際に読み上げる名前とその導出元を可視化。 ▪️ARIA状態のリアルタイム監視 aria-expanded、aria-invalidなどの状態変化や、aria-labelなどによるアクセシブルネームの動的変化も自動検知し、操作に応じたアクセシビリティの変化を即座に確認可能。 ▪️クリックでハイライト パネルの項目をクリックするだけで、該当要素へスクロールしハイライト表示。 キーボードの上下左右キーでも項目の切り替えが可能。 ▪️プロフェッショナルのための高度な機能 ・非表示要素の検査切替 ・サードパーティウィジェット自動除外 ・日本語・英語の2言語に対応 --- [A11y Navigation Auditorのダウンロードはこちら](https://chromewebstore.google.com/detail/a11y-navigation-auditor/epckdhhgemccfcomonlgkgabihoaaonp) リベロジックでは、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。 第1弾の「Area Contrast Checker」に続き、今回の「A11y Navigation Auditor」も、私たちが現場で切実に欲しかった機能を形にしたものです。 Navigation Auditorという名前の通り、誰もが迷わず目的地へ到達できるサイト制作をサポートしたい。そんな思いを込めています。 アクセシビリティ対応をより身近に、よりスムーズに。次なるツールも準備中ですので、ぜひご期待ください。