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

想讓所有人都能存取 Angular 網站嗎？你來對地方了！

Minko Gechev
Zama Khan Mohammed
Zama Khan Mohammed
X GitHub 首頁

讓應用程式具備無障礙功能，代表所有使用者 (包括有特殊需求者) 都能使用應用程式並瞭解內容。根據世界衛生報告，全球有超過 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 檔案或內嵌範本中編寫程式碼時，系統會顯示無障礙錯誤的彈出式視窗：