想讓所有人都能存取 Angular 網站嗎？你來對地方了！
讓應用程式具備無障礙功能，代表所有使用者 (包括有特殊需求者) 都能使用應用程式並瞭解內容。根據世界衛生報告，全球有超過 10 億人 (約占全球人口的 15%) 患有某種形式的身心障礙。因此，無障礙功能是所有開發專案的優先要務。
在這篇文章中，您將瞭解如何在 Angular 應用程式的建構程序中加入 codelyzer 的無障礙檢查。採用這種做法後，您就能在編寫程式碼時，直接在文字編輯器中找出無障礙錯誤。
使用 codelyzer 偵測無法存取的元素
codelyzer 是 TSLint 的工具，可檢查 Angular TypeScript 專案是否遵循一組檢查規則。使用 Angular 指令列介面 (CLI) 設定的專案預設會包含 codelyzer。
codelyzer 包含超過 50 項規則，可檢查 Angular 應用程式是否遵循最佳做法。其中約有 10 項規則用於強制執行無障礙條件。如要瞭解 codelyzer 提供的各種無障礙檢查及其基本原理，請參閱「New Accessibility rules in 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 檔案或內嵌範本中編寫程式碼時，系統會顯示無障礙錯誤的彈出式視窗：
如要對整個專案 (包括外部範本) 執行 Lint 檢查，請使用 ng lint 指令：
補充 codelyzer
您也可以使用 Lighthouse，在 Angular 應用程式中強制執行無障礙做法。Codelyzer 和 Lighthouse 的主要差異在於執行檢查的時間。Codelyzer 會在開發期間靜態分析應用程式，不會執行應用程式。這表示在開發期間，您可以在文字編輯器或終端機中直接取得意見回饋。相較之下，Lighthouse 會實際執行應用程式，並使用動態分析執行大量檢查。
這兩項工具都是開發流程中實用的部分。Lighthouse 執行的檢查較多，因此涵蓋範圍較廣，而 codelyzer 則可在文字編輯器中提供持續回饋，協助您更快完成疊代。
在持續整合中強制執行無障礙檢查
在持續整合 (CI) 中導入靜態無障礙檢查，可大幅提升開發流程。您可以在每次修改程式碼時 (例如每次有新的提取要求)，執行 ng lint，輕鬆強制執行特定無障礙規則或其他做法。
這樣一來，即使您尚未進行程式碼審查，CI 也能告訴您是否有任何無障礙違規事項。
結論
如要改善 Angular 應用程式的無障礙設計，請按照下列步驟操作：
- 在 codelyzer 中啟用實驗性無障礙規則。
- 使用 Angular CLI 對整個專案執行無障礙功能 Linting。
- 修正 codelyzer 回報的所有無障礙問題。
- 建議在執行階段使用 Lighthouse 進行無障礙稽核。