想讓所有使用者都能輕鬆存取你的 Angular 網站嗎？正確答案！
打造無障礙應用程式，代表所有使用者 (包括有特殊需求的使用者) 都能使用並理解內容。世界衛生報告指出，約有 15% 的人口是超過 10 億人，具有某種形式的身心障礙。因此，無障礙是所有開發專案的優先要務。
在這篇文章中，您將瞭解如何將 codelyzer 的無障礙功能檢查新增至 Angular 應用程式的建構程序。這樣就能在編寫程式碼時，直接在文字編輯器中找出無障礙功能錯誤。
使用 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 在執行階段進行無障礙稽核。