想让您的 Angular 网站可供所有人访问？您来对地方了！
Minko Gechev
Zama Khan Mohammed
让您的应用具备无障碍功能，意味着所有用户（包括有特殊需求的用户）都能使用该应用并理解其中的内容。根据《世界卫生报告》，全球有超过 10 亿人（约占世界人口的 15%）患有某种形式的残障。因此，无障碍功能是任何开发项目的优先事项。
在这篇博文中，您将了解如何将 codelyzer 的无障碍功能检查添加到 Angular 应用的 build 流程中。借助此方法，您可以在编写代码时直接在文本编辑器中发现无障碍功能 bug。
使用 Codelyzer 检测无法访问的元素
codelyzer 是一款基于 TSLint 的工具，用于检查 Angular TypeScript 项目是否遵循一组 lint 规则。使用 Angular 命令行界面 (CLI) 设置的项目默认包含 codelyzer。
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 文件或内嵌模板中的无障碍功能错误：