透過 Codelyzer 稽核 Angular 應用程式's 無障礙功能

想讓所有人都能存取您的 Angular 網站嗎?歡迎使用這個頁面!

打造無障礙應用程式,代表所有使用者 (包括有特殊需求的使用者) 都能使用並理解內容。根據世界衛生報告,全球有超過十億人 (約佔全球人口的 15%) 患有某種形式的身心障礙。因此,無障礙設計是任何開發專案的優先事項。

在本篇文章中,您將瞭解如何在 Angular 應用程式的建構程序中加入 Codelyzer 無障礙功能檢查。這個方法可讓您在編寫程式碼時,直接在文字編輯器中找出無障礙功能錯誤。

codelyzerTSLint 的擴充工具,可檢查 Angular TypeScript 專案是否遵循一組檢查規則。使用 Angular 指令列介面 (CLI) 設定的專案預設會包含 Codelyzer。

程式碼分析器有超過 50 項規則,用於檢查 Angular 應用程式是否符合最佳做法。其中約有 10 項規則用於強制執行無障礙標準。如要瞭解 Codelyzer 提供的各項無障礙功能檢查項目和相關原因,請參閱「Codelyzer 中新增無障礙功能規則」一文。

目前,所有無障礙規則都是實驗性質,並預設為停用。您可以將這些設定新增至 TSLint 設定檔 (tslint.json) 來啟用:

{
 
"rulesDirectory": [
   
"codelyzer"
 
],
 
"rules": {
   
...,
   
"template-accessibility-alt-text": true,
   
"template-accessibility-elements-content": true,
   
"template-accessibility-label-for": true,
   
"template-accessibility-tabindex-no-positive": true,
   
"template-accessibility-table-scope": true,
   
"template-accessibility-valid-aria": true,
   
"template-click-events-have-key-events": true,
   
"template-mouse-events-have-key-events": true,
   
"template-no-autofocus": true,
   
"template-no-distracting-elements": true
 
}
}

TSLint 適用於所有熱門的文字編輯器和 IDE。如要搭配 VSCode 使用,請安裝 TSLint 外掛程式。在 WebStorm 中,TSLint 預設為啟用。如要瞭解其他編輯器,請參閱 TSLint README

設定 Codelyzer 的無障礙檢查功能後,您在編寫程式碼時,系統會顯示彈出式視窗,指出 TypeScript 檔案或內嵌範本中的無障礙錯誤:

文字編輯器中 Codelyzer 彈出式視窗的螢幕截圖。
Codelyzer 彈出式視窗顯示表單元素標籤錯誤。

如要對整個專案 (包括外部範本) 執行程式碼檢查,請使用 ng lint 指令:

使用 Angular CLI 進行 linting

補充 Codelyzer

Lighthouse 是另一個可用於在 Angular 應用程式中強制執行無障礙做法的工具。codelyzer 和 Lighthouse 的主要差異在於檢查時機。Codelyzer 會在開發期間以靜態方式分析應用程式,不執行應用程式。也就是說,您可以在開發期間直接在文字編輯器或終端機中取得意見回饋。相較之下,Lighthouse 實際執行應用程式,並透過動態分析執行多項檢查。

這兩種工具都能在開發流程中提供實用功能。Lighthouse 可執行檢查,且涵蓋範圍更廣,而 codelyzer 則可讓您在文字編輯器中持續取得意見回饋,加快疊代速度。

在持續整合中強制執行無障礙功能檢查

在持續整合 (CI) 中導入靜態無障礙性檢查,可為開發流程帶來極佳的改善。有了 Codelyzer,您可以輕鬆對每項程式碼修改 (例如每個新的提取要求) 執行 ng lint,強制執行特定無障礙規則或其他做法。

這樣一來,即使您尚未進行程式碼審查,CI 也能告知您是否有任何無障礙違規情形。

結論

如何改善 Angular 應用程式的無障礙功能:

  1. 在 Codelyzer 中啟用實驗性無障礙規則。
  2. 使用 Angular CLI,對整個專案執行無障礙功能程式碼檢查。
  3. 修正 Codelyzer 回報的所有無障礙功能問題。
  4. 建議您在執行階段使用 Lighthouse 進行無障礙稽核。