リベロジック、Webアクセシビリティ確認支援ツール「A11y Navigation Auditor」をリリース

未分類

リベロジック、Webアクセシビリティ支援ツール「A11y Navigation Auditor」をリリース

リベロジック株式会社は、Webアクセシビリティ啓発・支援ツールの第2弾として、Webサイトの構造を素早く正確に可視化するGoogle Chrome拡張機能「A11y Navigation Auditor(アクセシビリティ・ナビゲーション・オーディター)」をリリースしました。本ツールは、スクリーンリーダーの操作感を視覚化し、WCAG準拠の高度なアクセシビリティ診断をサポートします。

見落としがちなマークアップの不備をサイドパネルで網羅的に抽出し、より確かなアクセシビリティ診断をスピーディーに実現することが可能です。

A11y Navigation AuditorのUI

開発背景:既存ツールの課題解決

2024年4月の障害者差別解消法の改正施行(合理的配慮の義務化)以降、Webアクセシビリティへの関心は高まっています。しかし、現場での診断には以下の課題がありました。

  • 情報の断片化: 見出しやランドマークなど、カテゴリごとにツールを使い分ける必要があり、ページ全体の構造を把握しにくい状況でした。

  • 視認性の低下: ページ上に直接マーカーを重ねるツールは、要素が密集すると画面が煩雑になり、俯瞰的な診断を妨げる可能性がありました。

これらの課題を解消するため、スクリーンリーダー(VoiceOver等)の「ローター機能(要素一覧表示)」に着目し、要素一覧をサイドパネルに集約・視覚化しました。これに問題の自動検出機能を加えることで、「全体像を俯瞰しながら、詳細な問題を特定できる」プロ仕様の診断ツールが開発されました。

WCAGガイドラインとA11y Navigation Auditorの監査結果パネル

「A11y Navigation Auditor」の主な特徴

本ツールは、WCAG(Web Content Accessibility Guidelines)の達成基準(1.1.1、1.3.1、2.4.4等)に基づき、以下の項目を「エラー / 警告 / 情報」の3段階で判定します。

  • WCAG準拠の自動問題検出

    • 見出し:レベルのスキップ、空の見出し、ロールの消失 など

    • リンク:不明確な表現(「こちら」等)、空のテキスト、重複リンク など

    • フォームコントロール:ラベル欠落、autocomplete属性、エラーメッセージの紐付け など

    • ランドマーク:main要素の欠落、重複したロールの区別、セクショニング要素の不備 など

    • 画像:alt属性の欠落、不適切なaltテキスト(「画像」等) など

    • テーブル:captionやヘッダーの欠落、複雑な構造でのscope/headersの不備 など

  • 計算済み「アクセシブルネーム」の可視化

    • ARIA仕様に基づき、スクリーンリーダーが実際に何を読み上げるのか、その算出根拠(導出元)を含めて可視化します。
  • ARIA状態のリアルタイム監視

    • aria-expanded(展開状態)やaria-invalid(エラー状態)などの変化、動的なラベルの書き換えを自動検知し、ユーザー操作に伴うアクセシビリティの変化を即座に確認できます。
  • 直感的な操作性とハイライト機能

    • パネル内の項目をクリック(またはキーボードのカーソル移動)するだけで、該当要素へ自動スクロールし、ハイライト表示します。

A11y Navigation Auditorのインターフェース

プロフェッショナルのための高度な設定

  • 非表示要素の検査: 状況に応じて、隠された要素のアクセシビリティもチェック可能です。

  • ノイズの除外: サードパーティ製のウィジェットなどを自動で診断対象から除外します。

  • 日英バイリンガル対応: 日本語・英語の両インターフェースを提供します。

監修者について

本ツールは、IAAP認定 WAS(Web Accessibility Specialist)保持者である二俣 歩氏(リベロジック株式会社 CAO)の監修のもと、Webアクセシビリティ診断の現場で求められる実用性を重視して開発されました。二俣氏はWebアクセシビリティ対応を中心に、WCAGに基づく診断、改善提案、実装支援を担当しています。

ツールダウンロードと関連情報

「A11y Navigation Auditor」は、以下のChromeウェブストアからダウンロード可能です。

本件に関するお問い合わせや、リベロジック株式会社の詳細については、以下をご参照ください。

コメント

タイトルとURLをコピーしました