リベロジックのウェブアクセシビリティツール第2弾として、Chrome拡張機能「A11y Navigation Auditor」をリリースしました。 ウェブサイトの「骨組み」を素早く正確に可視化し、見落としがちな問題へスムーズにアプローチ。網羅的な構造確認をサポートし、より確かなアクセシビリティ診断を実現するために開発したツールです 。
開発の背景
アクセシビリティを診断するためのツールはたくさんあります。
見出しやランドマークなど特定カテゴリだけを扱うツールだと全体像が掴めません。
ページ上にマーカーを重ねるタイプは全体像は見れますが、画面を煩雑にして俯瞰を妨げます。
このギャップを埋める、「全体像が把握できて、画面を煩雑にせず俯瞰できる」そんなツールを目指しました。
参考にしたのはVoiceOverのローター表示などの、スクリーンリーダーの要素一覧機能です。
これをサイドパネルに視覚化し、そこに問題の検出機能を追加することで、見やすく高度な構造診断が可能な開発者ツールが実現しました。
監査対象と検出する問題
▪️見出し
レベルのスキップ、空の見出し、ロールの消失など
▪️リンク
空のテキスト、不明確な表現、重複リンクなど
▪️フォーム
ラベル欠落、autocomplete属性、エラーメッセージの紐付けなど
▪️ランドマーク
mainの欠落、重複したロールの区別、セクショニング要素の不備など
▪️画像
alt属性の欠落、不適切なaltテキスト（「画像」等）、ファイル名の使用など
▪️テーブル
captionやヘッダーの欠落、複雑な構造でのscope/headersの不備など
主な機能
▪️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のダウンロードはこちら
リベロジックでは、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。
第1弾の「Area Contrast Checker」に続き、今回の「A11y Navigation Auditor」も、私たちが現場で切実に欲しかった機能を形にしたものです。 Navigation Auditorという名前の通り、誰もが迷わず目的地へ到達できるサイト制作をサポートしたい。そんな思いを込めています。
アクセシビリティ対応をより身近に、よりスムーズに。次なるツールも準備中ですので、ぜひご期待ください。
