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

スクリーンリーダーの操作感を視覚化し、WCAG準拠の高度なアクセシビリティ診断をサポート

リベロジック株式会社

リベロジック株式会社(本社:東京都、以下リベロジック)は、ウェブアクセシビリティ啓発・支援ツール第2弾として、ウェブサイトの構造を素早く正確に可視化するGoogle Chrome拡張機能「A11y Navigation Auditor(アクセシビリティ・ナビゲーション・オーディター)」をリリースいたしました。

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


開発の背景:既存ツールの「煩雑さ」と「断片化」を解消する

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

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

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

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

「A11y Navigation Auditor」の主な特徴

1. WCAG準拠の自動問題検出

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

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

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

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

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

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

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

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

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

3. ARIA状態のリアルタイム監視

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

4. 直感的な操作性とハイライト機能

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


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

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

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

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


A11y Navigation Auditor のダウンロードはこちら

A11y Navigation Auditor - Chrome ウェブストア

リベロジック株式会社は、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。 第1弾のコントラスト確認ツール「Area Contrast Checker」に続き、今回の「A11y Navigation Auditor」も、私たちが制作・診断の現場で切実に必要としていた機能を形にしました。

障がいの有無に関わらず、誰もが迷わず目的地へ到達できるサイト制作を強力にバックアップします。


監修について

本ツールは、IAAP認定 WAS(Web Accessibility Specialist)保持者である当社スタッフ監修のもと、Webアクセシビリティ診断の現場で求められる実用性を重視して開発しました。

ウェブサイトの「骨組み」を素早く正確に可視化し、見落としがちな問題へスムーズにアプローチすることで、より確かなアクセシビリティ診断を実現するために開発したツールです 。


監修者プロフィール

二俣 歩(ふたまた あゆむ)

リベロジック株式会社 CAO(Chief Accessibility Officer)

Webアクセシビリティスペシャリスト / フロントエンドエンジニア

IAAP認定 WAS(Web Accessibility Specialist)保持者

DTP領域での制作経験を経てWeb制作に転身し、リベロジック創業期よりマークアップ、フロントエンド実装、ディレクションなど幅広い業務に従事。現在はWebアクセシビリティ対応を中心に、WCAGに基づく診断、改善提案、実装支援を担当している。今回のChrome拡張機能「A11y Navigation Auditor」では、アクセシビリティ診断の現場視点から機能設計および判定内容を監修した。


本件に関するお問い合わせ先

本件に関するお問い合わせは以下フォームよりご記載ください。

お問い合わせフォーム:https://www.liberogic.jp/contact/


リベロジック株式会社

リベロジック株式会社は、モダンなフロントエンド開発、ヘッドレスCMS構築、UI/UX設計、Webアクセシビリティ支援を強みとする制作・開発会社です。Next.js、Astro、React、Vueなどの技術を活用した実装に加え、プロトタイピング型の開発手法によるサービス立ち上げ支援、Supabaseを活用した内部管理アプリケーション開発、既存インフラの見直しやモダン環境への移行支援など、幅広い領域のデジタル支援を行っています。


商号   : リベロジック株式会社

代表者  : 代表取締役 森本忠典

所在地  : 〒108-0073 東京都港区三田1-3-37板金会館2F 

設立   : 2007年2月

資本金  : 3,000万円

事業内容:

  • Webアプリケーション開発

  • ヘッドレスCMS開発(その他CMS実装/カスタマイズ)

  • ウェブアクセシビリティ対応 / 試験 / コンサルティング

  • Webサイト / アプリケーションの企画、制作、開発、運営、保守

  • UIデザイン(その他デザイン全般)

  • バックエンド開発等 Web制作・開発における全般業務

コーポレートサイト:https://www.liberogic.jp/

会社概要:https://www.liberogic.jp/about/

すべての画像


会社概要

リベロジック株式会社

0フォロワー

RSS
URL
https://www.liberogic.jp
業種
情報通信
本社所在地
東京都港区三田 1-3-37板金会館2階
電話番号
03-6809-4366
代表者名
森本忠典
上場
未上場
資本金
3000万円
設立
2007年02月