想讓所有人都能存取您的 Angular 網站嗎？歡迎使用這個頁面！
打造無障礙應用程式，代表所有使用者 (包括有特殊需求的使用者) 都能使用並理解內容。根據世界衛生報告，全球有超過十億人 (約佔全球人口的 15%) 患有某種形式的身心障礙。因此，無障礙設計是任何開發專案的優先事項。
在本篇文章中，您將瞭解如何在 Angular 應用程式的建構程序中加入 Codelyzer 無障礙功能檢查。這個方法可讓您在編寫程式碼時，直接在文字編輯器中找出無障礙功能錯誤。
使用 Codelyzer 偵測無法存取的元素
codelyzer 是 TSLint 的擴充工具，可檢查 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 檔案或內嵌範本中的無障礙錯誤：
如要對整個專案 (包括外部範本) 執行程式碼檢查，請使用 ng lint 指令：
補充 Codelyzer
Lighthouse 是另一個可用於在 Angular 應用程式中強制執行無障礙做法的工具。codelyzer 和 Lighthouse 的主要差異在於檢查時機。Codelyzer 會在開發期間以靜態方式分析應用程式，不執行應用程式。也就是說，您可以在開發期間直接在文字編輯器或終端機中取得意見回饋。相較之下，Lighthouse 實際執行應用程式，並透過動態分析執行多項檢查。
這兩種工具都能在開發流程中提供實用功能。Lighthouse 可執行檢查，且涵蓋範圍更廣，而 codelyzer 則可讓您在文字編輯器中持續取得意見回饋，加快疊代速度。
在持續整合中強制執行無障礙功能檢查
在持續整合 (CI) 中導入靜態無障礙性檢查，可為開發流程帶來極佳的改善。有了 Codelyzer，您可以輕鬆對每項程式碼修改 (例如每個新的提取要求) 執行 ng lint，強制執行特定無障礙規則或其他做法。
這樣一來，即使您尚未進行程式碼審查，CI 也能告知您是否有任何無障礙違規情形。
結論
如何改善 Angular 應用程式的無障礙功能：
- 在 Codelyzer 中啟用實驗性無障礙規則。
- 使用 Angular CLI，對整個專案執行無障礙功能程式碼檢查。
- 修正 Codelyzer 回報的所有無障礙功能問題。
- 建議您在執行階段使用 Lighthouse 進行無障礙稽核。