作為 Liberogic 網頁 accessibility 工具的第二彈，我們發布了 Chrome 擴充功能「A11y Navigation Auditor」。能夠快速精準地將網站的「骨架結構」視覺化，順暢地應對容易被忽視的問題。這是為支援全面的結構確認，實現更確實的 accessibility 診斷而開發的工具。
開發背景
診斷 accessibility 的工具有很多。
只處理標題或地標等特定類別的工具無法掌握全局。
在頁面上疊加標記的類型雖然能看到全景，但會讓畫面變得混亂，妨礙俯瞰。
我們的目標是填補這個空隙，開發一款「能夠掌握全局，又不會讓畫面混亂，可以順暢俯瞰」的工具。
我們參考了螢幕閱讀器的元素列表功能，如 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」，我們希望能支持每個人都能順利抵達目的地的網站製作。這份心意已融入其中。
讓 accessibility 對應更貼近、更順暢。下一個工具也在準備中，敬請期待。
