作為 Liberlogic 推出的第二款網頁無障礙工具,我們發布了 Chrome 擴充功能「A11y Navigation Auditor」。該工具能夠快速準確地可視化網站的“框架”,從而幫助您輕鬆解決那些經常被忽略的問題。它的開發旨在支持全面的結構驗證,並實現更可靠的無障礙評估。
發展背景
有許多工具可用於評估無障礙性。
只能處理標題和地標等特定類別的工具無法掌握整體情況。
雖然在頁面上疊加標記的類型可以讓你看到整體情況,但它會使螢幕雜亂,妨礙獲得鳥瞰視角。
我們的目標是創造一個能夠彌合這一差距的工具,讓您能夠掌握全局,並從鳥瞰的角度查看,而不會使螢幕雜亂無章。
我參考了螢幕閱讀器(例如 VoiceOver 的轉子顯示)的元素清單功能。
透過在側面板上視覺化並添加問題偵測功能,我們創建了一個易於理解且能夠進行高階結構診斷的開發人員工具。
審計目標和待發現的問題
▪️標題
跳級、標題空白、角色缺失等。
▪️連結
空文本、措詞不清、重複連結等。
▪️表格
缺少標籤、自動完成屬性、錯誤訊息映射等。
▪️地標
缺少主要內容、無法區分重複角色以及章節元素有缺陷。
▪️圖片
缺少 alt 屬性、alt 文字不恰當(例如,「圖像」)、使用錯誤的檔案名稱等。
▪️表格
缺少標題或標頭,以及複雜結構中範圍/標頭的缺陷。
主要特點
▪️符合 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,我們的目標是讓無障礙成為一種標準品質,而是需要特別關注的事情。
繼我們的首款產品「區域對比檢查器」之後,這款「A11y導航審核器」是另一款體現了我們在實際應用中迫切需要的功能的產品。正如「導航審核器」這個名字所示,我們希望幫助創建能夠讓每個人都能輕鬆找到目的地而不會迷路的網站。這就是我們開發這款產品的初衷。
讓無障礙合規更加便利順暢。我們正在準備下一代工具,敬請期待。