繼 Liberogic 的網頁無障礙工具系列第二款，我們正式推出 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 等），以錯誤／警告／資訊三個等級顯示。
▪️顯示計算後的無障礙名稱
依據 ARIA 規範，將螢幕閱讀器實際朗讀的名稱及其來源視覺化呈現。
▪️即時監控 ARIA 狀態
自動偵測 aria-expanded、aria-invalid 等狀態變化，以及 aria-label 等造成的無障礙名稱動態變化，讓您即時確認操作時無障礙特性的變化。
▪️點擊即可高亮顯示
只需點擊面板中的項目，即可捲動至對應元素並高亮顯示。也可使用鍵盤的上下左右鍵切換項目。
▪️專業人員的進階功能
・切換檢查隱藏元素
・自動排除第三方小工具
・支援日文與英文雙語
Liberogic 的目標，是讓無障礙設計從「特別的處理」變成「理所當然的品質」。
繼第一彈「Area Contrast Checker」之後，這次的「A11y Navigation Auditor」同樣是我們在實際工作現場迫切需要的功能所實現的成果。正如 Navigation Auditor 這個名稱所示，我們希望協助打造讓每位使用者都能毫不迷惘地抵達目的地的網站。我們懷抱著這樣的心願開發了這項工具。
讓無障礙設計更貼近日常，也更加順暢。下一款工具也正在籌備中，敬請期待。
